Einführung in das Formularvalidierungs-Plug-in jquery.validate

Dieser Artikel stellt hauptsächlich die Verwendung des jquery.validate-Formularüberprüfungs-Plug-ins im Detail vor. Ich hoffe, dass es jedem helfen kann.

Heute werden wir über die Formularvalidierung sprechen. Einige Leute sagen, dass die Verwendung regulärer Ausdrücke bei der Formularvalidierung sehr mühsam ist. js

Es wird in Verbindung mit jquery verwendet. Es ist sehr praktisch, es zu verwenden. Sie müssen nur die Überprüfungsregeln und Fehlerfelder schreiben.

Unsere allgemeinen Verifizierungsregeln lauten wie folgt:

(1)erforderlich:true           Erforderliche Felder
(2) E-Mail: wahr                                                                                                                                             >(3)date:true Sie müssen das Datum eingeben das richtige Format
(4)dateISO:true Sie müssen das Datum im richtigen Format (ISO) eingeben
(5)digits:true Sie müssen eine Ganzzahl eingeben
(6)equalTo :"#pass" Der Eingabewert muss mit #pass übereinstimmen
(7)maxlength:5 Geben Sie eine Zeichenfolge mit einer maximalen Länge von 5 ein
(8)minlength:10 Geben Sie eine Zeichenfolge mit einer Mindestlänge von 10 ein
( 9)rangelength:[5,10] Die Eingabelänge muss zwischen 5 und 10 liegen
(10)range:[5,10] Der Eingabewert muss zwischen 5 und 10 liegen
(11)max: 5 The Der Eingabewert darf nicht größer als 5 sein
(12)min:10 Der Eingabewert darf nicht kleiner als 10 sein

Dann schreiben Sie einfach das Eingabeaufforderungsfeld, aber Sie müssen es nicht schreiben, da es eine hat Englisches Eingabeaufforderungsfeld, wie folgt. Schauen Sie sich bitte den folgenden Code an:

Bevor wir das Plug-In verwenden, ist es unbedingt erforderlich, die JQuery-Datei und das Plug-In einzuführen

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

Dann werfen wir einen Blick auf den HTML-Code

<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>

Dann werfen wir einen Blick auf den JS-Code

   $(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)
        },"邮编输入不正确");
      });

Haben Sie heute das Gurtverifizierungs-Plug-in gelernt?

Verwandte Empfehlungen:

Instanzeinführung der Formularvalidierung für reguläre Ausdrücke

AngularJS-Implementierung von Fokusgewinn und Fokusverlust Detaillierte Erklärung der Formularvalidierungsfunktion

Beispiel für eine ausführliche Erklärung von jQuery zur Vervollständigung der Formularvalidierungsfunktion

Das obige ist der detaillierte Inhalt vonEinführung in das Formularvalidierungs-Plug-in jquery.validate. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!