基于另一个文本框输入实现自定义客户端验证

Question

我一直在涉足 MVC 5 的自定义客户端验证（MVC 的 GetClientValidationRules 和 jQuery 的验证器）。我已经能够成功地实现一个验证器来检查用户是否选择了过去的日期。但是，如果我需要检查用户的文本框输入是否大于他们的另一个文本框输入怎么办？

我在没有不显眼的 validation/server-side 的情况下工作正常，但没有显眼的验证。

举个例子。

型号

public Nullable<int> ItemsPurchased
public Nullable<int> ItemsReturned

已为 ItemsReturned 创建自定义 DataAnnotation，以检查其值是否 <= ItemsPurchased。实现 GetClientValidationRules 以实际获取 ItemsPurchased 的当前值是我在代码中遇到问题的地方。

Answer 1

可以通过 jQuery 验证。您可以创建自定义规则来检查您想要的任何内容。看看这个：

$.validator.addMethod('name_of_the_rule', function (value, element, param) {
    //put there your validation

    return isValid; // return bool here if valid or not.
}, 'Put here your error message!');


$('#form').validate({
    rules: {
        field1: {
            yourRuleName: true
        }
    }
});

Answer 2

我的自定义数据注释中有一个变量。我不确定为什么这不是我自然而然想到的...但这是我的解决方案。

DataAnnotation（应用于 ItemsReturned）

public string purchasedQuantityField { get; set; }
public ReturnedAttribute(string quantity) {
    purchasedQuantityField = quantity;
}
...
(in GetClientValidationRules)
ModelClientvalidationRule purchaseRule = new ModelClientValidationRule();
purchaseRule.ValidationType = "purchaserestriction";
purchaseRule.ErrorMessage = ErrorMessageString;
purchaseRule.ValidationParameters["otherfield"] = purchasedQuantityField;

模型中的用法：

[Returned("ItemsPurchased", ErrorMessage = "Returned Items cannot be greater than the number of Items Purchased.")]

然后我用自定义客户端验证规则制作了自己的 JS 文件，CustomClientValidation.js:

jQuery.validator.addMethod("purchaserestriction", function (value, element, params) {
    var purchasedFieldVal = $('input[name="' + params.otherfield + '"]').val();
    if (purchasedFieldVal && value) {
        var returnedVal = parseInt(value);
        var purchasedVal = parseInt(purchasedFieldVal);
        if (returnedVal <= purchasedVal) return true;
        else return false;
    }
);
jQuery.validator.unobtrusive.adapters.add("purchaserestriction", ["otherfield"], function (options) {
    options.rules["purchaserestriction"] = options.params;
    if (options.message) options.messages["purchaserestriction"] = options.message;
});

基于另一个文本框输入实现自定义客户端验证

Implementing custom client validation based off of another textbox input

client-side-validation

unobtrusive-validation

asp.net-mvc-5