JavaScript：动态更改数据范围规则的值

Posted 2023-05-07

【中文标题】JavaScript：动态更改数据范围规则的值

【英文标题】：JavaScript: dynamically changing values of data range rule

【发布时间】：2021-11-03 07:32:33

【问题描述】：

我有一个输入字段，它允许负数和正数，或仅基于选择值的正数。

在更改选择选项的值时，我正在尝试修改输入字段的规则，如下所示：

const id = '#myId';
$(id).attr("data-val-range-min", -10000);
removeRules(id);
addRules(id);
$(id).change(); // trying to trigger the validation of the rule

removeRules 是一个函数：

let removeRules = function removeRules(field) 
    $(field).rules('remove');

addRules 也是如此：

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")) 
        $field.rules("add", 
            range: [$field.attr("data-val-range-min"), $field.attr("data-val-range-max")],
                messages: 
                    range: $field.attr("data-val-range")
            
        );
    

当我在 UI 中更改选择时，data-val-range-min 属性设置正确，但没有重新应用规则。

仅当我手动单击输入字段并再次取消选择时，才会应用规则...

我在这里做错了什么？

提前致谢

【参考方案1】：

只有当我手动单击输入字段并再次取消选择时，才会应用规则...

有一个您期望的验证触发器不是插件的一部分。

默认情况下，此插件会在以下位置触发验证：

onfocusout - 当你离开一个元素时 onkeyup - 当您在文本框中输入时 onclick - 与收音机、复选框和选择的交互

虽然添加和删除规则是不够的......您还需要在添加或删除规则后强制进行验证测试。

当您想以编程方式强制验证时，只需在元素或表单上调用 .valid() 方法即可。由于您的 OP 包含零 html 标记或工作演示，因此我无法更具体地提供解决方案。