asp.net - MVC3 客户端验证不稳定/不一致

Question

服务器端验证效果很好，但客户端在某些字段上不起作用。

使用:

"jquery-1.5.1.min.js"  
"modernizr-1.7.min.js"  
"jquery.validate.min.js"  
"jquery.validate.unobtrusive.min.js". 

HTML5 语义标记

MVC3、Razor、代码优先

类数据注释:

using System.ComponentModel.DataAnnotations;

[Required, MaxLength(30, ErrorMessage = "First Name must be {1} characters or less")]
public string FirstName { get; set; }

[Range(20, 50, ErrorMessage = "{0} must be between {1} and {2}")]
public double Waist { get; set; }

查看:

该 View 是强类型的。

@using (Html.BeginForm()) { @Html.ValidationSummary(true)

    <span class="editor-label">  First Name </span>

    <span class="editor-field">

    @Html.EditorFor(model => model.FirstName)

    @Html.ValidationMessageFor(model => model.FirstName)

    </span><br /><br />

    <span class="editor-label">@Html.LabelFor(model => model.Waist): 20 to 50</span>

    <span class="editor-field">

    @Html.EditorFor(model => model.Waist)

    @Html.ValidationMessageFor(model => model.Waist)

    </span><br /><br />

客户端验证适用于腰部，但不适用于名字。服务器端适用于两者。

当我查看源代码时，Waist 有一个 data-val-range。

data-val-range = "腰围必须在 20 到 50 之间"

FirstName 没有数据值范围。

非常感谢任何帮助。

谢谢，

乔

我使用的是 IE9 64 位。

经过进一步调查，Required 和 String Length 部分有效。我将 Dataannotation 属性更改为此。

  [Required(ErrorMessage = "First Name is required")]       [StringLength(30, MinimumLength = 2, ErrorMessage = "First Name must be {2} to {1} characters")]     public string FirstName { get; set; }

现在，当我进入编辑 View 并清除 FirstName 文本框和选项卡到下一个文本框时，我没有收到任何验证错误。如果我输入一个字符，我会收到 StringLength 消息，当我随后清除该字段时，我会收到必需消息。越来越近了，但它仍然无法正常工作。

当我使用 StringLength 时，data-val-length= 被添加到源中

Answer 1

MaxLength 和 MinLength 不适用于客户端验证。您可以使用 StringLength相反:

[Required]
[StringLength(30, ErrorMessage = "First Name must be {1} characters or less")]
public string FirstName { get; set; }

还有一个MinimumLength如果您想模拟 MinLength 属性，您可以设置该属性:

[Required]
[StringLength(30, MinimumLength = 10, ErrorMessage = "First Name must be between 10 and 30 characters")]
public string FirstName { get; set; }

<小时/>

更新:

看来您想在未提交表单的情况下急切地触发验证。您可以添加以下脚本来实现此目的:

<script type="text/javascript">
    $(function () {
        var settngs = $.data($('form')[0], 'validator').settings;
        settngs.onfocusout = function (element) { $(element).valid(); };
    });
</script>

<小时/>

更新2:

这是一个完整的示例。使用 Internet 模板创建一个新的 ASP.NET MVC 3 项目。

型号:

public class MyViewModel
{
    [Required(ErrorMessage = "First Name is required")]
    [StringLength(30, MinimumLength = 2, ErrorMessage = "First Name must be {2} to {1} characters")]
    public string FirstName { get; set; }
}

Controller :

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel
        {
            FirstName = "foo"
        });
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

查看:

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var settngs = $.data($('form')[0], 'validator').settings;
        settngs.onfocusout = function (element) { $(element).valid(); };
    });
</script>

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.FirstName)
    @Html.ValidationMessageFor(x => x.FirstName)
    <button type="submit">OK</button>
}