使用 IClientModelValidator 在 ASP.NET Core 中使用参数自定义客户端验证属性

Posted 2023-04-13

【中文标题】使用 IClientModelValidator 在 ASP.NET Core 中使用参数自定义客户端验证属性

【英文标题】：Custom client side validation attribute with parameter in ASP.NET Core using IClientModelValidator

【发布时间】：2019-04-01 19:00:44

【问题描述】：

我正在尝试创建自己的客户端验证属性，该属性将在提交时验证表单的属性。我一直在参考以下 Microsoft 文档：https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-2.1#custom-validation。

我不确定如何将验证规则添加到 jQuery 的验证器对象。这是我已经走了多远：

我的ValidationAttribute如下

public class CannotEqualValue : ValidationAttribute, IClientModelValidator

    private readonly string _value;

    public CannotEqualValue(string value)
    
        _value = value;
    

    public void AddValidation(ClientModelValidationContext context)
    
        if (context == null)
            throw new ArgumentNullException(nameof(context));

        MergeAttribute(context.Attributes, "data-val", "true");
        MergeAttribute(
            context.Attributes, "data-val-cannotbevalue", GetErrorMessage()); //???
        MergeAttribute(
            context.Attributes, "data-val-cannotbevalue-value", _value);      //???
    

    protected override ValidationResult IsValid(
        object value, 
        ValidationContext validationContext)
    
        var category = (Category) validationContext.ObjectInstance;

        if (category.Name == _value)
            return new ValidationResult(GetErrorMessage());

        return ValidationResult.Success;
    

    private bool MergeAttribute(
        IDictionary<string, string> attributes, 
        string key, 
        string value)
    
        if (attributes.ContainsKey(key)) return false;

        attributes.Add(key, value);
        return true;
    

    private string GetErrorMessage()
    
        return $"Name cannot be _value.";
    

ValidationAttribute 用在这样的模型中

public class Category

    [Key]
    public int Id  get; set; 

    [Required(ErrorMessage = "Name is required and must not be empty.")]
    [StringLength(200, ErrorMessage = "Name must not exceed 200 characters.")]
    [CannotEqualValue("Red")]
    public string Name  get; set; 

我在我的页面中同时引用了 jQuery 验证和不显眼。

我不确定如何将规则添加到 jQuery 的验证器对象：

$.validator.addMethod("cannotbevalue",
    function(value, element, parameters) 
        //???
    );

$.validator.unobtrusive.adapters.add("cannotbevalue",
    [],
    function(options) 
        //???
    );

【参考方案1】：

AddValidation() 方法中的 MergeAttribute(..) 代码行是正确的，并将添加 data-val-* 属性以进行客户端验证。

你的脚本需要

$.validator.addMethod("cannotbevalue", function(value, element, params) 
    if ($(element).val() == params.targetvalue) 
        return false;
    
    return true;
);

$.validator.unobtrusive.adapters.add('cannotbevalue', ['value'], function(options) 
    options.rules['cannotbevalue'] =  targetvalue: options.params.value ;
    options.messages['cannotbevalue'] = options.message;
);

【讨论】：

添加了 data-val 属性，但是验证仍然没有触发：

脚本工作得很好（我已经测试过了——如果你输入“红色”并标记出一个验证消息将显示在你的@html.ValidationMessageFor(m => m.Category.Name)占位符中（或者标签助手，如果你使用它)

为什么要更改id 属性（尽管它无关紧要）。使用浏览器工具调试脚本。我假设您已包含 jquery.validate.js 和 juuery.validate.unobtrusive.js 并且脚本的顺序正确？

这里有一个DotNetFiddle 来证明这一点。在文本框中输入“红色”并跳出 - 显示验证消息

这是 jquery.validate.unobtrusive.js` 在解析 html 以读取 data-val-* 属性并将规则添加到 $.validator 时的工作方式（如果你把它放在 $(document).ready() 它的太晚了，没有添加规则）