博客专栏

EEPW首页 > 博客 > HTML5教程之Javascript实现统一表单验证分享

HTML5教程之Javascript实现统一表单验证分享

发布人:only1 时间:2020-10-27 来源:工程师 发布文章

  在现如今,大多数开发许多项目中,表单验证都是不可或缺的一环,比如注册、登录以及上传资料等等,但是每个人写代码的风格不一,如果没有一致而优雅的风格,没有方便的配置,代码很容易变得混乱,所以本文将用较统一的方式来实现验证。

  如果平常的代码不加整理,大概会如下:


  if(username==''){


  alert('username不能为空');


  returnfalse;


  }elseif(password==''){


  alert('password不能为空');


  returnfalse;


  }elseif(password.length<6){


  ...


  returnfalse;


  }


  ...


  这样会产生以下问题


  代码中ifelse过多,如果验证规则比较多,将会占用很长的篇幅,并且看起来比较混乱。


  代码不利于重复使用,直接复制过来,改动较大。


  耦合性较强,不利于维护,无论是增加还是删除都要小心。


  综上,表单验证的过程应该是简单,方便复用,并且易于配置的,因为UI设计师的设计风格往往不是单一的,所以我们还希望它是灵活的,能适应一些不太一样的场景,下面将详细介绍一种方式来实现。


  1,建立一个规则库


  因为很多验证场景都是类似的,所以我们可以把规则提取出来,统一管理,也方便后续的增加或修改。


  //规则库


  varrules={


  //是否为空


  isEmpty:function(value){


  returnvalue=='';


  },


  //最小长度


  minLength:function(value,length){


  returnvalue.length>=length;


  },


  //最大长度


  maxLength:function(value,length){


  returnvalue.length<=length;


  },


  //长度


  length:function(value,min,max){


  returnvalue.length>=min&&value.length<=max;


  },


  //是否是手机号码


  isMobile:function(value){


  return/(^1[3|5|7|8|9][0-9]{9}$)/.test(value);


  }


  //其他


  }


  2,良好的调用方式


  如何实现良好的调用方式是很重要的,将直接影响到我们代码的风格,还有是否方便复用,这一点可以借鉴npm中的package.json,需要什么,就配置什么,想象每条规则都是一个模块,我们要做的就是把模块配置进来。


  {//用户名


  value:username,


  isEmpty:'用户名不能为空',


  },


  {//密码


  value:password,


  isEmpty:'密码不能为空',


  minLength:'密码长度不小于6位&6',


  maxLength:'密码长度最大12位&12',


  },


  {//手机号


  value:phone,


  isEmpty:'手机号不能为空',


  isMobile:'手机号不正确'


  }


  //...


  如上,因为希望实现的方式是简单易用、方便配置的,并且适用一些不一样的场景,所以这里只取value进行验证,不干预dom、样式,也不提供默认提示,没有跟jQueryValidate等一些验证插件一样,直接与dom元素绑定在一起。


  3,验证的逻辑过程


  通过上面的配置,便可以在函数中取得验证数据,接下来与规则库相匹配,并返回错误信息,这样就能实现整个验证过程。


  //假设接收到的验证数据是data


  varlist=data,


  lens=list.length,


  //用一个数组接收错误信息


  arr=[],


  //定义一个返回对象


  result={check:true},


  //标记错误


  isError=false;


  for(vari=0;i


  varl=list[i];


  val=l.value;


  //验证为空


  if(l.isEmpty&&rules.isEmpty(val)){


  arr[i]=l.isEmpty;


  isError=true;


  break;


  }


  //验证最小长度


  if(l.minLength){


  varindex=l.minLength.lastIndexOf('&'),


  msg=l.minLength.substring(0,index),


  len=l.minLength.substring(index+1);


  if(!rules.minLength(val,len)){


  arr[i]=msg;


  isError=true;


  break;


  }


  }


  //验证最大长度


  if(l.maxLength){


  varindex=l.maxLength.lastIndexOf('&'),


  msg=l.maxLength.substring(0,index),


  len=l.maxLength.substring(index+1);


  if(!rules.maxLength(val,len)){


  arr[i]=msg;


  isError=true;


  break;


  }


  }


  //验证手机号


  if(l.isMobile){


  if(!rules.isMobile(val)){


  arr[i]=l.isMobile;


  isError=true;


  break;


  }


  }


  //其他


  }


  //返回


  if(error){result.check=false;}


  result.l=arr.filter(function(v){


  returnv;


  })


  //如果验证失败,check设置为false,并且返回一条错误信息


  returnresult;


  以上就是关于扣丁学堂HTML5视频教程之Javascript实现统一表单验证的详细介绍,最后想要工作不累就要不断的提升自己的技能,请关注扣丁学堂官网、微信等平台,扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5培训视频教程系统,通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统,让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群:751662650。

*博客内容为网友个人发布,仅代表博主个人观点,如有侵权请联系工作人员删除。

汽车防盗机相关文章:汽车防盗机原理


关键词:

相关推荐

技术专区

关闭