Introduction au plug-in de validation de formulaire jquery.validate

Cet article présente principalement en détail l'utilisation du plug-in de vérification de formulaire jquery.validate. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Aujourd'hui, nous allons parler de la validation de formulaire. Certaines personnes disent qu'il est très gênant d'utiliser des expressions régulières lors de la validation de formulaire. Je vais maintenant vous présenter le plug-in de validation de formulaire : jquery.validate.min. js

Il est utilisé en conjonction avec jquery Il est très pratique de l'utiliser. Il vous suffit d'écrire les règles de vérification et les champs d'erreur.

Nos règles de vérification courantes sont les suivantes :

(1)obligatoire :true          Champs obligatoires
(2) email : true                                                                                                                            >(3)date:true Vous devez saisir la date dans le bon format
(4)dateISO:true Vous devez saisir la date au bon format (ISO)
(5)digits:true Vous devez saisir un entier
(6)equalTo :"#pass" La valeur d'entrée doit être la même que #pass
(7)maxlength:5 Entrez une chaîne d'une longueur maximale de 5
(8)minlength:10 Entrez une chaîne d'une longueur minimale de 10
( 9)rangelength:[5,10] La longueur d'entrée doit être comprise entre 5 et 10
(10)range:[5,10] La valeur d'entrée doit être comprise entre 5 et 10
(11)max : 5 Le la valeur d'entrée ne peut pas être supérieure à 5
(12)min:10 La valeur d'entrée ne peut pas être inférieure à 10

Ensuite, écrivez simplement le champ d'invite, mais vous n'avez pas besoin de l'écrire car il a un Champ d'invite en anglais, comme suit Veuillez jeter un œil au code suivant :

Avant d'utiliser le plug-in, il est indispensable de présenter le fichier jquery et le plug-in

<script src="jquery-1.9.1.js"></script>
<script src="jquery.validate.min.js"></script>

Ensuite, jetons un œil au code html

<form action="" id="mgForm"> //写表单验证比不缺少的是我们的form标签
  <p> //关于用户名的布局
    <label for="user">username:</label>
    <input type="text" name="username" id="user">
  </p>

  <p>//关于密码的布局
    <label for="pass">password:</label>
    <input type="text" name="password" id="pass">
  </p>
  <p>//重置密码
    <label for="pass1">form-password:</label>
    <input type="text" name="password1" id="pass1">
  </p>
  <p>//年龄
    <label for="age">age:</label>
    <input type="text" name="age" id="age">
  </p>
  <p>//email
    <label for="email">email:</label>
    <input type="text" name="email" id="email">
  </p>
  <input type="submit" value="提交"> //我们在提交数据时提交的按钮应该为submit类型的
</form>

Ensuite, jetons un œil au code js

   $(function () {
      $("#mgForm").validate({
        rules:{//写入文本框中的限制条件
          username:{ //指的是input中name的名字
            required:true,//不能为空
            minlength:6,//最短为6个
            maxlength:10//最长为10个
          },
          age:{
          //  range:[18,80] //年龄范围为18-80
            required:true, //不能为空
          },
          password:{
            required:true,//必填
            rangelength:[2,6] //长度为2-6
          },
          password1:{
            equalTo:"#pass" //重置密码必须与#pass中的密码保持一致
          },
          email:{
            email:true //email保证格式正确
          }
        },
        messages:{//提示信息
          username:{ //用户名
            required:"*此项必填",
            minlength:"*用户名最小是6位",
            maxlength:"*用户名最大是10位"
          },
          age:{//年龄
            range:"*年龄必须在18-80之间"
            PostCode:"错误"
          },
          password:{//密码
            required:"*必填",
            rangelength:"2-6"
          },
          password1:{//重置密码
            equalTo:"*密码不一致"
          },
          email:{//邮箱格式
            email:"*邮箱格式不正确"
          }
        },
        submitHanfler:function () {//如果全部验证正确就弹出弹窗
          alert("全部通过")
        },
        errorClass:"wrong",//给错误字段添加wrong样式
        ignore:"#pass1",//忽略密码不一
        errorElement:"p",//错误信息单独显示一行
        focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 
        focusCleanup:true,// 当未通过验证的元素获得焦点时,并移除错误提示
        highlight:function (element,errorClass) {//在信息错误时会出现一闪的效果
          $(element).addClass(errorClass);
          $(element).fadeOut().fadeIn()
        }
      });
        $.validator.addMethod("PostCode",function () { //此外，我们还可自定义样式
          var reg=/^[0-9]{6}$/;
          return reg.test(value)
        },"邮编输入不正确");
      });

Avez-vous appris le plug-in de vérification de sangle aujourd'hui ?

Recommandations associées :

Introduction d'instance de validation de formulaire d'expression régulière

Implémentation AngularJS de gain et de perte de concentration Explication détaillée de la fonction de validation du formulaire

Exemple d'explication détaillée de jQuery complétant la fonction de validation du formulaire

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!