c# - 如何使用 jQuery 在运行时更改 MVC 自定义客户端验证错误消息？

Question

我正在使用 MVC5，我的 View 有一个 ViewModel，它包含一个带有以下字段的简单表单:

MinFirstNameLength
FirstName
MinLastNameLength
LastName

现在，我希望根据 MinFirstNameLength 的值对 FirstName 应用验证规则，同样地使用 LastName >最小姓氏长度。我也想在客户端执行此操作。

因此，我使用了 MVC 的不显眼的客户端验证功能。我制作了一个自定义验证属性，实现了 IClientValidatable 接口(interface)。 GetClientValidationRules 方法如下所示:

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
    string ErrorMessage = ErrorMessageString;
    ModelClientValidationRule NameMinLengthRule = new ModelClientValidationRule();
    NameMinLengthRule.ErrorMessage = ErrorMessage;
    NameMinLengthRule.ValidationType = "nameminlength";
    NameMinLengthRule.ValidationParameters.Add("minlengthpropname", MinLengthPropName);
    yield return NameMinLengthRule;
}

此验证属性应用于 FirstName 和 LastName 属性，如下所示:

[NameMinLength("FirstNameMinLength",ErrorMessage = "First Name must be at least {0} characters"]
public string FirstName { get; set; }

[NameMinLength("LastNameMinLength",ErrorMessage = "Last Name must be at least {0} characters"]
public string LastName { get; set; }

此外，我在其他地方的 .js 文件中有客户端验证函数，如下所示:

$.validator.addMethod("nameminlength",
function (
    value,
    element,
    params
) {
    return value.length >= parseInt($(params).val());
});

$.validator.unobtrusive.adapters.add("nameminlength", ["minlengthpropname"], function (options) {
    var paramField = "#" + options.params.minlengthpropname;
    options.rules["nameminlength"] = paramField;
    var errormessage = options.message;
    options.messages["nameminlength"] = errormessage;
});

我的问题是，如何将 MinFirstNameLength 文本框中的值分配给 FirstName 错误消息中的占位符 {0} >，以便错误消息显示为 First Name must be at least [value] characters?

我尝试添加修改我的 $.validator.unobtrusive.adapters.add 方法如下:

$.validator.unobtrusive.adapters.add("nameminlength", ["minlengthpropname"], function (options) {
    var paramField = "#" + options.params.minlengthpropname;
    options.rules["nameminlength"] = paramField;
    var errormessage = options.message;
    options.messages["nameminlength"] = errormessage;
    $(paramField).blur(function () {
        // change error message in the 'data-val-nameminlength' attribute of the HTML element on which validation is applied
        var newErrorMessage = options.messages["nameminlength"].replace("{0}", $(paramField).val());
        $(options.element).attr("data-val-nameminlength", newErrorMessage);
        // change error message inside the error message span generated for displaying this error
        $(options.element).siblings(".field-validation-valid").html(newErrorMessage);
    });
});

但这两个技巧都不起作用。 HTML 标记确实更改以适本地修改错误，但此更改未反射(reflect)在页面中。

目前，我看到的错误信息是:

名字必须至少为#FirstNameMinLength 个字符

占位符会自动替换为在验证规则中用作参数的控件 ID。

此错误消息从何而来？如何在运行时修改它？

Answer 1

我认为您应该在您的 NameMinLength 验证属性的 IsValid 方法中在服务器端格式化您的消息。这是一个关于如何做到这一点的小例子。

protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{

    var conditionalPropertyInfo = validationContext.ObjectType.GetProperty(this.MinLengthPropName);
    var conditionalPropertyValue = conditionalPropertyInfo.GetValue(validationContext.ObjectInstance, null);
    this.ErrorMessage = string.Format(this.ErrorMessage, conditionalPropertyValue.ToString())
    // YOUR OTHER CODE HERE
}

这应该用 MinLengthPropName 属性的正确值替换占位符。在这种情况下，错误消息将在将其移动到客户端之前进行格式化。因此不需要额外的逻辑。

编辑:嗯，只是觉得您可能想要根据用户输入进行验证，这真的很奇怪。实际上，您可能对同一字段有不同的最小长度限制这一事实对我来说没有意义，但只要它不是基于用户输入，它就更安全。

已更新客户端解决方案:
我用类似的属性做了一个简单的测试，它对我有用

编辑模型:

[MinCustomLength("MinLenthDestURI", "Dest URI must be at least {0} characters")]
public string DestinationURI { get; set; }
public int MinLenthDestURI { get; set; }

属性代码:

public class MinCustomLengthAttribute : ValidationAttribute, IClientValidatable
{
    private String PropertyName { get; set; }

    public MinCustomLengthAttribute(String propertyName, String errormessage)
    {     
       this.PropertyName = propertyName;
       this.ErrorMessage = errormessage;
    }

    protected override ValidationResult IsValid(object value, ValidationContext context)
    {
       // Just for test server side validation always returns Success
       return ValidationResult.Success;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
       var modelClientValidationRule = new ModelClientValidationRule
       {
          ValidationType = "mincustomlength",
          ErrorMessage = this.ErrorMessage
       };
       modelClientValidationRule.ValidationParameters.Add("prop", PropertyName);
       yield return modelClientValidationRule;
    }
}

客户端代码:

$.validator.addMethod("mincustomlength", function (value, element, params) {
    var conditionalId = $.validator.getId(element, params.prop);

    var minLength = parseInt($("#" + conditionalId).val());
    if (value.length < minLength) {
        var message = $(element).attr('data-val-mincustomlength');
        $.validator.messages.mincustomlength = $.format(message, minLength);
        return false;
    }

    return true;

});

$.validator.unobtrusive.adapters.add('mincustomlength', ['prop'], function (options) {
    options.rules['mincustomlength'] = options.params;
    if (options.message != null) {
        $.validator.messages.mincustomlength = options.message;
    }
});

验证完成后，这会将 {0} 替换为 MinLenthDestURI 文本框中的值。

希望对您有所帮助!