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验证,但我无法理解它是如何工作的.那么,您能否通过jQuery(如果需要)和Controller为我提供Razor View的示例验证代码？由于我没有使用TextBoxFor,我相信我不能仅在Model类中使用Datannotations进行验证.

我需要验证的表单:

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