說明:jQuery formValidator表單驗證插件,它是基於jQuery類庫,實現了js
腳本於頁面的分離。對一個表單對象,你只須要寫一行代碼就能夠輕鬆實現20種以上的腳本控制。現支持一個表單元素累加不少種校驗方式,採用配置信息的思想,而不是把信息寫在表單元素上,能比較完美的實現ajax請求。並結合jquery.boxy實現遮罩提示。
1、 所需元素
jquery-1.3.2.js (須要jquery-1.3.2以上版本) formValidator.js (表單驗證基礎js) formValidatorRegex.js
(表單驗證所需正則js) jquery.boxy.js (遮罩提示js) validator.css (表單驗證樣式) boxy.css
(遮罩提示樣式)
2、 使用說明
a) 使用方法
i. 加載所需js和css文件 ii.
初始化驗證控件
($.formValidator.initConfig({formid:"form1",onerror:function(msg){Boxy.alert("<center>"+msg+"</center>",null,{title:"提示信息"});}});)
iii. 表單驗證
($("#nl").formValidator({onshow:"請輸入的年齡(1-99歲之間)
",onfocus:"只能輸入1-99之間的數字哦",oncorrect:"恭喜你,你輸對了
"}).inputValidator({min:1,max:99,type:"value",onerrormin:"你輸入的值必須大於等於1",onerror:"年齡必須在1-99之間,請確認"}).defaultPassed();
});)
b) 參數說明:
i.
初始化驗證控件:initConfig 1. Formid (form 表單 id)
2. Debug
(是否使用debug模式,默認false) 3. Validatorgroup (驗證表單分組)
4. Alertmsg
(alert輸出提示信息,默認false) 5. Boxyalertmsg (boxy.alert輸出提示信息,默認false) 6. Validobjectids (多個表單id,用「,」分隔) 7. Onsuccess (成功時回調涵數) 8. Onerror (失敗時回調涵數)
9. Submitonce
(是否提交表單,默認false)
10. Autotip
(是否使用自動驗證提示,默認false)
ii.
表單驗證
驗證方式有以下幾種 1. formValidator
(基礎驗證)
初始參數:
validatorgroup : "1",
empty :false, submitonce : false, automodify : false, onshow :"請輸入內容", onfocus: "請輸入內容", oncorrect: "輸入正確", onempty: "輸入內容爲空", defaultvalue : null, bind : true,
validatetype : "InitValidator", tipcss : { "left" : "10px", "top" : "1px", "height" : "20px", "width":"250px"
},
triggerevent:"blur" css
2. inputValidator
(input驗證)
初始參數:
isvalid : false,
min : 0,
max : 99999999999999, type : "size",
onerror:"輸入錯誤",
validatetype:"InputValidator",
empty:{leftempty:true,rightempty:true,leftemptyerror:nu
ll,rightemptyerror:null} html
3. compareValidator (比較驗證)
初始參數:
isvalid : false,
desid : "", operateor :"=",
onerror:"輸入錯誤",
validatetype:"CompareValidator" jquery
4. ajaxValidator
(ajax驗證)
初始參數:
isvalid : false,
lastValid : "", type : "GET",
url : "",
addidvalue : true, datatype : "html", data : "", async : true, cache : false,
beforesend : function(){return true;}, success : function(){return true;}, complete : function(){}, processdata : true, error : function(){}, buttons : null,
onerror:"服務器校驗沒有經過",
onwait:"正在等待服務器返回數據", validatetype:"AjaxValidator" ajax
5. regexValidator
(正則驗證)
初始參數:
isvalid : false,
regexp : "", param : "i",
datatype : "string",
onerror:"輸入的格式不正確",
validatetype:"RegexValidator" 服務器
3、 注意事項
formValidatorRegex.js方便擴展,可把經常使用的正則加入這個文件。
Bug:還有一個ajax驗證時在沒有改變值的狀況下,失去焦點時沒有進行驗證。目前不影響使用。例子請參考register.html。