MVC3 简单表单验证

Question

我是 MVC3 的新手，我将第一次验证表单。 我看到了一些使用 jQuery 和使用 Model.IsValid 的验证示例，但我不知道这是不是我的情况。

我正在使用@Html.TextBox 和@Html.ValidationMessage，我可以看到我需要在我的文档中放置2 jQuery 行来验证：

<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>

我看到很多人只使用 jQuery 进行验证，但我不知道它是如何工作的。那么，您能否给我一个带有 jQ​​uery（如果需要）和 Controller 的 Razor 视图的示例验证代码？由于我没有使用 TextBoxFor，因此我相信我不能仅对 Model 类中的 Dataannotations 使用验证。

我需要验证的表单：

@Html.TextBox("user", "User:")
@Html.TextBox("email", "Email:") <!-- with validation of email string -->
@Html.Password("password")
@Html.Password("passwordConfirm") <!-- with validation if 2 password strings match -->

Answer 1

jquery.validate.unobtrusive.min.js 脚本与放置在模型属性上的数据注释结合使用。这些验证器属性然后由 Html 助手翻译以发出脚本使用的 HTML5 data-* 属性。如果您没有使用验证属性装饰的模型，则无法使用此脚本。

这就是说，您仍然可以拥有一个带有验证属性的模型，并且仍然使用 TextBox 而不是 TextBoxFor。这将是完全愚蠢和毫无意义的，但你可以做到：

public class MyViewModel
{
    [Required]
    public string MyProperty { get; set; }
}

然后在您的视图中，当您使用 在表单中的帮助器之一时，将发出验证属性：

@model MyViewModel
@using (Html.BeginForm())
{
    @Html.TextBox("MyProperty")
}

如果您没有视图模型（不知道为什么没有视图模型，因为这违背了我提倡的良好做法），您可以手动连接验证。在这种情况下，您只需删除 jquery.validate.unobtrusive 脚本并使用核心 jquery validate 插件：

$(function() {
    $('#id_of_your_form').validate({
        rules: {
            MyProperty: {
                required: true
            }
        },
        messages: {
            MyProperty: {
                required: 'Please enter a value for MyProperty'
            }
        }
    });
});

显然，推荐的解决方案是使用视图模型和强类型助手：

public class RegisterViewModel
{
    public string User { get; set; }

    [DataType(DataType.EmailAddress)]
    [Email] // taken from Scott Gu's blog post: http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx
    public string Email { get; set; }

    public string Password { get; set; }

    [Compare("Password")]
    public string PasswordConfirm { get; set; }
}

然后在你看来：

@model RegisterViewModel
<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>
@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.User)
        @Html.EditorFor(x => x.User)
        @Html.ValidationMessageFor(x => x.User)
    </div>
    <div>
        @Html.LabelFor(x => x.Email)
        @Html.EditorFor(x => x.Email)
        @Html.ValidationMessageFor(x => x.Email)
    </div>
    <div>
        @Html.LabelFor(x => x.Password)
        @Html.PasswordFor(x => x.Password)
        @Html.ValidationMessageFor(x => x.Password)
    </div>
    <div>
        @Html.LabelFor(x => x.PasswordConfirm)
        @Html.PasswordFor(x => x.PasswordConfirm)
        @Html.ValidationMessageFor(x => x.PasswordConfirm)
    </div>
    <button type="submit">Register</button>
}