Javascript实现统一的表单验证

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

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

if(username == ''){
    alert('username不能为空');
    return false;
}else if(password == ''){
    alert('password不能为空');
    return false;
}else if(password.length < 6){
    ...
    return false;
}
...

这样会产生以下问题

代码中if else过多，如果验证规则比较多，将会占用很长的篇幅，并且看起来比较混乱。
代码不利于重复使用，直接复制过来，改动较大。
耦合性较强，不利于维护，无论是增加还是删除都要小心。

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

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

//规则库
var rules = {
        //是否为空
        isEmpty:function(value){
            return value == '';
        },
        //最小长度
        minLength:function(value,length){
            return value.length >= length;
        },
        //最大长度
        maxLength:function(value,length){
            return value.length <= length;
        },
        //长度
        length:function(value,min,max){
            return value.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、样式，也不提供默认提示，没有跟jQuery Validate等一些验证插件一样，直接与dom元素绑定在一起。

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

//假设接收到的验证数据是data
var list = data,
    lens = list.length,
    //用一个数组接收错误信息
    arr = [],
    //定义一个返回对象
    result = {check:true},
    //标记错误
    isError = false;

for(var i=0;i<lens;i++){
    var l = list[i];
        val = l.value;
    //验证为空 
    if(l.isEmpty && rules.isEmpty(val)){
        arr[i] = l.isEmpty;
        isError = true;
        break;
    }
    //验证最小长度
    if(l.minLength){
        var index = 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){
        var index = 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){
    return v;
})
//如果验证失败，check设置为false,并且返回一条错误信息
return result;

通过上面的方式，就实现了一个统一风格的验证过程，但我们在实际开发中还会遇到各种场景，比如要返回多条错误信息，并且展示在页面上，还有如何跟vue/angular..等框架搭配等等，因篇幅问题，就不贴上所有代码，上面的实现已上传至github，github地址：https://github.com/weijhfly/verify，欢迎关注，如果有问题或建议请留言。

更多相关文章

随机推荐