c# - ASP.NET Core 2.0 如何在自定义验证属性中进行客户端验证？

Question

在这里，我尝试在模型类 contact 的 Age 属性中同时进行客户端和服务器端验证，为此我使用了自定义验证属性，即 Digt 和 UpperCase 属性用于检查输入中的大写和数字，如果不是，则应按照验证属性中指定的方式给出错误消息。
现在的问题是，在点击提交按钮时，验证消息按要求显示，但在点击提交按钮之前，即使不满足输入条件，也不会显示错误消息。

非常感谢任何帮助。谢谢

下面是我的数字和大写自定义验证属性
大写属性

public class UpperCaseAttribute : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            string suppliedValue = (string)value;
            var hasUpperChar = new Regex(@"[A-Z]+");
            var match = hasUpperChar.IsMatch(suppliedValue);
            if (match == false)
            {
                return new ValidationResult("Input Should Have Uppercase ");
            }
        }
        return ValidationResult.Success;
    }
}

数字属性

public class DigitAttribute : ValidationAttribute
{ 
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            string suppliedValue = (string)value;
            var hasNumber = new Regex(@"[0-9]+");
            var match = hasNumber.IsMatch(suppliedValue);
            if(match == false)
            {
                return new ValidationResult("Input Should Have Number");
            }
        }
        return ValidationResult.Success;
    }
}

下面是我的联系人模型类的元数据
联系人元数据

public class ContactMetadata
{
    public int Id { get; set; }
    [Required(ErrorMessage = "Age is Required")]
    [UpperCase]
    [Digit]
    public string Age { get; set; }
}

以下是我的看法创建 View

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
<div class="row">
<div class="col-md-4">
    <form asp-action="Create">
        <div class="form-group">
            <label asp-for="Age" class="control-label"></label>
            <input asp-for="Age" class="form-control" />
            <span asp-validation-for="Age" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </form>
</div>
</div>

Answer 1

您的验证属性必须实现 IClientModelValidator 并且您还必须在客户端编写自己的验证逻辑:

public class UpperCaseAttribute: System.ComponentModel.DataAnnotations.ValidationAttribute, IClientModelValidator
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            string suppliedValue = (string)value;
            var hasUpperChar = new Regex(@"[A-Z]+");
            var match = hasUpperChar.IsMatch(suppliedValue);
            if (match == false)
            {
                return new ValidationResult("Input Should Have Uppercase ");
            }
        }
        return ValidationResult.Success;
    }

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

        AttributeUtils.MergeAttribute(context.Attributes, "data-val", "true");
        AttributeUtils.MergeAttribute(context.Attributes, "data-val-uppercase", FormatErrorMessage(context.ModelMetadata.GetDisplayName()));
    }
}

public class AttributeUtils
{
    public static bool MergeAttribute(
        IDictionary<string, string> attributes,
        string key,
        string value)
    {
        if (attributes.ContainsKey(key))
        {
            return false;
        }
        attributes.Add(key, value);
        return true;
    }
}

您必须在 html 中包含 jquery.validate.min.js 和 jquery.validate.unobtrusive.min.js。然后在内容加载完成后添加相应的规则和函数如下:

$.validator.addMethod("uppercase",
    function (value, element, params) {
        return value === value.toUpperCase();
    });

$.validator.unobtrusive.adapters.add("uppercase",
    params,
    function (options) {
        options.rules[index] = options.params;
        options.messages[index] = options.message;
    });