简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Utiliser des expressions régulières pour implémenter la validation de formulaire en HTML

巴扎黑
Libérer： 2018-05-29 15:14:10
original
2438 Les gens l'ont consulté

Cet article présente principalement l'exemple de code d'utilisation d'expressions régulières pour vérifier les tableaux en HTML. Le code est simple et facile à comprendre, très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Permettez-moi de partager avec vous le code HTML. L'exemple de code de la table de vérification des expressions régulières, le contenu spécifique du code est le suivant : 

<span style="font-size:24px;color:#cc6600;"> 正则表达式在JavaScript脚本中是很好用的检验语法规则的方法。但是与Java中的正则表达式有所不同。它需要在regex规则上以“^”开始，以"$"结束。</span>
Copier après la connexion
<span style="font-size:24px;color:#cc6600;">以下让我们看看一个实例。</span>
Copier après la connexion
<span style="font-size:18px;"><!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        form table tr td{  
            border: 1px solid lightgrey;  
            text-align: center;  
        }  
        form table tr td input{  
            width: 97%;  
        }  
    </style>  
    <script language="JavaScript" type="text/javascript">  
        //判断规则（正则表达式）  
    function goto() {  
     var name = document.getElementById("name");  
     var pwd = document.getElementById("pwd");  
     var pwd2 = document.getElementById("pwd2");  
     var pnum = document.getElementById("pnum");  
     var phone = document.getElementById("phone");  
     var telephone = document.getElementById("telephone");  
     var email = document.getElementById("email");  
        if (name.value.trim().length<=8){  
            alert("用户名长度必须大于八位");  
            name.focus()  
            name.value="";  
            return;  
        }  
//        规则必须包括大小写字母，数字  
        var regex = /^(?!(?:\d+|[a-zA-Z]+|[\da-z]+|[\dA-Z])$)[\da-zA-Z]{6,}$/;  
//        var regex = /^[A-z0-9]{10,20}$/;  
        if ( !pwd.value.match(regex)){  
            alert("密码不符合规定");  
            pwd.focus()  
            pwd.value="";  
            return;  
        }  
        if (pwd.value != pwd2.value){  
            alert("两次输入的密码不相同");  
            pwd2.focus()  
            pwd.value="";  
            pwd2.value="";  
            return;  
        }  
        var rege=/^\d{17}X$|^\d{15}$/;  
        if (!rege.test(pnum.value)){  
            alert("身份证不符合规定");  
            pnum.focus()  
            pnum.value="";  
            return;  
        }  
        var regex2 = /^\d{4}-\d{7}$/;//判断座机号  
        if (!regex2.test(phone.value)){  
            alert("座机号码不符合规定");  
            phone.focus()  
            phone.value="";  
            return;  
        }  
        var regex3 = /^1[3,5,7,8]\d{9}$/;  
        if (!regex3.test(telephone.value)){  
            alert("手机号码不符合规定");  
            telephone.focus()  
            telephone.value="";  
            return;  
        }  
        //test方法必须用反斜杠转义  
        var regex4 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  
        if (!regex4.test(email.value)){  
            alert("邮箱不符合规定");  
            email.focus()  
            email.value="";  
            return;  
        }  
    }  
    </script>  
</head>  
<body>  
<form>  
    <table style="width:600px;height: 300px;border: 1px solid lightgrey">  
        <tr>  
            <td width="18%">登录名:</td>  
            <td><input id="name"type="text"></td>  
            <td width="50%">长度大于八位</td>  
        </tr>  
        <tr>  
            <td>登录密码:</td>  
            <td><input   id="pwd"type="password"></td>  
            <td>长度大于十位，包含字母数字</td>  
        </textarea></td>  
        </tr>  
        <tr>  
            <td>确认密码:</td>  
            <td><input id="pwd2" type="password"></td>  
        </tr>  
        <tr>  
            <td>身份证号码:</td>  
            <td><input  id="pnum" type="text"></td>  
            <td>15位或18位最后一个是X</td>  
        </tr>  
        <tr>  
            <td>固定电话:</td>  
            <td><input   id="phone"type="text"></td>  
            <td>格式xxxx-xxxxxxx</td>  
        </tr>  
        <tr>  
            <td>手机号码:</td>  
            <td><input   id="telephone"type="text"></td>  
            <td>11位整数</td>  
        </tr>  
        <tr>  
            <td>电子邮件:</td>  
            <td><input   id="email"type="text"></td>  
            <td>xxxx@xxx.xxx  xxx@xxx.xxx.xx</td>  
        </tr>  
        <tr>  
            <td>现居住地:</td>  
            <td><select>  
                <option>--选择省份--</option>  
                <option>北京</option>  
                <option>河北</option>  
                <option>广西</option>  
            </select></td>  
            <td><select>  
                <option>--选择城市--</option>  
                <option>烟台</option>  
                <option>青岛</option>  
                <option>哈尔滨</option>  
            </select></td>  
        </tr>  
        <tr>  
            <td colspan="1"></td>  
            <td><input id="submit" type="button" value="提交注册信息" style="width: 100px" onclick="goto()"></td>  
            <td><input type="reset" value="重置" style="width: 60px"></td>  
        </tr>  
    </table>  
</form>  
</body>  
</html></span>
Copier après la connexion

Pièce jointe : Certains sont courants. règles utilisées :

"^\d+$" //Entier non négatif (entier positif + 0)


"^[0-9]*[1- 9][0-9]*$" // Entier positif


"^((-\d+)|(0+))$" // Entier non positif (entier négatif + 0 )


"^- [0-9]*[1-9][0-9]*$" // Entier négatif


"^-?\ d+$" // Entier


"^\d+(\.\d+)?$" // Nombre à virgule flottante non négatif (nombre à virgule flottante positif + 0)


"^(([0-9]+\.[ 0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9 ]*\.[0-9]+)|([0- 9]*[1-9][0-9]*))$" //Nombre à virgule flottante positif


" ^((-\d+(\.\d+)?)|(0 +(\.0+)?))$" //Nombre à virgule flottante non positif (nombre à virgule flottante négatif + 0)


"^(-(([0-9]+\.[0 -9]*[1-9][0-9]*)|([0-9]*[1-9][ 0-9]*\.[0-9]+)|([0-9 ]*[1-9][0-9]*)))$" // Nombre à virgule flottante négatif


"^(-?\d+)(\.\d+)?$" // /Nombre à virgule flottante


"^[A-Za-z]+$" //A chaîne composée de 26 lettres anglaises


"^[A-Z]+ $" //Une chaîne composée de 26 lettres anglaises majuscules


"^[a-z]+$" //Une chaîne composée de 26 lettres anglaises minuscules


"^[A-Za-z0-9]+$" //Une chaîne composée de chiffres et de 26 lettres anglaises


"^\w+$" //Une chaîne composée de chiffres, une chaîne de 26 lettres anglaises ou traits de soulignement


"^[\w-]+(\.[\w-] +)*@[\w-]+(\.[ \w-]+)+$"　　　 //adresse e-mail


"^[a-zA-z]+://( \w+(-\w+)*)(\.(\ w+(-\w+)*))*(\?\S*)?$"　 //url

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
html
source：php.cn
Article précédent：HTML implémente la fonction de tri par glisser-déposer de la souris Article suivant：Trois façons d'implémenter une fonctionnalité de menu déroulant simple
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Tirer parti des composants VueJS en PHP Je souhaite mélanger le HTML de base généré par les composants Php et VueJS sans avoir à u...
Depuis 2023-11-11 00:01:44
0
2
288
Comment utiliser la balise primitive ouverte dans Next JS 13 ? Dans la récente mise à jour NextJS13, ils ont introduit une nouvelle façon de gérer les ba...
Depuis 2023-11-10 23:03:51
0
1
527
Le mailer PHP ne fonctionne pas : pas de journal d'erreurs, le message indique envoyé mais non reçu Je ne reçois aucun journal d'erreurs dans le journal des erreurs php de mon serveur Web. J...
Depuis 2023-11-10 15:02:39
0
1
218
v-date-picker pour sélectionner uniquement le mois et l'année S'il vous plaît dites-moi s'il existe un autre moyen de procéder en utilisant v-date-picke...
Depuis 2023-11-10 14:05:05
0
1
269
Le titre réécrit est : SweetAlert2 : les paramètres "onBeforeOpen" sont inconnus J'utilise Laravel5.8 avec Sweetalertv2 et j'essaie de déclencher cette alerte sur Blade av...
Depuis 2023-11-10 09:39:01
0
1
257
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！