超級強大的formValidator

來源：

http://www.cnblogs.com/wzmaodong

http://www.neatstudio.com/show-73-1.shtml  (全)

http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html

 

2011/5/22 jQuery formValidator 4.0.1 ver

規范插件的命名：
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插件主要功能

 

1. 支持所有類型客戶端控件的校驗
2. 支持jQuery所有的選擇器語法，只要控件有唯一ID和type屬性
3. 支持函數和正則表達式的擴展。提供擴展庫formValidatorReg.js，你可以自由的添加、修改里面的內容。
4. 支持2種校驗模式。第一種：文字提示(showword模式)；第二種：彈出窗口提示(showalert模式)
5. 支持多個校驗組。如果一個頁面有多個提交按鈕，分別做不同得提交，提交前要做不同的校驗，所以你得用到校驗組的功能。
6. 支持4種狀態的信息提示功能，可以靈活的控制4種狀態是否顯示。第一種：剛打開網頁的時候進行提示；第二種：獲得焦點的時候進行提示；第三種：失去焦點時，校驗成功時候的提示；第四種：失去焦點時，校驗失敗的錯誤提示。
7. 支持自動構建提示層。可以進行精確的定位。
8. 支持自定義錯誤提示信息。
9. 支持控件的字符長度、值范圍、選擇個數的控制。值范圍支持數值型、字符型、日期型；選擇的個數支持radio/checkbox/select三種控件
10. 支持2個控件值的比較。目前可以比較字符串和數值型、日期型。
11. 支持服務器端校驗。
12. 支持輸入格式的校驗。
13. 支持換膚

 

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請不要自行修改，也請留言，達到完善插件的目的，真正服務每個程序開發人員 .
請保留插件的版權申明，謝謝