MVC3 - 不显眼的验证多个控件

Question

我为不显眼的 MVC 3 验证创建了一个 jQuery 函数...

$.validator.addMethod('dtdt',
    function (value, element, parameters) {

        var idmonth = '#' + parameters['m'];
        var idyear = '#' + parameters['y'];
        var idhour = '#' + parameters['h'];
        var idminute = '#' + parameters['mn'];
        var controlmonth = $(idmonth);
        var controlyear = $(idyear);
        var controlhour = $(idhour);
        var controlminute = $(idminute);
        var mv = controlmonth.val();
        var yv = controlyear.val();
        var hv = controlhour.val();
        var mnv = controlminute.val();

        if (value == "" || mv == "" || yv == "" || hv == "" || mnv == "") 
            if (value != "" || mv != "" || yv != "" || hv != "" || mnv != "")
                return $.validator.methods.required.call(
                    this, value, element, parameters);

        return true;
    }
);

这背后的想法是我有 5 个彼此相邻的下拉控件（日、月、年、小时和分钟）。我已将此验证器放在 Day 下拉列表中。

规则是：- 如果一个是空的，那么它们都必须是空的。我一个如果填写，那么他们必须都填写。

Day 下拉列表值使用“value”传递到函数中。其他值直接从控件中检索。这一点工作正常。

当我调试时，代码似乎在我期望的时候正确地调用了“return $.validator”语句。然而，表单似乎仍然提交到服务器端。唯一的例外是如果它是我留空的日期下拉菜单。如果我将“月份”下拉列表留空，则验证器无法正常工作。

我想做的事可以实现吗？将此验证器放在 5 个控件中的每一个上似乎有点过头了。

Answer 1

问题在于您已将此验证器放在 Day 下拉列表中。为了使它工作，它应该调用 $.validator.methods.required.call 以获得正确的空元素，如下所示：

if (value == "" || mv == "" || yv == "" || hv == "" || mnv == "") {
    if (value != "" || mv != "" || yv != "" || hv != "" || mnv != "") {
        if (value == "")
            $.validator.methods.required.call(this, value, element, parameters);
        if (mv == "")
            $.validator.methods.required.call(this, mv, controlmonth, parameters);
        if (yv == "")
            $.validator.methods.required.call(this, yv, controlyear, parameters);
        if (hv == "")
            $.validator.methods.required.call(this, hv, controlhour, parameters);
        if (mnv == "")
            $.validator.methods.required.call(this, mnv, controlminute, parameters);
        return false;
    }
}

这段代码仍然不完美，但它应该让您知道应该朝哪个方向发展。

Answer 2

这不是不显眼的验证，而是非常显眼的验证。

要使用不显眼的验证，请用属性装饰您的模型，例如：

    public class ValidationModel {
    [Required]
    public string FirstName { get; set; }
 
    [Required, StringLength(60)]
    public string LastName { get; set; }
 
    [Range(1, 130)]
    public int Age { get; set; }
}

对 HTML 输入和验证消息使用 MVC 助手：

    @Html.TextBoxFor(x => x.FirstName)                                  
    @Html.ValidationMessageFor(x => x.UserName)

    @Html.TextBoxFor(x => x.LastName)                                   
    @Html.ValidationMessageFor(x => x.LastName)

    @Html.TextBoxFor(x => x.Age)
    @Html.ValidationMessageFor(x => x.Age)

包括 JQuery Validate Lirary 和不显眼的验证库：

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript">
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">

在 web.config 中启用不显眼的验证：

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

检查 firebug 中的元素以确保附加了不显眼的“data-val”属性，例如：

<input data-val="true" data-val-length="The field Name must be a string with a maximum length of 5." data-val-length-max="5" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />

验证就可以正常工作，不需要 javascript，完全不显眼。

更多信息：

http://weblogs.asp.net/mikaelsoderstrom/archive/2010/10/06/unobtrusive-validation-in-asp-net-mvc-3.aspx

http://thepursuitofalife.com/asp-net-mvc-3-unobtrusive-javascript-validation-with-custom-validators/