MVC客户端验证



本节内容比较简单，在上节服务器端验证的基础上介绍客户端验证。

客户端验证的好处是不用向服务器提交代码就能显示出错误信息。反应更快，与用户交互更流畅。

然而，其致命的弱点就是验证脚本可以在客户端被随意修改。因此它是不可靠的。

所以我们这里介绍怎样给单纯的服务器端验证加上客户端验证。

那么我们就基于上一节讲的Data Annotation验证添加客户端验证。

首先，确认解决方案根目录下的web.config文件中激活了客户端验证：

隐藏代码<configuration>
  <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
</configuration>

第3行表示激活了客户端验证。第4行表示激活Unobstrusive JavaScript。它代表着一种将Html代码和JavasScript分离开的思想。总体来说就是用代码分离的思想做客户端验证。

然后继续使用上一节创建的Model和Controller。

Models/DataAnnotationModel.cs

隐藏代码using System.ComponentModel.DataAnnotations;
namespace SlarkInc.Models
{
    public class DataAnnotationModel
    {
        [Required(ErrorMessage = "Name is required")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Email is required")]
        [RegularExpression(@"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$", ErrorMessage = "Email is invalid")]
        public string Email { get; set; }
    }
}

Controllers/DataValidationController.cs

隐藏代码using System.Web.Mvc;
using SlarkInc.Models;
using System.Text.RegularExpressions;

namespace SlarkInc.Controllers
{
    public class DataValidationController : Controller
    {
        public ActionResult DataAnnotationAction()
        {
            return View();
        }

        [HttpPost]
        public ActionResult DataAnnotationAction(DataAnnotationModel model)
        {
            if (ModelState.IsValid)
            {
                ViewBag.Name = model.Name;
                ViewBag.Email = model.Email;
            }
            return View(model);
        }
    }
}

View代码继续沿用，不过需要添加客户端验证所需的js文件。

Views/DataValidation/DataAnnotationAction.cshtml

隐藏代码@model SlarkInc.Models.DataAnnotationModel
@{
    ViewBag.Title = "DataAnnotationAction";
}
<h2>Data Annotation Validation</h2>
@Html.ValidationSummary()
@using (Html.BeginForm())
{
    if (@ViewData.ModelState.IsValid && ViewBag.Name != null)
    {
        <b>
            Name : @ViewBag.Name
            <br />
            Email: @ViewBag.Email
        </b>
    }
    <fieldset>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <br />
        <input type="submit" value="Submit" />
    </fieldset>
}
@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

第36-39行用来添加客户端验证所需的js文件。

这一段代码会调用App_Start文件夹下的BundleConfig.cs文件。文件内容如下：

隐藏代码namespace SlarkInc
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

第10和11行的代码会被调用。代码会引入所有符合"~/Scripts/jquery.validate*"条件的js文件。

即以下红色方框内文件：

按F5运行，输入以下错误信息，可以看到如下验证提示信息：

点提交按钮时，页面没有刷新，证明是客户端验证。

右键点击页面，选择查看源代码。可以看到Scripts.Render("~/bundles/jqueryval")函数向页面里加入了如下两个js文件。

隐藏代码<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

为什么不是之前截图看到的5个？我推测这和web.config设置以及用的是debug或release编译模式有关。

在页面生成的两个输入框的代码如下：

Name:

隐藏代码<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-required="Name is required" id="Name" name="Name" type="text" value="" /    　　　　　　>
    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>

Email:

隐藏代码<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-regex="Email is invalid" data-val-regex-pattern="^\s*([A-Za-z0-9_-]+(\.\  　　　　　　　w+)*@([\w-]+\.)+\w{2,3})\s*$" data-val-required="Email is required" id="Email" name="Email" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>

可以看到验证所需的信息都在html代码里，而验证的函数逻辑都在引入的validate的js文件里。两部分完全分离，但是又配合得很好。

到此，我们的客户端验证就介绍完了。