我在ASP.NET MVC 3中使用Unobtrusive Client Validation编写了什么jQuery？

Question

<form>
<div class="clrfix">
  <label for="first_name">First Name</label>
  <input data-val="true" data-val-required="Your First Name is required." id="first_name" name="first_name" type="text" value="" />
  <span class="field-validation-valid" data-valmsg-for="first_name" data-valmsg-replace="true"></span>
</div>
<div class="clrfix">
  <label for="last_name">Last Name</label>
  <input data-val="true" data-val-required="Your Last Name is required." id="last_name" name="last_name" type="text" value="" />
  <span class="field-validation-valid" data-valmsg-for="last_name" data-valmsg-replace="true"></span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/mvc/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/mvc/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/mvc/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

所以我试图在ASP.NET MVC 3中理解这种不引人注意的客户端验证的概念.所以我做了上面的,现在最大的问题,我如何用jQuery验证？我到底写了什么？这让我很困惑.如何调用错误消息,什么不是？

如果有人能给我任何关于后续步骤的见解,我将非常感激.

Answer 1

这是一个如何工作的例子.首先定义一个模型,该模型将包含用指示不同验证规则的属性修饰的属性:

public class PersonViewModel
{
    [Required(ErrorMessage = "The first name is required")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "The last name is required")]
    public string LastName { get; set; }
}

然后一个控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new PersonViewModel());
    }

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

最后一个观点:

@model AppName.Models.PersonViewModel
@{
    ViewBag.Title = "Home Page";
}

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

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.FirstName)
        @Html.TextBoxFor(x => x.FirstName)
        @Html.ValidationMessageFor(x => x.FirstName)
    </div>

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

    <input type="submit" value="OK" />
}

用于在视图中生成相应表单字段的Html助手将使用HTML5 data-*属性来转换模型上的验证规则.然后,只需将jquery.validate.js和jquery.validate.unobtrusive.js脚本包含在您的页面中,当您尝试提交表单时,将强制执行这些规则.