JQuery 簡便實現頁面元素數據驗證功能
2024-09-06 12:42:53
供稿：網友
ASP.NET提供了豐富的數據驗證控件，但這個驗證功能都必須運用在服務器控件中；在復合驗證數據時使用也不是很方便（雖然拖放控件很方便，但拖放數增多和設置相關屬性就變得很麻煩的事情）。為了更方便靈活地實現驗證功能，于是采用了JQuery編寫了一個簡單驗證組件，在使用時只需要簡單的描述一下驗證規則，并不需要寫一句JavaScript就可以實現具備ASP.NET驗證控件的功能（當然頁面要引入相關JavaScript文件）。
功能目標
通過簡單的自定義屬性值描述具體的驗證功能，當Form提交自動攔載執行驗證功能。如果所有成員驗證成功就提交，否則取消提交。
簡單使用描述：
代碼如下:
<input id="Text1" type="text" validator="type:string;nonnull:true;tip:請輸入用戶名!;tipcontrol:nametip" />
<input id="Text2" type="text" validator="type:date;nonnull:true;tip:請輸入正確的出生日期!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />
實現要點
利用JQuery提供的素元查找功能，方便查找出需要驗證的元素對象;通過$(document).ready事件進很驗證代碼的初始化和執行的切入工作。
定義驗證規則描述屬性,在初始化時對相關驗證描述進行分解和集成處理。
攔載Form提交過程進行驗證處理，根據情況確定是否提交數據。
元素對象在發生onchange事件時自動執行驗證處理功能。
通過alert和自定義區域顯示錯誤信息。
具體JavaScript代碼
實現代碼并不復雜只有幾百行，由于相關代碼比較簡單所以沒有編寫注解.
具體代碼：
代碼如下:
// JScript 文件
//<validator>
//type:int|number|date|string
//nonnull:true|false
//regex:^[-/+]?/d+$
//min:0
//max:999999999
//campare:id
//comparetype:eq,neq,leq,req,le,ri
//tipcontrol:
//tip:
//</validator>
var ErrorMessage;
function FormValidate(form)
{
ErrorMessage='';
var legality,items;
legality = true;
items = $(form).find("input[@validator]");
for(var i =0;i< items.length;i++)
{
if(legality)
