ES6中Proxy的应用

每次开发小程序中多多少少都会用到表单的验证，比如在填写个人资料的时候，要进行繁琐的验证。首先就是一个正则表达式，验证失败与否出现相应的提示语，提示结束后又得判断是否全部表单内容验证通过。最近又学习了Proxy的语法，故想着手写一个表单的验证工具。

调用工具的方式与需求

• 简写的验证：空值时候对应的提示 与 所填写内容验证
• 所有的验证是否通过
• 采用链式调用
• 调用以exec()为结束标志，并以promise对象返回

代码如下：

validater.birth('2018/12').email('122@qq.com').exec().then(res => {
    //如果验证出错，返回一个数组
    //[{name:"birth", tip:"请输入正确的日期"}]
    console.log(res);
});    
    //所有的验证是否通过，用于点击表单提交时的验证
console.log(validater.check())

Proxy

阮一峰老师的Proxy中讲到，Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。拿小程序中的API调用讲，wx.getSetting获取用户的当前设置，如果我们想改写返回的值，便可以使用Proxy进行“拦截”。在这里，可以将validater看成是一个对象，调用其中的birth,email...方法进行验证。

第一步：获取到指定的验证方法

<!--validater.js-->
let illegal = []; //建立一个存储 不符合验证 的数组
let reg = {};   //正则表达式
const validater = new Proxy({}, {
    get(target, property) {
        console.log(property) //birth, 获取到对应的属性
        return val => {
            return validater;
        }
    }
});
export default validater;
<!--index.js-->
import validater from "../../tools/validater.js"
validater.birth('2018/12'); 

第二步：添加不符合验证到数组

function addTip(val = '', property, tip) {
    if (val == '') {
        tip = '填写的内容不能为空';
    }
    illegal.push({
        name: property,
        tip
    });
}

第三步 匹配对应的方法

exec()结束后返回promise对象并且resolve不符合验证的数组

let illegal = [];
let reg = {};
const validater = new Proxy({}, {
    get(target, property) {
        return val => {
            switch (property) {
                case "mobile":
                    reg = new RegExp(/^1(3|4|5|7|8)\d{9}$/);
                    if (!reg.test(val)) addTip(val, property, '请输入正确的手机号码');
                    break;
                
                case "email":
                    reg = new RegExp(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/);
                    if (!reg.test(val)) addTip(val, property, '请输入正确的邮箱');
                    break;
                case "birth":
                    reg = new RegExp(/^([12]\d)?(\d\d)[\.\/\-](0?[1-9]|1[0-2])[\.\/\-](0?[1-9]|[12]\d|3[01])$/);
                    if (!reg.test(val)) addTip(val, property, '请输入正确的日期');
                    break;
                case "exec":
                    return new Promise((resolve, reject) => {
                        resolve(illegal);
                    });
                    break;
                case "check":
                    if (illegal.length != 0) return false;
                    return true;
                    break;
                default:
                    throw new TypeError(`方法${property}不存在`);
            }
            return validater;
        }
    }
});
function addTip(val = '', property, tip) {
    if (val == '') {
        tip = '填写的内容不能为空';
    }
    illegal.push({
        name: property,
        tip
    });
}
export default validater;

至此，完成了表单验证工具的开发。