ASP.NET MVC轻教程 Step By Step 12—

ASP.NET MVC轻教程 Step By Step 12——客户端验证

前面两节使用的两种数据验证方法都是在服务器端进行的，也就是提交了表单，数据回传给服务器才能验证。这样会带来两个问题，一是用户体验不好，用户提交了表单之后才知道存在问题；二是会给服务器带来额外的压力。我们可以使用客户端验证来解决这两个问题。

客户端验证一般使用Javascript脚本，JQuery.validate就是一个不错的JQuery验证组件，很多项目都会用它来实现客户端验证。

Step 1. 添加脚本

ASP.NET MVC对JQuery有很好的支持，实际上后者已经集成在前者里面了，新建一个MVC的项目模板就已经内置了JQuery、JQuery.validate。但是MesssageBoard是一个由空模板创建的项目，所以我们需要在项目中手动添加这些脚本文件。在项目中添加Scripts文件夹，并将下载好的JQuery、JQuery.validate和JQuery.validate.unobtrusive放置其中。

下面将这些脚本依次加入Write视图，注意先后顺序。

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <title>Write</title>
</head>
<body>
    <h1>MVC留言板</h1>
    @using (Html.BeginForm("Write", "Home"))
    {
        @Html.LabelFor(m=>m.NickName,"昵称")
        @Html.TextBoxFor(m => m.NickName)
        @Html.ValidationMessageFor(m=>m.NickName)
        <br /><br />
        @Html.LabelFor(m => m.Content,"内容")
        @Html.TextAreaFor(m => m.Content,5,50,null)
        @Html.ValidationMessageFor(m=>m.Content)
        <br /><br />
        <input type="submit" value="提交" />
    }
</body>
</html>

Step 2. 开启客户端验证

在默认情况下ASP.NET MVC项目就已经开启客户端的验证了。打开Web.config文件，可以看到ClientValidationEnabled和UnobtrusiveJavaScriptEnabled这两项键值都为True，说明支持客户端验证。如下图所示。

也可以为单个视图启用或禁用客户端验证，比如在Write视图里，我们可以设置HtmlHelper.ClientValidationEnabled = true来启用客户端验证。

@model MessageBoard.Models.Message

@{
    Layout = null;
    HtmlHelper.ClientValidationEnabled = true;
}

<!DOCTYPE html>
.
.
.

试一试，你就可以看到客户端验证的效果了。不过客户端验证有其局限性，如果用户浏览器不支持或关闭了Javascript的使用，客户端验证就会完全失效。所以要将客户端和服务器端结合使用，不能只依赖客户端验证。