客户端自定义不显眼的验证不起作用答案

【问题标题】：Client-Side Custom Unobtrusive Validation Not Working客户端自定义不显眼的验证不起作用
【发布时间】：2013-07-05 11:04:28
【问题描述】：

使用 MVC4，我创建了一个自定义验证属性，它实现了IClientValidatable 接口，如下所示：

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        ModelClientValidationRule rule = new ModelClientValidationRule();
        rule.ErrorMessage = ErrorMessages.ClientFieldInputValidation;
        rule.ValidationType = "regularexpression";
        rule.ValidationParameters.Add("pattern", _regEx);
        yield return rule;
    }

我还实现了'regularexpression'客户端脚本，如下所示：

(function($) {
    $.validator.addMethod('regularexpression', function(value, element, params) {
        var regEx = RegExp(params['pattern']);
        return regEx.test($(element).val());
    });

    $.validator.unobtrusive.adapters.addBool('regularexpression');

})(jQuery)

我遇到的问题是 正则表达式 没有在 JavaScript 的第 3 行被选中：var regEx = RegExp(params['pattern']);。因此，客户端验证无法正常工作。服务器端验证工作正常，当我点击提交时，它会返回正确的反馈。

注意：我还尝试对正则表达式进行硬编码以替换 params['pattern']，它工作正常。

谁能帮我解决这个问题，因为我对 JavaScript 的了解并不是你所说的强。

【问题讨论】：

你上一句是指Java还是JavaScript？

标签： c# jquery asp.net-mvc unobtrusive-validation

【解决方案1】：

如果您想在一个数据对象上应用多个正则表达式验证以及客户端验证，您不能使用与“regex”相同的 ValidationType 名称。您需要以某种方式使用自己的自定义唯一 ValidationType。您的 javascript 部分的问题是您为正则表达式验证器方法使用了错误的注入方法。

$.validator.unobtrusive.adapters.addBool('regularexpression');

您需要使用下面的方法而不是上面的方法，以便将您的服务器端模式值传递给客户端方法

$.validator.unobtrusive.adapters.addSingleVal("regularexpression", "pattern");

这是我的示例源...

在服务器端，创建每个自定义验证属性。

public class OneDigitAttribute : RegularExpressionAttribute, IClientValidatable
{
    public OneDigitAttribute()
        : base(@"^.*(?=.*\d).+$")
    {
        ErrorMessage = "Required at least one numeric digit";
    }

    // for supporting a client-side validation through jquery.validation.unobtrusive
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRegexRule(this.ErrorMessage, this.Pattern)
        {
            ValidationType = "onedigit"
        };
    }
}

public class OneAlphaAttribute : RegularExpressionAttribute, IClientValidatable
{
    public OneAlphaAttribute()
        : base(@"^.*(?=.*[a-zA-Z]).+$")
    {
        ErrorMessage = "Required at least one alphabet character";
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRegexRule(this.ErrorMessage, this.Pattern)
        {
            ValidationType = "onealpha"
        };
    }
}

public class OneSpecialCharacterAttribute : RegularExpressionAttribute, IClientValidatable
{
    public OneSpecialCharacterAttribute()
        : base(@"^.*(?=.*[^a-zA-Z0-9]).+$")
    {
        ErrorMessage = "Required at least one non alphabet numeric(special) character";
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRegexRule(this.ErrorMessage, this.Pattern)
        {
            ValidationType = "onespecial"
        };
    }
}

并将它们应用于同一属性

[OneDigit]
[OneAlpha]
[OneSpecialCharacter]
[DataType(DataType.Password)]
public string NewPassword { get; set; } 
...

然后，在客户端添加每个唯一的验证方法，如下所示

$.validator.addMethod("onedigit", function (value, element, regexp) {
    var re = new RegExp(regexp); return re.test(value);
});

$.validator.addMethod("onealpha", function (value, element, regexp) {
    var re = new RegExp(regexp); return re.test(value);
});
$.validator.addMethod("onespecial", function (value, element, regexp) {
    var re = new RegExp(regexp); return re.test(value);
});
jQuery.validator.unobtrusive.adapters.addSingleVal("onedigit", "pattern");
jQuery.validator.unobtrusive.adapters.addSingleVal('onealpha', "pattern");
jQuery.validator.unobtrusive.adapters.addSingleVal('onespecial', "pattern");

请确保不要将它们全部放在 DOM 就绪函数中。例如：

/* $(function() { */
$.validator.addMethod("regularexpression", function (value, element, regexp) {
    var re = new RegExp(regexp); return re.test(value);
});
$.validator.unobtrusive.adapters.addSingleVal("regularexpression", "pattern");
/* }); */

【讨论】：

感谢您提到不要将它们全部放入 DOM 就绪函数中。

【解决方案2】：

尝试更改验证类型，使其与内置的 RegEx 验证器匹配。生成 html 时，现有的 RegEx 逻辑会触发，因此您无需编写任何 javascript。

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
    ModelClientValidationRule rule = new ModelClientValidationRule();
    rule.ErrorMessage = ErrorMessages.ClientFieldInputValidation;
    rule.ValidationType = "regex";
    rule.ValidationParameters.Add("pattern", _regEx);
    yield return rule;
}

【讨论】：