DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery formValidator表單驗證插件開源了 含API幫助、源碼、示例
jQuery formValidator表單驗證插件開源了 含API幫助、源碼、示例
編輯:JQuery特效代碼     

2008-07-22 14:47


bug描述:ajaxValidator函數在提交後發生錯誤,停留在本頁面後,再次觸發校驗會讓提示內容一直處於onload狀態。


這個bug已經修復,請重新下載。




2008/7/17 14:12:00 jQuery formValidator 3.1ver


1、為inputValidator增加empty屬性。用於設置控件文本值是否允許兩邊為空。具體請看demo1裡的密碼的校驗代碼。
該屬性是個對象,默認值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左邊是否允許為空
rightempty:表示右邊是否允許為空
emptyerror:出現該錯誤的時候的提示,如果為null,則利用onerror屬性來提示錯誤。
注:只能在type:"size"的時候使用,即比較長度的時候。

2、修改自動構建提示層的語法。為formValidator函數增加relativeid屬性。
relativeid:表示提示層相對定位的控件ID,如果為空,則用當前校驗控件的ID。
tipid:表示自動創建的提示層的ID,如果為空,則用當前校驗控件的ID+"Tip"來命名。

3、修正ajaxValidator函數裡beforesend屬性的bug。代碼忘記傳遞它的唯一參數。

4、修正ajaxValidator函數在後台無法獲取中文的bug。

5、更新了升級記錄、用戶手冊、增加了2個提問。
1、現場演示

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


2、jQuery pageValidator插件主要功能

支持所有類型客戶端控件的校驗
支持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請不要自行修改,也請留言,達到完善插件的目的,真正服務每個程序開發人員 .
請保留插件的版權申明,謝謝

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved