教你用一个if语句写表单校验——策略模式

这是我参与更文挑战的第11天，活动详情查看：更文挑战

策略模式

策略模式指的是定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。在我们日常开发中，只要发现某些方法的业务规则指向的目标一致，并且可以被互相替换使用，我们就可以使用策略模式来封装他们。

我们以前可以看到很多这样的代码，最长出现在表单验证的时候：

onsubmit = (formData) => {
    let { name, pwd, email } = formData;
    if(name.value === '') {
        alert('用户名不能为空');
        return false;
    }
    if(pwd.value.length < 5) {
        alert('密码不能小于5位数');
        return false;
    }
    if(emailRegexp.test(email.value)) {
        alert('请填写正确的邮箱');
        return false;
    }
}
复制代码

如果再多点表单的数值，我们每一个都需要去校验的话，我们就需要写很多的if条件，一个表单提交一大半都写成了表单校验，其实我们可以把这些都抽象出来，写成统一的方法，让其接收不同的参数的时候，根据我们需要的方式返回就可以了。其中就是策略模式的思想了。

先来创建一个验证方法validataFunc

const validataFunc = () => {
    let validator = new Validator();

    validator.add(name, 'isNonEmpty', '用户名不能为空');
    validator.add(pwd, 'minLen:5', '密码不能小于5位数');
    validator.add(email, 'isEmail', '请填写正确的邮箱');

    return validator.result();
}
复制代码

我们通过给validator中添加校验，将所有的表单数据的校验方式通过自定义的方式来进行校验。

// 先将前面的校验组合在一个对象中
const strategies = {
    isNonEmpty: (value, errmsg) => {
        if(value === '') {
            return errmsg;
        }
    },
    minLen: (value, len, errmsg) => {
        if(value.length < len) {
            return errmsg;
        }
    },
    isEmail: (value, errmsg) => {
        if(emailRegexp.test(value)) {
            return errmsg;
        }
    }
}

// 在Validator类中去匹配相应的校验方法，并把错误信息返回
class Validator {
    constructor() {
        this.cache = [];
    }

    add(value, rule, err) {
        let ary = rule.split(':');
        this.cache.push(() => {
            let strategy = ary.shift();
            ary.unshift(value);
            ary.push(err);
            return strategies[strategy].apply(value, ary);
        });
    }

    result() {
        for(let validate of this.cache) {
            let msg = validate();
            if(msg) {
                return msg
            }
        }
    }
}
复制代码

像这样，我们可以把所有基本的表单校验抽象出来，放到统一的表单校验类中去。
这样的话，我们在表单提交方法中只需要简单的调用validataFunc就可以了。

onsubmit = (formData) => {
    let errmsg = validataFunc();
    if(errmsg) {
        alert(errmsg);
        return false;
    }
    // continue
}
复制代码

并且在strategies中的许多校验方法可以复用，很方便。

至此，结束。salute