如何动态设置jQuery Validation Engine的金额最小值校验规则

我来帮你搞定这个动态校验的需求，核心思路是在单选按钮切换时，实时修改金额输入框的校验规则并刷新Validation Engine，具体步骤和代码如下：

1. 完整实现代码 #

先把你的原有逻辑和动态校验逻辑整合起来，假设你的表单id是donation-form：

jQuery(document).ready(function($) {
    // 第一步：初始化表单的Validation Engine
    $("#donation-form").validationEngine();

    // 处理id1单选按钮的点击事件
    $('#id1').click(function(){
        const minAmount = 50;
        // 设置金额输入框的默认值
        $('#amount').val(minAmount);
        // 动态更新校验规则：把min参数替换成当前选中的最小金额
        $('#amount').attr('data-validation-engine', `validate[required,custom[integer],min[${minAmount}]]`);
        // 刷新校验引擎，让新规则立即生效
        $("#donation-form").validationEngine('updatePrompts');
    });

    // 处理id2单选按钮的点击事件
    $('#id2').click(function(){
        const minAmount = 17;
        $('#amount').val(minAmount);
        $('#amount').attr('data-validation-engine', `validate[required,custom[integer],min[${minAmount}]]`);
        $("#donation-form").validationEngine('updatePrompts');
    });

    // 页面加载时的初始规则（对应默认选中的单选按钮，比如默认选id1）
    const defaultMin = 50;
    $('#amount').attr('data-validation-engine', `validate[required,custom[integer],min[${defaultMin}]]`);
});

2. 关键逻辑说明 #

• 动态修改规则：Validation Engine的校验规则是通过输入框的data-validation-engine属性定义的，我们用attr()方法实时替换其中的min[xx]参数值
• 刷新校验状态：修改规则后必须调用validationEngine('updatePrompts')，让引擎重新读取新规则，否则旧规则还会生效
• 初始状态处理：页面加载时要给金额输入框设置默认规则，对应页面默认选中的单选按钮值，避免初始状态校验失效

3. 效果验证 #

• 点击id1单选按钮：金额框自动填入50，此时输入小于50的整数会触发校验错误
• 点击id2单选按钮：金额框自动填入17，校验规则自动切换为不能小于17
• 用户可以手动输入比当前推荐值更大的金额，不会触发校验错误

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