jquery - 在 ASP.NET MVC 3 中使用不显眼的客户端验证编写什么 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; }
}

然后是一个 Controller :

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

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

最后是一个 View :

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

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