jQuery Validation addMethod实现出生日期动态自定义错误提示方案

解决方案 #

你之前的方案失效是因为addMethod的第三个参数（错误提示文本）是在规则初始化阶段就固定赋值的，后续修改全局err变量不会更新已经初始化完成的规则配置。你可以通过将错误提示配置改为动态取值的函数实现需求，以下是可直接运行的修改后代码：

jQuery.validator.addMethod("validDOB", function(value, element) {
    let errorMsg = '';
    if (value.trim() !== "") {
        // 校验日期格式合法性
        if (!moment(value,"DD-MM-YYYY",true).isValid()) {
            errorMsg = "请输入合法的日期格式（dd-mm-yyyy）！";
            // 如需保留英文提示可替换为：errorMsg = "Please enter a valid date (dd-mm-yyyy)!";
        } else {
            const birthDate = moment(value, "DD-MM-YYYY");
            const years = moment().diff(birthDate, 'years');
            // 校验年龄范围
            if (years < 1) {
                errorMsg = "年龄不能小于1岁";
                // 如需保留英文提示可替换为：errorMsg = "You seem a little young";
            } else if (years > 110) {
                errorMsg = "年龄不能大于110岁";
                // 如需保留英文提示可替换为：errorMsg = "You seem a little old";
            }
        }
    }
    // 存在错误则将提示存入当前元素的自定义数据属性，返回校验失败
    if (errorMsg) {
        $(element).data('dobError', errorMsg);
        return false;
    }
    return true;
}, function(params, element) {
    // 动态读取当前元素存储的错误提示
    return $(element).data('dobError');
});

function setupValidation() {   
    registerValidator = $("#UserReg").validate({
        rules: {
            txtRegUserDOB: {
                validDOB: true
            }
        }
    });
}

setupValidation();

方案说明 #

• 错误提示配置改为函数类型后，每次校验失败时都会重新执行该函数获取最新的提示文本，不会被初始化逻辑固定
• 错误信息存放在当前校验元素的data属性中，就算多个页面元素复用这个校验规则也不会出现提示串扰的问题
• 去掉了冗余的try/catch逻辑，直接通过条件判断赋值错误信息，性能和可读性更好

内容的提问来源于stack exchange，提问作者StripyTiger