表單驗證外掛程式---jquery.validate使用方法

 

 

今天我們來說一下表單驗證，有人說我們在進行表單驗證的時候使用正規來驗證是非常麻煩的，現在我來給大家介紹一下表單驗證的插件：jquery.validate.min.js

它是與jquery一起結合用來使用的，使用它是非常方便，只需寫入校驗規則和錯誤字段即可。

我們常見的校驗規則有以下幾種：

(1)required:true               必輸欄位
(2)欄位email:true                          必須輸入正確格式的日期(ISO)
(5)digits :true                 必須輸入整數
(6)equalTo:"#pass"            輸入長度最多是5的字串
(8)minlength:10輸入長度最小是10的字串
(9)rangelength:[5,10]         輸入長度必須介於5 和10 之間
(10)range:[5,10]        10 之間
(11)max:5                     輸入值輸入值無法大於5
(12)min:10  


#然後接著寫提示欄位就可以了，不過可以不寫，因為它有英文的提示字段，下面就來請大家看一下以下代碼：

我們在使用插件之前必不可缺的是要引入jquery檔案和外掛程式

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

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

以上是表單驗證外掛程式---jquery.validate使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！