自定义注释 Asp.Net MVC 4 的客户端验证答案

【问题标题】：Client side validation for custom annotation Asp.Net MVC 4自定义注释 Asp.Net MVC 4 的客户端验证
【发布时间】：2012-05-19 14:29:57
【问题描述】：

我指的是这篇文章：

http://haacked.com/archive/2009/11/19/aspnetmvc2-custom-validation.aspx

展示了如何在 Asp.Net MVC 2 中创建自定义注释。但是，客户端验证脚本，尤其是“MicrosoftMvcJQueryValidation”在 Asp.Net MVC4 中不可用。我在一篇文章中读到它是 Asp.Net Futures 项目的一部分。我想使用 Jquery 连接我的客户端验证。在我的项目模板脚本文件夹中，我看到名为：

的脚本

jquery.validate.min.js
jquery.validate.unobtrusive.min.js
jquery.unobtrusive-ajax.min.js

有什么方法可以利用这些现有的脚本吗？还是我必须强制下载期货项目？

【问题讨论】：

谷歌“MVC 3 自定义验证”，你会发现像msdn.microsoft.com/en-us/… 和tdryan.blogspot.com/2010/12/aspnet-mvc-3-custom-validation.html 这样的几篇文章
@RickAndMSFT：当您盲目地在未阅读的问题上发布链接时会发生这种情况。 msdn.microsoft.com/en-us/… 与 Jquery 验证无关。它使用 MicrosoftMvcValidation.js 进行客户端验证，正如我在问题中明确指出的那样，我不想要它，tdryan.blogspot.in/2010/12/aspnet-mvc-3-custom-validation.html 使用内置的 RegularExpressionAttribute 自动生成客户端脚本。我没有使用 RegularExpressionAttribute。根据您的链接，我最好不要谷歌：D
阅读我的任何教程下方的回复。为 MVC 4 更新它们并不难。概念是相同的。
@TimTom 无需在您对 Rick 的评论中显得粗鲁。他花时间回答了你的问题，即使你觉得这不是正确的答案。

标签： .net asp.net-mvc asp.net-mvc-3 asp.net-mvc-4

【解决方案1】：

那篇文章专门针对使用 MicrosoftAjax 的 MVC 2。 MVC 4 不再包含 MS Ajax 文件，因为它们已被弃用，首选方法是使用 jquery。

要验证您的设置，请确保这些脚本在您的布局中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

这两个设置存在于您的 web.config 文件的 appSettings 部分中

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

因此，当您向 ViewModel 添加数据注释时，您会同时获得客户端和服务器端验证

public class MyModel 
{
    [Required]
    [StringLength(30)]
    public string FirstName { get; set; }

    [Required]
    [StringLength(30)]
    public string LastName { get; set; }
}

在你看来，只要确保你有这样的代码

<div>
    @Html.LabelFor(model => model.FirstName)
</div>
<div>
    @Html.TextBoxFor(model => model.FirstName) <br/>
    @Html.ValidationMessageFor(model => model.FirstName)
</div>

<div>
    @Html.LabelFor(model => model.LastName)
</div>
<div>
    @Html.TextBoxFor(model => model.LastName) <br/>
    @Html.ValidationMessageFor(model => model.LastName)
</div>

更新

这是我称之为 RateRequiredIfCustomIndexRate 的自定义验证器的示例这是它的 javascript 方面，因此它被添加到 jquery 验证中

$("document").ready(function () {

    var isCustomRateRequired = document.getElementById("IsCustomRateRequired");

    isCustomRateRequired.onchange = function () {
        if (this.checked) {
            $('#Rate').attr('disabled', 'disabled');
            $('#Rate').val('');
        }
        else {
            $('#Rate').removeAttr('disabled');
        }
    };
});

jQuery.validator.addMethod("raterequiredifcustomindexrate", function (value, element, param) {
    var rateRequired = $("#CustomRateRequired").val();
    if (rateRequired && value == "") {
        return false;
    }
    return true;
});

jQuery.validator.unobtrusive.adapters.addBool("raterequiredifcustomindexrate");

【讨论】：

那么如何将我的客户端验证与这些脚本挂钩？有教程吗？文章？
这很简单，您可以免费获得 :-) 当您使用数据注释装饰您的 ViewModel 类时，这些相同的规则会被转换为客户端规则.. 立即更新我的答案
真的有可能吗？这是我的自定义验证注释。我使用 ValidationAttribute 进行了扩展我的 C# 代码服务器端验证如何自动翻译成 Jquery 语言？我很好奇。
自定义验证不同，您还必须将该自定义验证器添加到 jquery 验证中...再次更新答案...
这不是我要找的。我在问题中发布的文章是关于自定义验证而不是这些内置类型。

【解决方案2】：

这里缺少的关键是服务器端验证器必须实现 IClientValidatable 接口：

public class RateRequiredIfCustomIndexRateAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return false;
    }

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

完成此操作后，客户端验证应正确连接。您可以通过确保您的输入字段具有“data-val-raterequiredifcustomindexrate”属性来验证这一点。

【讨论】：