利用es6的proxy来处理表单数据验证

2020-05-16

function validator(target, validatior){
    return new Proxy(target, {
        _validator: validator,
        set(target, key, value, proxy){
            if(target.hasOwnProperty(key)){
                let va = this._validator[key];
                if(!!va(value)){
                    return Reflect.set(target, key, value, proxy)
                }else {
                    throw Error(`不能设置${key}到${value}`)
                }
            }else{
                throw Error(`${key} 不存在`)
            }
        }
    })
}

const personValidators = {
    name(val){
        return typeof val === 'string'
    },
    age(val){
        return typeof val === 'number' && val > 18
    }
}

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
        return validator(this, personValidators)
    }
}

const person = new Person('lilei', 30);


person.name = 48;

这样用proxy来代理对象，并且结合类的使用，可以使得代码的灵活性更高。比如新增一个电话号码的验证，就可以直接修改personValidators的规则。