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

时间:2016-01-20 04:59:10

标签: asp.net-mvc-5 unobtrusive-validation client-side-validation

我一直在尝试MVC 5的自定义客户端验证(MVC的GetClientValidationRules和jQuery的验证器)。我已经能够成功实现验证器来检查用户是否选择了过去的日期。但是,如果我需要检查用户的文本框输入是否大于另一个文本框的输入呢?

我没有不显眼的验证/服务器端,但没有 不引人注目的验证。

这是一个例子。

模型

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

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

2 个答案:

答案 0 :(得分:1)

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

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.")]

然后我使用自定义客户端验证规则 CustomClientValidation.js 制作了我自己的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;
});

答案 1 :(得分:0)

jQuery Validation可以实现。您可以创建自定义规则,以检查您想要的任何内容。看看这个:

$.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
        }
    }
});