JQuery 簡便實(shí)現(xiàn)頁面元素?cái)?shù)據(jù)驗(yàn)證功能

2024-09-06 12:42:53

字體：大中小

供稿：網(wǎng)友

ASP.NET提供了豐富的數(shù)據(jù)驗(yàn)證控件，但這個(gè)驗(yàn)證功能都必須運(yùn)用在服務(wù)器控件中；在復(fù)合驗(yàn)證數(shù)據(jù)時(shí)使用也不是很方便（雖然拖放控件很方便，但拖放數(shù)增多和設(shè)置相關(guān)屬性就變得很麻煩的事情）。為了更方便靈活地實(shí)現(xiàn)驗(yàn)證功能，于是采用了JQuery編寫了一個(gè)簡單驗(yàn)證組件，在使用時(shí)只需要簡單的描述一下驗(yàn)證規(guī)則，并不需要寫一句JavaScript就可以實(shí)現(xiàn)具備ASP.NET驗(yàn)證控件的功能（當(dāng)然頁面要引入相關(guān)JavaScript文件）。
功能目標(biāo)
       通過簡單的自定義屬性值描述具體的驗(yàn)證功能，當(dāng)Form提交自動攔載執(zhí)行驗(yàn)證功能。如果所有成員驗(yàn)證成功就提交，否則取消提交。
       簡單使用描述：
        代碼如下:
<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" />

實(shí)現(xiàn)要點(diǎn)
       利用JQuery提供的素元查找功能，方便查找出需要驗(yàn)證的元素對象;通過$(document).ready事件進(jìn)很驗(yàn)證代碼的初始化和執(zhí)行的切入工作。
       定義驗(yàn)證規(guī)則描述屬性,在初始化時(shí)對相關(guān)驗(yàn)證描述進(jìn)行分解和集成處理。
       攔載Form提交過程進(jìn)行驗(yàn)證處理，根據(jù)情況確定是否提交數(shù)據(jù)。
       元素對象在發(fā)生onchange事件時(shí)自動執(zhí)行驗(yàn)證處理功能。
       通過alert和自定義區(qū)域顯示錯(cuò)誤信息。
具體JavaScript代碼
       實(shí)現(xiàn)代碼并不復(fù)雜只有幾百行，由于相關(guān)代碼比較簡單所以沒有編寫注解.
具體代碼：
代碼如下:
// 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)

上一篇：一段多瀏覽器的&amp;quot;復(fù)制到剪貼板&amp;quot;javascript代碼

下一篇：Ajax一統(tǒng)天下之Dojo整合篇