手把手教你自己写一个js表单验证框架

《手把手教你自己写一个js表单验证框架》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、其实我自己也就能简单用用js而已，但是呢，相对很多初学者来说多懂了点KnowHow所以斗胆孟浪一下，将一些所得记录下来，以供更多的初学者能够知道一个东西的实现过程，省去在源码里摸索的过程。　　在表单程序中，在页面上需要很多的Js代码来验证表单，每一个field是否必须填写，是否只能是数字，是否需要ajax到远程验证,blablabla。如果一个一个单独写势必非常的繁琐，所以我们的第一个目标就是构建一个类似DSL的东西，用表述的语句而非控制语句来实现验证。　　其次一个个单独写的话还有一个问题就是必须全部验证通过才能提交，但

2、是单独验证会因为这个特征而增加很多额外的控制代码，且经常会验证不全面。所以第二个目标就是能够全面的整合整个验证的过程。　　最后不能是一个无法扩展的一切写死的实现，必要的扩展性还是要的。　　首先，我们需要一个能够描述对字段验证的类?1234567function Field(params){     this.field_id=params.fid;    //要验证的字段的ID     this.validators=params.val;  //验证器对象数组     this.on_suc=params.suc;  

3、    //当验证成功的时候执行的事件     this.on_error=params.err;    //当验证失败的时候执行的事件     this.checked=false;          //是否通过验证 }　　关于验证器对象我们在后面来讨论，接下来我们扩展这个类，加入validate方法?1234567891011Field.prototype.validate=function(){      //循环每一个验证器      for(itemin this.validators){          

4、//给验证器附加验证成功和验证失败的回调事件          this.set_callback(this.validators[item]);          //执行验证器上的Validate方法，验证是否符合规则          if(!this.validators[item].validate(this.data())){              break;//一旦任意一个验证器失败就停止          }     }}　　再加入一个获取字段值的方法：?1234//获取字段值的方法 Field.p

5、rototype.data=function(){     return document.getElementById(this.field_id).value; }　　设置验证器回调函数的方法set_callback如下：?1234567891011Field.prototype.set_callback=function(val){    var self=this;             //换一个名字来存储this，不然函数的闭包中会覆盖这个名字     val.on_suc=function(){     

6、//验证成功执行的方法         self.checked=true;     //将字段设置为验证成功                self.on_suc(val.tips); //执行验证成功的事件     }     val.on_error=function(){   //验证失败的时候执行的方法         self.checked=false;    //字段设置为验证失败         self.on_error(val.tips);//执行验证失败的事件    }}　　接下来我们就来看看验证

7、器，验证器是真正执行验证过程的类，根据一般的验证过程，我们可以将其分类成，长度验证（包括必填验证），正则表达式验证，自定义函数验证，Ajax远程验证这几种，所以我们定义这几种验证器类，Ajax远程验证为了方便引用了jQuery，其他部分也有用到：?12345678910111213141516//长度验证的验证器类 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();