表單驗證插件jQuery.validate.js

你們好,咱們又見面了.昨天咱們講了原生JS DOM對象和jQuery對象的區別和相互轉換,今天咱們來說一下咱們工做中常常用到的一個插件------表單驗證插件jQuery.validate.js.

在用它以前要先引入jQuery,由於它是依賴jQuery的.

咱們先來寫一個簡單的頁面佈局   如:

<form action="" id="form">

　　<p>

　　　　<lable for="user">username:</lable>

　　　　<input type="text" name="username" id="uesr"/>

　　</p>

　　<p>

　　　　<lable for="pass">password:</lable>

　　　　<input type="text" name="password" id="pass"/>

　　</p>

　　<input type="submit" value="登陸" id="lgn"/>

　　<input type="submit" value="註冊" id="add"/>

</form>

樣式就隨我的喜愛隨便加一些吧.

好,接下來咱們寫JS部分  以下:

$("#form").validate({ //驗證所選取的form
　　rules:{            //驗證的規則自定義規則,key:value 的形式,key 是要驗證的元 素,value 能夠是字符串或對象 
　　　　username:{ //表單的name
　　　　　　required:true,  //表示必填
　　　　　　minlength:3,   //設置最小長度
　　　　　　maxlength:9   //設置最大長度
　　　　　},
　　password:{　　//密碼的規則同上,固然你也可一本身加一些規則
　　　　　　required:true,
　　　　　　minlength:3,
　　　　　　maxlength:9
　　　　　}
　　},
　　messages:{  //自定義的提示信息 key:value 的形式 key 是要驗證 的元素,值是字符串或函數 
　　　　username:{
　　　　　　required:"此項必填",//
　　　　　　minlength:"最小6位",
　　　　　　maxlength:"最大9位"
　　  　　 },
　　password:{
　　　　　　required:"此項必填",
　　　　　　minlength:"最小6位",
　　　　　　maxlength:"最大9位"
　　　　}
　　ignore:"#pass2",//對某些元素不進行驗證
　　submitHandler:function(){//定義表單驗證成功之後要作的事情
　　　　alert(123);
　　　}
　　},
　　invalidate:function(){//表單驗證不經過時執行的方法
　　　　alert("no")
　　},
　　focusInvalid:true,//提交表單後,未經過驗證的表單(第一個或提交之 前得到焦點的未經過驗證的表單)會得到焦點 
　　focusCleanup:true,//當未經過驗證的元素得到焦點時,並移除錯誤提示 （避免和 focusInvalid.一塊兒使用）

　　errorClass:"on",//指定錯誤提示的 css 類名,能夠自定義錯誤提示的 樣式 
　　wrapper:"div",//使用什麼標籤標記錯誤 
　　highlight:function(element,errorClass){//能夠給未經過驗證的元素加效果,閃爍等 
　　　　$(element).addClass(errorClass);
　　　　$(element).fadeOut().fadeIn();
　　　}
　　})
    $.validator.addMethod("PostCode",function(value){//自定義驗證規則
     var reg=/^[0-9]{6}$/;
     return reg.test(value);
    },'必須是數字');

以上就是這個插件中最經常使用的一些方法,剩下的方法若是有須要能夠本身去API查,網址是file:///D:/wamp/www/ajax/jquery.validation/jQuery.validate.js+API中文.pdf,但願對你有幫助,咱們明天見.