JavaScript动态修改data-val-range规则后未即时触发验证问题

核心问题点 #

• 校验触发方式错误：你调用的$(id).change()仅会在输入框值发生变更时触发校验逻辑，你仅修改了校验规则、未改动输入框值的场景下，change事件不会触发校验流程，需主动调用校验方法。
• 范围参数类型错误：通过attr()读取的data-val-range-min、data-val-range-max是字符串类型，jQuery Validate的range规则要求传入数字类型，字符串会导致范围比对异常。

修复方案 #

1. 修改触发校验的逻辑 #

将$(id).change()替换为$(id).valid()，valid()方法会主动触发对应字段的即时校验，无需依赖值变更或失焦事件。

2. 修正addRules中range参数的类型转换 #

读取范围值时强制转为数字类型：

let addRules = function addRules(field) {
    let $field = $(field);
    
    if ($field.attr("data-val-required")) {
        $field.rules("add", {
            required: true,
            messages: {
                required: $field.attr("data-val-required")
            }
        });
    }
    
    if ($field.attr("data-val-number")) {
        $field.rules("add", {
            number: true,
            messages: {
                number: $field.attr("data-val-number")
            }
        });
    }

    if ($field.attr("data-val-range")) {
        // 强制转为数字类型
        const min = Number($field.attr("data-val-range-min"));
        const max = Number($field.attr("data-val-range-max"));
        $field.rules("add", {
            range: [min, max],
            messages: {
                range: $field.attr("data-val-range")
            }
        });
    }
}

3. 调整后的规则更新逻辑 #

const id = '#myId';
$(id).attr("data-val-range-min", -10000);
removeRules(id);
addRules(id);
$(id).valid(); // 主动触发即时校验

可选优化 #

如果不需要全量删除规则再新增，也可以直接调用rules('add')覆盖已有的range规则，减少不必要的操作：

const id = '#myId';
const newMin = -10000;
$(id).attr("data-val-range-min", newMin);
$(id).rules('add', {
    range: [newMin, Number($(id).attr("data-val-range-max"))],
    messages: {
        range: $(id).attr("data-val-range")
    }
});
$(id).valid();

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