手把手教你自己寫一個(gè)js表單驗(yàn)證框架

《手把手教你自己寫一個(gè)js表單驗(yàn)證框架》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、其實(shí)我自己也就能簡(jiǎn)單用用js而已，但是呢，相對(duì)很多初學(xué)者來(lái)說(shuō)多懂了點(diǎn)KnowHow所以斗膽孟浪一下，將一些所得記錄下來(lái)，以供更多的初學(xué)者能夠知道一個(gè)東西的實(shí)現(xiàn)過(guò)程，省去在源碼里摸索的過(guò)程?！　≡诒韱纬绦蛑校陧?yè)面上需要很多的Js代碼來(lái)驗(yàn)證表單，每一個(gè)field是否必須填寫，是否只能是數(shù)字，是否需要ajax到遠(yuǎn)程驗(yàn)證,blablabla。如果一個(gè)一個(gè)單獨(dú)寫勢(shì)必非常的繁瑣，所以我們的第一個(gè)目標(biāo)就是構(gòu)建一個(gè)類似DSL的東西，用表述的語(yǔ)句而非控制語(yǔ)句來(lái)實(shí)現(xiàn)驗(yàn)證?！　∑浯我粋€(gè)個(gè)單獨(dú)寫的話還有一個(gè)問(wèn)題就是必須全部驗(yàn)證通過(guò)才能提交，但

2、是單獨(dú)驗(yàn)證會(huì)因?yàn)檫@個(gè)特征而增加很多額外的控制代碼，且經(jīng)常會(huì)驗(yàn)證不全面。所以第二個(gè)目標(biāo)就是能夠全面的整合整個(gè)驗(yàn)證的過(guò)程?！　∽詈蟛荒苁且粋€(gè)無(wú)法擴(kuò)展的一切寫死的實(shí)現(xiàn)，必要的擴(kuò)展性還是要的?！　∈紫?，我們需要一個(gè)能夠描述對(duì)字段驗(yàn)證的類?1234567function?Field(params){?????this.field_id=params.fid;????//要驗(yàn)證的字段的ID?????this.validators=params.val;??//驗(yàn)證器對(duì)象數(shù)組?????this.on_suc=params.suc;??

3、????//當(dāng)驗(yàn)證成功的時(shí)候執(zhí)行的事件?????this.on_error=params.err;????//當(dāng)驗(yàn)證失敗的時(shí)候執(zhí)行的事件?????this.checked=false;??????????//是否通過(guò)驗(yàn)證?}　　關(guān)于驗(yàn)證器對(duì)象我們?cè)诤竺鎭?lái)討論，接下來(lái)我們擴(kuò)展這個(gè)類，加入validate方法?1234567891011Field.prototype.validate=function(){??????//循環(huán)每一個(gè)驗(yàn)證器??????for(itemin?this.validators){??????????

4、//給驗(yàn)證器附加驗(yàn)證成功和驗(yàn)證失敗的回調(diào)事件??????????this.set_callback(this.validators[item]);??????????//執(zhí)行驗(yàn)證器上的Validate方法，驗(yàn)證是否符合規(guī)則??????????if(!this.validators[item].validate(this.data())){??????????????break;//一旦任意一個(gè)驗(yàn)證器失敗就停止??????????}?????}}　　再加入一個(gè)獲取字段值的方法：?1234//獲取字段值的方法?Field.p

5、rototype.data=function(){?????return?document.getElementById(this.field_id).value;?}　　設(shè)置驗(yàn)證器回調(diào)函數(shù)的方法set_callback如下：?1234567891011Field.prototype.set_callback=function(val){????var?self=this;?????????????//換一個(gè)名字來(lái)存儲(chǔ)this，不然函數(shù)的閉包中會(huì)覆蓋這個(gè)名字?????val.on_suc=function(){?????

6、//驗(yàn)證成功執(zhí)行的方法?????????self.checked=true;?????//將字段設(shè)置為驗(yàn)證成功????????????????self.on_suc(val.tips);?//執(zhí)行驗(yàn)證成功的事件?????}?????val.on_error=function(){???//驗(yàn)證失敗的時(shí)候執(zhí)行的方法?????????self.checked=false;????//字段設(shè)置為驗(yàn)證失敗?????????self.on_error(val.tips);//執(zhí)行驗(yàn)證失敗的事件????}}　　接下來(lái)我們就來(lái)看看驗(yàn)證

7、器，驗(yàn)證器是真正執(zhí)行驗(yàn)證過(guò)程的類，根據(jù)一般的驗(yàn)證過(guò)程，我們可以將其分類成，長(zhǎng)度驗(yàn)證（包括必填驗(yàn)證），正則表達(dá)式驗(yàn)證，自定義函數(shù)驗(yàn)證，Ajax遠(yuǎn)程驗(yàn)證這幾種，所以我們定義這幾種驗(yàn)證器類，Ajax遠(yuǎn)程驗(yàn)證為了方便引用了jQuery，其他部分也有用到：?12345678910111213141516//長(zhǎng)度驗(yàn)證的驗(yàn)證器類?function?Len_val(min_l,max_l,tip){?????this.min_v=min_l;?????this.max_v=max_l;?????this.tips=tip;?????th

8、is.on_suc=null;?????this.on_error=null;?}Len_val.prototype.validate=function(fd){????if(fd.length

9、

10、fd.length>this.max_v){????????this.on_error();???