封装是一门很深的学问。
- 需要给定什么初始值
- 需要暴露什么接口
做好这两个真的不容易。
# 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 ↵
DEMO: 利用 checker.js 处理表单验证