如何扩展DataAnnotation属性并进行客户端验证?

时间:2019-07-17 15:47:23

标签: asp.net-core-mvc model-binding unobtrusive-validation

在模型的很多地方,我都有一个属性public int CarrotLength {get; set;},我想在其上放置一个[Range(5, 100)]属性。

不必为每个CarrotLength属性都指定数百万次,因为胡萝卜的长度可能会改变,所以改为使用[CarrotLength]属性是有意义的,因此我可以更改值5和一处10个。

我做了一个public class CarrotLengthAttribute : RangeAttribute,并用5、100调用了基类。但是,客户端的简洁Java验证不会触发。

有没有办法使它起作用?可能我需要以某种方式注册属性吗?

我的Javascript验证功能适用于普通属性以及我创建的自定义属性。

如果不可能的话,我只是将值定义为常量并将其引用为[Range(MYCONSTS.CARROTLENGTHMIN...)],但我认为拥有自定义属性会更好。

1 个答案:

答案 0 :(得分:0)

尝试自定义继承自ValidationAttributeIClientModelValidator的属性类,如下所示:

public class AgeRangeAttribute: ValidationAttribute , IClientModelValidator
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var  age = Convert.ToInt32(value.ToString());

        if (age<5||age>100)
        {
            return new ValidationResult(GetErrorMessage());
        }
        return ValidationResult.Success;
    }
    public string GetErrorMessage()
    {
        return $"Age must be between 5 and 100.";
    }

    public void AddValidation(ClientModelValidationContext context)
    {
        context.Attributes.Add("data-val", "true");
        context.Attributes.Add("data-val-age", GetErrorMessage());
    }
}

将名为AgeValidate.js的新JavaScript文件添加到wwwroot文件夹"/lib/jquery-validation-unobtrusive/AgeValidate.js"中:

jQuery.validator.addMethod("age",
function (value, element, param) {

    if (value < 5 || value > 100) {
        return false;
    }
    else {
        return true;
    }
});
jQuery.validator.unobtrusive.adapters.addBool("age");

上面的代码为jQuery验证库添加了一个方法。它使用addMethod()方法来指定我们自己的验证功能。验证功能接收在年龄文本框中输入的值。然后执行验证并返回布尔值。

在_ValidationScriptsPartial.cshtml中引用AgeValidate.js

<environment include="Development">
   <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
   <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"> 
   </script>
   <script src="~/lib/jquery-validation-unobtrusive/AgeValidate.js"></script>
</environment>

在您的视图中添加以下代码

@section Scripts {
   @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

有关自定义客户端验证的更多详细信息,您可以参考官方文档:https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-2.2#custom-client-side-validation