ASP.NET MVC 3 客户端验证(带参数)

ASP.NET MVC 3 client-side validation with parameters

提问人:ricardo 提问时间:1/25/2011 最后编辑:Communityricardo 更新时间:12/8/2022 访问量:33151

问:

继这篇文章之后,对自定义属性执行客户端验证

我正在尝试了解如何做到这一点,将其他参数传递给客户端脚本

据我了解,到目前为止,要使用 MVC 3 实现自定义验证,需要以下内容

创建自定义验证属性

基于 ValidationAttribute 并实现 IClientValidatable。我还看到了一些派生自 ModelValidator 的示例,它似乎实现了 ValidationAttribute 和 IClientValidatable 的功能。所以这是我对差异是什么或 ModelValidator 是否在 MVC 2 中使用但现在被弃用的第一个困惑点?

必须从 GetClientValidationRules() 返回 ModelClientValidationRule 的实例,以指定错误消息、ValidationType(我理解它是将执行客户端验证的 Javascript 函数的名称)以及该属性可能具有的任何其他自定义参数,以及需要传递给 Javascript 验证的任何其他自定义参数。

我假设运行时(不确定它的哪一部分)然后使用 the 在标记元素中生成 html 属性,如下所示:ModelClientValidationRule

data-val="true"  (to indicate that the element requires validation)
data-val-[ValidationType]=[ErrorMessage]
data-val-[ValidationType].[ValidationParameters(n).Key]=[ValidationParameters(n).Value]

实现客户端验证逻辑

必须使用 jQuery.validators.addmethod() 创建一个 Javascript 函数并将其添加到 jQuery.validators 中,以便 JQuery 在需要执行时知道它。像这样:

jQuery.validator.addMethod(
    'greaterThan', 
    function (value, element, params) {
        /.../
       return /* true or false   */ ; 
    },
    ''
); 

我在这里的问题是签名“函数(值、元素、参数)”是否是处理验证的方法的标准,我假设它将在适当的时间被一些 jQuery 功能调用,例如在提交表单之前或当元素丢失时或在 keyUp 事件上。我只是不明白你如何控制这一点,即选择哪个事件适合你的自定义验证。

实现不显眼的适配器

这将不显眼的属性转化为;我不是很清楚,但假设它是一个 jQuery 规则,但我不清楚它们是如何工作的。类似的东西

jQuery.validator.unobtrusive.adapters.add(
    'futuredate', 
    { },
    function (options) {
        options.rules['greaterThan'] = true;
        options.messages['greaterThan'] = options.message;
    }
); 

我在这里的问题是关于“功能(选项)”。这是将在“函数(值、元素、参数)”之前调用的函数,并负责将不显眼的标签提取到jQuery.Validation可以理解的数据结构中。从代码示例来看,在我看来,options 是一个对象,它同时包含标记中的属性值(例如 options.message)和它必须映射到的 jQuery 相关属性(例如 options.messages['ClientSideValidationFunctionName']。如果是这样,如何检索和映射自定义参数。

我希望我没有增加任何额外的混乱。

验证 asp.net-mvc-3 参数

评论

1赞 Rich 1/25/2011
不显眼的验证意味着在元素上添加 HTML 属性,例如 data-max-value=“5”,正文内容之外的 javascript 会查找这些属性并执行验证,而不是直接在 HTML 元素上添加 javascript。

答:

70赞 Darin Dimitrov 1/25/2011 #1

可以使用 ValidationParameters 属性向规则添加自定义参数:

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
    var rule = new ModelClientValidationRule
    {
        ErrorMessage = this.ErrorMessage,
        ValidationType = "futuredate",
    };
    rule.ValidationParameters.Add("param1", "value1");
    rule.ValidationParameters.Add("param2", "value2");
    yield return rule;
}

可以在适配器中使用:

jQuery.validator.unobtrusive.adapters.add(
    'futuredate', 
    [ 'param1', 'param2' ],
    function (options) {
        var param1 = options.params.param1; // shall equal 'value1'
        var param2 = options.params.param2; // shall equal 'value2'
        // TODO: use those custom parameters to define the client rules
    }
);

更新:

按照注释部分的要求,以下是将这些参数传递给自定义验证器规则函数的方法:

jQuery.validator.unobtrusive.adapters.add(
    'futuredate', 
    [ 'param1', 'param2' ],
    function (options) {
        // simply pass the options.params here
        options.rules['greaterThan'] = options.params;
        options.messages['greaterThan'] = options.message;
    }
);

jQuery.validator.addMethod('greaterThan', function (value, element, params) {
    // params here will equal { param1: 'value1', param2: 'value2' }
    return ...
}, '');

评论

0赞 ricardo 1/25/2011
好的,太好了。您能否展示我将如何在脚本中引用执行验证的那些参数。这就是我现在被困住的地方。我知道验证的方法签名是函数(值、元素、参数),但不确定如何将 param1 和 param2 传递给它
1赞 Darin Dimitrov 1/25/2011
@ricardo,关于第一个问题,ModelValidator 允许您实现与 IClientValidatable 相同的功能,因为它公开了 GetClientValidationRules 方法。就第二个问题而言,那就是jquery验证。
1赞 Darin Dimitrov 1/25/2011
@ricardo,ValidationAttribute 作用于模型的单个属性,而 ModelValidator 作用于整个模型。
5赞 Paul Hiles 1/28/2011
ModelValidator 方法来自 MVC2,在我看来,不应该在 MVC3 项目中使用。MVC3 ValidationAttribute/IClientValidatable 方法更简洁,并且不涉及修改 global.asax 来注册适配器。
1赞 kdawg 1/29/2011
天哪,这行评论正是我所需要的。我一直在使用已更新到 MVC 3 的 MVC 2 站点。它有一个自定义的“RequiredIf”ValidationAttribute,它使用DataAnnotationsModelValidator和这里描述的所有东西:haacked.com/archive/2009/11/19/...。我对旧方法和这些新的 mvc3 方法感到非常困惑。显然他们实现了同样的事情。感谢 Microsoft 提供的文档(和提醒)!叹息谢谢 Darin、ricardo 和 The Flower Guy!