2017-05-17
JavaScript
FE
配置式表单验证 (2)
封装是一门很深的学问。
  1. 需要给定什么初始值
  2. 需要暴露什么接口
做好这两个真的不容易。

# config 更普适的写法

00var config = [
01    {
02        todos: [
03            { method: 'isPhone', args: [userPhone] }
04        ],
05        err: '手机号输入错误'
06    },
07    {
08        todos: [
09            { method: 'lengthLessThan', args: [userName, 12] },
10            { method: 'lengthMoreThan', args: [userName, 6] },
11        ],
12        err: '用户名应该为 6 ~ 12 个字符之间'
13    },
14    {
15        todos: [
16            { method: 'exist', args: [userSex] },
17        ],
18        err: '性别未填写'
19    }, 
20    {
21        todos: [
22            { method: 'lengthMoreThan', args: [userPwd, 6] }
23        ],
24        err: '密码不得少于 6 个字符'
25    },
26    {
27        todos: [
28            { method: 'equal', args: [userPwd, userPwd2] }
29        ],
30        err: '前后密码输入不一致'
31    },
32    {
33        todos: [
34            { method: 'isNumber', args: [userVeri] },
35            { method: 'lengthLessThan', args: [userVeri, 4] },
36            { method: 'lengthMoreThan', args: [userVeri, 4] }
37        ],
38        err: '请输入合法的 4 位数字验证码'
39    }
40];
主要是考虑到 method 和 args 是耦合的,因此合并为对象作为 todos 的元素保存起来。

# 期望的食用方法

00import checker from './checker'; 
01
02var config = { /* 配置 */ }
03
04checker(config)(vals => {
05    console.log('全部通过校验'); 
06    // vals 是数组 里面存有相应的值 
07    console.log(vals); 
08}, err => {
09    // 至少有一个不能通过校验
10    alert(err); 
11});

# 实现

00// checker.js 
01function checker(config, thisArg){
02    thisArg = thisArg || this; 
03    var validator = {
04        exist: function(val){ 
05            return !!val; 
06        },
07        // 长度大于等于 n 吗?
08        lengthMoreThan(val, n){
09            return val.length >= n; 
10        },
11        // 长度小于等于 n 吗?
12        lengthLessThan: function(value, length){
13            return value.length <= length; 
14        },
15        // 是手机号吗? 
16        isPhone: function(tel){
17            return /^1(3|5|7|8|9)[0-9]{9}$/.test(tel); 
18        },
19        // a 严格等于 b 吗? 
20        equal: function(a, b){
21            return a === b; 
22        },
23        // n 是数字吗?
24        isNumber: function(n){ 
25            return /^[0-9]*$/.test(n); 
26        }
27    }
28
29    var result = config.filter(val => {
30        var isAllChecked = val.todos.every(todo => {
31            return validator[todo.method].apply(thisArg, todo.args); 
32        }); 
33        
34        return !isAllChecked; 
35    }); 
36
37    return function(success, fail){
38        if (result.length !== 0){
39            // 说明有数据未通过验证 
40            fail(result.map(e => e.err));
41        } else {
42            success(config)
43        }
44    }
45}

# Links





回到顶部