Introduction to jquery.validate form validation plug-in

This article mainly introduces the use of jquery.validate form verification plug-in in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Today we will talk about form validation. Some people say that it is very troublesome to use regular expressions when performing form validation. Now I will introduce to you the form validation plug-in: jquery.validate.min. js

It is used in conjunction with jquery. It is very convenient to use it. You only need to write the verification rules and error fields.

our common verification rules are the following:

(1) Required: TRUE must lose field
(2) Email: True must enter the correct format of email
# #(3)date:true You must enter the date in the correct format
(4)dateISO:true You must enter the date in the correct format (ISO)
(5)digits:true You must enter an integer
(6)equalTo :"#pass" The input value must be the same as #pass
(7)maxlength:5 Enter a string with a maximum length of 5
(8)minlength:10 Enter a string with a minimum length of 10
( 9)rangelength:[5,10] The input length must be between 5 and 10
(10)range:[5,10] The input value must be between 5 and 10
(11)max: 5 The input value cannot be greater than 5
(12)min:10 The input value cannot be less than 10

Then just write the prompt field, but you don’t need to write it because it has an English prompt field. Here is Please take a look at the following code:

Before we use the plug-in, it is indispensable to introduce the jquery file and plug-in

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

Then let’s take a look Let’s take a look at the 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>

Then let’s take a look at the 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)
        },"邮编输入不正确");
      });

Today’s table Have you learned how to use the verification plug-in?

Related recommendations:

Example introduction to regular expression form validation

AngularJS implementation of obtaining focus and losing focus Detailed explanation of the form validation function

Example detailed explanation of jQuery's form validation function

The above is the detailed content of Introduction to jquery.validate form validation plug-in. For more information, please follow other related articles on the PHP Chinese website!