本文主要為大家詳細介紹了jquery.validate表單驗證外掛程式的使用方法,具有一定的參考價值,有興趣的小夥伴們可以參考一下,希望能幫助大家。
今天我們來說一下表單驗證,有人說我們在進行表單驗證的時候使用正則來驗證是非常麻煩的,現在我來給大家介紹一下表單驗證的插件:jquery.validate.min. js
它是與jquery一起結合用來使用的,使用它是非常方便,只需寫入校驗規則和錯誤欄位即可。
我們常見的校驗規則有以下幾種:
(1)required:true 必須有欄位
(2)email:true #(3)date:true 必須輸入正確格式的日期
(4)dateISO:true 必須輸入整數
(6)equalTo :"#pass" 輸入值必須與#pass相同
(7)maxlength:5 輸入長度最小是10的字串
( 9)rangelength:[5,10] 輸入長度必須在5 與10 之間
(10)range:[5,10] 5 輸入值值無法大於5
(12)min:10 ,不過可以不寫,因為它有英文的提示字段,下面就來請大家看以下程式碼:
我們在使用外掛程式之前必不可缺少的是要引入jquery檔案和外掛程式
<script src="jquery-1.9.1.js"></script> <script src="jquery.validate.min.js"></script>
<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>
接著再看一下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) },"邮编输入不正确"); });
今天的表帶驗證插件你們學會了嘛?
正規表示式表單驗證的實例介紹
以上是jquery.validate表單驗證外掛程式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!