jquery.formValidator表單驗證文法

ms是從更新手冊中摘抄出來的。

規範插件的命名：

1、對插件所有函數相關屬性的命名采用Camel風格命名，即：第一個單詞首字母小寫，其餘單詞首字母大寫。本次變動比較大，為了規範插件的命名，希望大家諒解。

2、所有DEMO引用jQuery類庫的時候，類庫後面直接跟了版本号——表示插件支援的最高類庫版本号

為ajaxValidator函數增加以下功能： 

1、解決頁面回退之後，控件獲得焦點，不做任何修改，失去焦點後，強行驗證 

2、formValidator的ajax參數(是否要送出到伺服器)預設值改為false，但是ajaxValidator校驗的控件無條件送出伺服器 

3、在url後面增加随機數。name名字為rand 

4、送出之前有資料正在伺服器端校驗，不允許送出。如果在點選送出按鈕之前，有觸發ajaxValidator校驗的，在送出的時候預設不允許，可以自定義錯誤提示，在initConfig函數裡配置參數（submitAfterAjaxPrompt，預設值“目前有資料正在進行伺服器端校驗，請稍候”） 

5、如果在點選送出之前，如果一個控件一次都沒有校驗過，而且含有 ajaxValidator校驗，會自動觸發，而且異步傳回成功之後，會再次觸發送出 

其他新增和修改：

1、修改initConfig裡的error事件，errorlist參數的輸出順序，跟控件的校驗順序相同，如果正确，對應位置的值為null 

2、initConfig增加參數submitButtonID，表示觸發驗證的按鈕ID，如果配置了formID，則formID 優先 

3、reloadAutoTip、resetTipState和pageIsValid函數的參數(validatorGroup)為空，則預設當做"1"處理

4、删除函數triggerValidate

5、intiConfig增加屬性inIframe，表示頁面是否嵌在iframe裡，預設false

6、alertMessage模式下，預設自動修複錯誤，即autoModify=true

7、增加FAQ裡的提問

8、修改使用者手冊

9、demo1裡增加2選1的範例、把錯誤集中顯示的範例；

10、demo2裡觸送出用submitButtonID屬性

解決以下BUG： 

1、regexValidator第一次驗證通過後，後面輸入非法字元也驗證通過的問題 

2、處理更新之後，demo1裡的“全角字元當做1個長度”按鈕出錯的問題 

3、修複retSetTipState重置的時候，全部重置成onshow的問題，有些剛開始預設是通過的 

4、解決捆綁ajaxValidator校驗的控件，在頁面回退之後，控件獲得焦點，不做任何修改，失去焦點後，驗證錯誤的問題 

5、解決自動建構提示層示例全部團聚在左上角的問題,詳見demo6.html内嵌在demo.html裡的代碼調用

更多的更新記錄，請點選這裡

1、現場示範 

http://www.yhuan.com/formvalidator/demo1.htm

2、jQuery formValidator插件主要功能 

支援所有類型用戶端控件的校驗

支援jQuery所有的選擇器文法，隻要控件有唯一ID和type屬性

支援函數和正規表達式的擴充。提供擴充庫formValidatorReg.js，你可以自由的添加、修改裡面的内容。

支援2種校驗模式。第一種：文字提示(showword模式)；第二種：彈出視窗提示(showalert模式)

支援多個校驗組。如果一個頁面有多個送出按鈕，分别做不同得送出，送出前要做不同的校驗，是以你得用到校驗組的功能。

支援4種狀态的資訊提示功能，可以靈活的控制4種狀态是否顯示。第一種：剛打開網頁的時候進行提示；第二種：獲得焦點的時候進行提示；第三種：失去焦點時，校驗成功時候的提示；第四種：失去焦點時，校驗失敗的錯誤提示。

支援自動建構提示層。可以進行精确的定位。

支援自定義錯誤提示資訊。

支援控件的字元長度、值範圍、選擇個數的控制。值範圍支援數值型、字元型、日期型；選擇的個數支援radio/checkbox/select三種控件

支援2個控件值的比較。目前可以比較字元串和數值型、日期型。

支援伺服器端校驗。

支援輸入格式的校驗。

支援換膚

3、jQuery formValidator插件 API幫助文檔

幫助文檔請點選這裡 

4、下載下傳API幫助、源碼、示例

http://files.cnblogs.com/wzmaodong/formValidator4.0.1.zip

5、示例代碼

<script type="text/javascript">

$(document).ready(function(){

 $.formValidator.initConfig({onError:function(){alert("校驗沒有通過，具體錯誤請看錯誤提示")}});

 $("#test1").formValidator({onshow:"請輸入使用者名",onfocus:"使用者名至少6個字元,最多10個字元",oncorrect:"恭喜你,你輸對了"}).InputValidator({min:6,max:10,onerror:"你輸入的使用者名非法,請确認"});

 $("#test2").formValidator({onshow:"請選擇你的興趣愛好(至少選擇3個,最多選擇5個)",onfocus:"你至少選擇3個,最多選擇5個",oncorrect:"恭喜你,你選對了"}).InputValidator({min:3,max:5,onerror:"你選的個數不對(至少選擇3個,最多選擇5個)"});

 $("#test3").formValidator({onshow:"請選擇你的興趣愛好（至少選一個）",onfocus:"你至少選擇1個",oncorrect:"恭喜你,你選對了"}).InputValidator({min:1,onerror:"你選的個數不對"});

 $("#xueli").formValidator({onshow:"請選擇你的學曆",onfocus:"學曆必須選擇",oncorrect:"謝謝你的配合"}).SelectValidator({onerror: "你是不是忘記選擇學曆了!"});

 $("#password1").formValidator({onshow:"請輸入密碼",onfocus:"兩次密碼必須一緻哦",oncorrect:"密碼一緻"}).InputValidator({min:1,onerror:"密碼不能為空,請确認"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密碼不一緻,請确認"});

 $("#nl").formValidator({onshow:"請輸入的年齡（1-99歲之間）",onfocus:"隻能輸入1-99之間的數字哦",oncorrect:"恭喜你,你輸對了"}).InputValidator({min:1,max:99,type:"value",onerror:"年齡必須在1-99之間，請确認"});

 $("#aiguo").formValidator({onshow:"愛國的人一定要選哦",onfocus:"你得認真思考哦",oncorrect:"不知道你愛不愛，反正你是選了"}).InputValidator({min:1,max:1,onerror:"難道你不愛國？你給我選！！！！"});

 $("#shouji").formValidator({empty:true,onshow:"請輸入你的手機号碼，可以為空哦",onfocus:"你要是輸入了，必須輸入正确",oncorrect:"謝謝你的合作",onempty:"你真的不想留手機号碼啊？"}).InputValidator({min:11,max:11,onerror:"手機号碼必須是11位的,請确認"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你輸入的手機格式不正确"});

 $("#lxdh").formValidator({empty:true,onshow:"請輸入你的聯系電話，可以為空哦",onfocus:"你要是輸入了，必須輸入正确，格式例如：0577-88069620",oncorrect:"謝謝你的合作",onempty:"你真的不想留聯系電話了嗎？"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?(\[0-9]{8}|[0-9]{7})?$",onerror:"你輸入的聯系電話格式不正确"});

 $("#ms").formValidator({onshow:"請輸入你的描述",onfocus:"描述至少要輸入10個漢字或20個字元",oncorrect:"恭喜你,你輸對了"}).InputValidator({min:20,onerror:"你輸入的描述長度不正确,請确認"});

});

</script>

6、特别說明

如果你在使用過程中碰到什麼問題請給我留言，發現bug請不要自行修改，也請留言，達到完善插件的目的，真正服務每個程式開發人員 .

本文轉自 winters1224 51CTO部落格，原文連結：http://blog.51cto.com/winters1224/797843，如需轉載請自行聯系原作者