asp.net-mvc-4 - 动态更改 jQuery 不显眼的验证属性

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}">

这通过消息 Please enter an amount between $1 and $350 正确验证如果输入的数字大于 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">