Question

我有一个在ASP.NET MVC 4中构建的页面，它使用jquery.validate.unobtrusive库进行客户端验证。有一个输入需要在一个数字范围内。但是，此范围可以根据用户与表单其他部分的交互动态更改。

默认值验证很好，但是在更新data-rule-range属性后，仍会在原始值上触发验证和消息。

以下是初始页面加载的输入：

<input id="amount" data-rule-range="[1,350]" data-msg-range="Please enter an amount between ${0} and ${1}">

如果输入的数字大于350，则会正确验证消息Please enter an amount between $1 and $350。

在其他地方发生事件后，data-rule-range会更新，元素看起来如此：

<input id="amount" data-rule-range="[1,600]" data-msg-range="Please enter an amount between ${0} and ${1}">

此时如果在输入中输入500，它将无法通过相同的先前消息进行验证，表明它必须介于$ 1和$ 350之间。我也尝试从表单中删除验证器和unobtrusiveValidation并再次解析它而没有运气。

$('form').removeData('validator');
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

是否有一种干净的方法可以动态地根据输入属性更改验证行为？

Answer 1

正如Sparky所指出的那样，在初始化验证插件后，不会动态更改默认属性。为了最好地解决这个问题而不重新编写我们如何注册经过验证的字段和规则，我发现在不显眼的库中注册自定义适配器最简单：

jQuery.validator.unobtrusive.adapters.add("amount", {}, function (options) {
  options.rules["amount"] = true;
  options.messages["amount"] = function () { return $(options.element).attr('data-val-amount'); };
});

jQuery.validator.addMethod("amount", function (val, el, params) {    
  try {
    var max = $(el).attr('data-amount-max');
    var min = $(el).attr('data-amount-min');
    return val <= max && val >= min;
  } catch (e) {
    console.log("Attribute data-amount-max or data-amount-min missing from input");
    return false;
  }
});

由于消息是一个函数，因此每次都会对其进行评估，并始终为data-val-amount选取最新的属性值。此解决方案的缺点是每次发生更改时我们都需要更改输入中的所有三个属性：data-amount-min，data-amount-max和data-val-amount。

最后这里是初始加载时的输入标记。需要在加载时出现的唯一属性是data-val-amount。

<input id="amount" data-val-amount="Please enter an amount between ${0} and ${1}" data-val="true">

Answer 2

您无法通过更改数据属性来动态更改规则。这是因为jQuery Validate插件在页面加载时使用现有的attributes初始化...在对属性进行动态更改后，插件无法自动重新初始化。

您必须使用开发者提供的.rules('add')和.rules('remove')方法。

请参阅：http://jqueryvalidation.org/rules/

Answer 3

你可以尝试这个：

// reset the form's validator
$("form").removeData("validator");

// change the range
$("#amount").attr("data-rule-range", "[1,600]");

// reapply the form's validator
$.validator.unobtrusive.parse(document);

Answer 4

查理的解决方案有效！你不能有模型属性来使用它，我建立我的输入，如：

      @Html.TextBoxFor(m => Model.EnterValue, new
           {
               @class = "form-control",
               id="xxxx"
               data_val = "true",
               data_val_range = String.Format(Messages.ValueTooBig, Model.ParamName),
               data_val_range_max = 6,
               data_val_range_min = 2,
               data_val_regex_pattern = "^\\d+(,\\d{1,2})?$"
           })

然后在javascript中：

 $("form").removeData("validator");
        $("#xxxx").attr('data-val-range-max', 3)
        $("#xxxx").attr('data-val-range-min', 0)
        $.validator.unobtrusive.parse(document);

动态更改jQuery不显眼的验证属性

4 个答案: