EEPW论坛

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

　　如果平常的代码不加整理，大概会如下：

　　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。