Form validation plug-in---How to use jquery.validate

Today we will talk about form verification. Some people say that it is very troublesome to use regular expressions to verify when we perform form verification. Now let me introduce it to you. Here is a 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 verification rules and errors. field.

# Our common verification rules are the following:

(1) Required: True must lose field
(2) email:true You must enter the email in the correct format
(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 Between 10 Okay, but you don’t need to write it, because it has an English prompt field. Let’s take a look at the following code:

It is essential for us to introduce the plug-in before using it. jquery files and plugins

<span style="font-size: 18px"><script src="jquery-1.9.1.js?1.1.10"></script></span><br><span style="font-size: 18px"><script src="jquery.validate.min.js?1.1.10"></script><br>然后就来看一下html代码<br></span>

<span style="font-size: 18px"><form action="" id="mgForm">  //写表单验证比不缺少的是我们的form标签</span><br><span style="font-size: 18px">    <div>  //关于用户名的布局</span><br><span style="font-size: 18px">        <label for="user">username:</label></span><br><span style="font-size: 18px">        <input type="text" name="username" id="user"></span><br><span style="font-size: 18px">    </div></span><br><br><span style="font-size: 18px">    <div>//关于密码的布局</span>

<span style="font-size: 18px">        <label for="pass">password:</label></span><br><span style="font-size: 18px">        <input type="text" name="password" id="pass"></span><br><span style="font-size: 18px">    </div></span><br><span style="font-size: 18px">    <div>//重置密码</span><br><span style="font-size: 18px">        <label for="pass1">form-password:</label></span><br><span style="font-size: 18px">        <input type="text" name="password1" id="pass1"></span><br><span style="font-size: 18px">    </div></span><br><span style="font-size: 18px">    <div>//年龄</span><br><span style="font-size: 18px">        <label for="age">age:</label></span><br><span style="font-size: 18px">        <input type="text" name="age" id="age"></span><br><span style="font-size: 18px">    </div></span><br><span style="font-size: 18px">    <div>//email</span><br><span style="font-size: 18px">        <label for="email">email:</label></span><br><span style="font-size: 18px">        <input type="text" name="email" id="email"></span><br><span style="font-size: 18px">    </div></span><br><span style="font-size: 18px">    <input type="submit" value="提交">  //我们在提交数据时提交的按钮应该为submit类型的</span><br><span style="font-size: 18px"></form><br>接着再来看一下js代码 <br></span>

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

今天的表带验证插件你们学会了嘛？

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