jQuery验证 - 运行时更改最大值

Question

我有以下这些验证规则：

$("#ed_details").validate({
    rules: {
        tagno: { required: true },
        itemid: { required: true },
        ralno: { required: true },
        feet: { required: true, number: true, min: 0 },
        inches: { required: true, number: true, min: 0 },
        cms: { required: true, number: true, min: 0 },
        length: { required: true, number: true, max: $('#maxlength').val() },
        qty: { required: true }
    }
});

这是长度验证的字段。它只是用于测试目的的文本。一旦工作正常，它将被隐藏。

<input type="text" name="maxlength" id="maxlength" value="<?=$maxL['ml']?>" />

除非我在运行时更改maxlength的值（这可能会发生），否则它可以正常工作。用户从下拉列表中选择一个项目。每个项目都有一个可用的最大管道长度。当项目更改时，屏幕上的maxlength值确实会更改。然而，当验证运行时，我看到一个基于原始长度的错误消息（对于新项目为0，对于编辑时加载的最大长度为任意值）。

Please enter a value less than or equal to 156.

我看到即使maxlength字段显示另一个值，这个问题仍然存在。如果我在字段上使用Firebug，它会显示修改后的原始值。此外，手动更改maxlength字段而不是代码也没有任何区别。需要帮助，非常感激。

- Frank Luke

---

你能创建一个 jsFiddle 演示吗？验证发生在 onkeyup、onfocusout 和 onsubmit 上。那么错误消息会弹出吗？ - Sparky

它发生在onsubmit上，肯定会显示错误消息中的maxlength旧值。 - Frank Luke

展示一下你的代码吧，通常错误信息会显示规则的值而不是字段的值。 - Sparky

我还添加了两个答案，因为一开始我并不完全确定发生了什么。 - Sparky

在我的下面的答案中，我添加了这个实时而粗糙的演示。你可以看到我的方法是如何动态更新规则从“5”到“2”的。还有改进的余地，但这是一个“概念证明”。http://jsfiddle.net/Y565M/ - Sparky

Answer 1

您不能像这样更改规则...

length: { 
    required: true,
    number: true, 
    max: $('#maxlength').val()
},

这是因为，像大多数 jQuery 插件一样，.validate() 只被调用一次来在你的form上初始化插件...它不会重复运行，所以在.validate()内动态更改rules选项将没有任何作用。

使用rules方法来动态添加和更新规则。（与更改值的代码一起使用。）

$('#maxlength').rules("add", {
     max: $('#maxlength').val()
});

以下是这个非常简陋的“概念验证”演示（您可以重新排列）。测试表单（初始值为5）。然后单击按钮一次，值和规则（以及消息）将正确更新为“2”。

http://jsfiddle.net/Y565M/

http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules

- Sparky

---

谢谢你 - 我搜索了一个小时才找到这个解决方案，它解释了正确的答案，因为验证在初始化时加载。谢谢！！ - Michael Bellamy

Answer 2

您也可以这样做：

function ()  { return $("#maxlength").val()  }

在这种情况下：

length : {  required:  true, number: true, max: function () { return $("#maxlength").val()  }  }

- julio

---

比批准的方案更好的解决方案 - Sidra

Answer 3

也许你可以在“change”触发器中添加Sparky方法。

$('#maxlength').change(function() {
    $('#ed_details').rules('remove', 'length');
    $('#ed_details').rules('add', { length : { required: true, number: true, max: $('#maxlength').val() } });
});

- Aiska Hendra

Answer 4

你可以创建一个自定义验证器，传入输入框的选择器来提供最大值：

$.validator.addMethod("MaxFromValue", function (val, ele, arg) {
    var max = $(arg).val();
    return this.optional(ele) || !(val > max);
}, $.format("Value cannot be greater than '{0}'"));

• 这是未经测试的代码...请谨慎使用 *

- ShaneBlake