校验表单的多种规则

javascript">// checkInfo.js 校验表单的文件
// 策略对象
const strategies = {
    // 输入的内容不能为空
    isNoEmpty(value, errorMsg) {
        if (value === '') return errorMsg;
    },
    // 校验姓名的格式
    isCorrectName(value, errorMsg) {
        const regName = /^(?!.*?[\u3000-\u303F\u4DC0-\u4DFF\u2800-\u28FF\u3200-\u32FF\u3300-\u33FF\u2700-\u27BF\u2600-\u26FF\uFE10-\uFE1F\uFE30-\uFE4F])[\u4e00-\u9fbb\u2E80-\uFE4F.·]+$/;
        if (!regName.test(value)) return errorMsg;
    },
    // 校验手机号码
    isCorrectPhone(value, errorMsg) {
        const regPhone = /^1[3456789]\d{9}$/;
        if (!regPhone.test(value)) return errorMsg;
    },
    // 校验身份证
    isCorrectIdCard(value, errorMsg) {
        const isCorrectIdCard = checkIdCard(value);
        if (!isCorrectIdCard) return errorMsg;
    },
    // 限制小长度
    minLength(value, length, errorMsg) {
        if (value.length < length) return errorMsg;
    },
};

// 校验身份证
function checkIdCard(code) {
    if (code.length === 18) {
        code = code.split('');
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
        // 校验位
        const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
        let sum = 0;
        let ai = 0;
        let wi = 0;
        for (let i = 0; i < 17; i++) {
            ai = code[i];
            wi = factor[i];
            sum += ai * wi;
        }
        return parity[sum % 11] == code[17];
    } return code.length === 15;
}
// Validator（验证器）的类
function Validator() {
    this.cache = []; // 效验规则数组
    // 添加校验规则的方法
    // value 接收变单输入的值
    // rules 接受规则的数组
    this.add = function (value, rules) {
        const that = this;
        rules.forEach((item) => {
            const { strategy, errorMsg } = item; // 规则列表的战略与错误提示
            let ary = strategy.split(':'); // 将获取到的strategy(战略，例：minLength：6)分开
            that.cache.push(() => {
            	// 移除并拿到该数组的第一项，用于使用策略对象的方法
                const strategyFun = ary.shift(); 
                ary.unshift(value); // 将value添加到数组的第一项
                ary.push(errorMsg); // 添加到数组的最后一项
                return strategies[strategyFun](...ary); // 将数组作为对应的参数传递给策略对象的方法中
            });
        });
    };
    // 调用检验规则 - 获得校验的方法
    this.start = function () {
        for (let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
            const msg = validatorFunc();
            if (msg) return msg;
        }
    };
};

标题客户端的使用，导入该文件进入验证方法的使用

javascript">// 姓名的校验规则数组
const nameRule = [{
	strategy: 'isNoEmpty',
	errorMsg: '请输入真实姓名！',
}, {
	strategy: 'isCorrectName',
	errorMsg: '姓名格式填写有误！',
}];
// 身份证
const idCardRule = [{
	strategy: 'isNoEmpty',
	errorMsg: '请输入身份证号码！',
}, {
	strategy: 'isCorrectIdCard',
	errorMsg: '身份证格式填写有误！',
}];
// 手机号码
const phoneRule = [{
	strategy: 'isNoEmpty',
	errorMsg: '请输入手机号码！',
}, {
	strategy: 'isCorrectPhone',
	errorMsg: '手机号码的填写有误！',
}];
// 验证码
const codeRule = [{
	strategy: 'isNoEmpty',
	errorMsg: '请输入验证码！',
}, {
	strategy: 'minLength:6',
	errorMsg: '验证码的填写有误！',
}];
// 定义校验基本信息
function checkInfo(name, idCard, phone, code) {
    const validator = new Validator(); // 创建一个validator对象
    validator.add(name, nameRule); // 添加校验规则
    validator.add(idCard, idCardRule);
    validator.add(phone, phoneRule);
	validator.add(code, codeRule);
	return validator.start(); // 返回校验的errorMsg结果
};
// 提交表单
this.$('#submit_btn').click(() => {
	const name = $('#input_name').val(); // 获取到表单输入框的值
	const idCard= $('#input_idCard').val();
	const phone = $('#input_phone').val();
	const code= $('#input_code').val();
	const errorMsg = checkInfo(name, idCard, phone, code);
	if (errorMsg) {
		// showToast(errorMsg, true); // 验证错误的提示窗
	 	return false;
	}
	// 提交的接口访问....
});

参考书籍《JavaScript设计模式与开发实践》