前面两节使用的两种数据验证方法都是在服务器端进行的,也就是提交了表单,数据回传给服务器才能验证。这样会带来两个问题,一是用户体验不好,用户提交了表单之后才知道存在问题;二是会给服务器带来额外的压力。我们可以使用客户端验证来解决这两个问题。
客户端验证一般使用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的使用,客户端验证就会完全失效。所以要将客户端和服务器端结合使用,不能只依赖客户端验证。