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

客户端验证一般使用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的使用，客户端验证就会完全失效。所以要将客户端和服务器端结合使用，不能只依赖客户端验证。

ASP.NET MVC轻教程 Step By Step 12——客户端验证的更多相关文章

  1. ASP.NET MVC轻教程 Step By Step 1 ——入门

    使用ASP.NET MVC有一段时间了,本人还是非常喜欢ASP.NET MVC这个框架模式的.在经历了WebForm复杂粗暴的做法后,自然感觉简洁优雅的MVC清新可人,只不过WebForm和MVC的设 ...

  2. ASP.NET MVC轻教程 Step By Step 8——路由

    在前面的教程里,细心的你可能会有个疑问,就是地址栏输入/Home/Write就可以进入留言页面.无论是静态HTML还是ASP/ASP.NET.PHP,URL都是和某个页面相关.比如假设有个URL是“w ...

  3. ASP.NET MVC轻教程 Step By Step 13——页面布局

    一般在一个网站中页面会使用相同的结构和元素,如果每个页面都要重复添加这些元素,不仅繁琐更会给我们后期维护带来大麻烦.所以我们采用网页模板之类的技术,将固定不变的元素放入模板,同时留下一些占位符供页面各 ...

  4. ASP.NET MVC轻教程 Step By Step 9——分页

    现在我们要把Index视图的留言信息进行分页显示. Step 1. 创建路由 我们希望以类似地址http://localhost:41583/Page1来表示第一页,Page2表示第二页,以此类推.在 ...

  5. ASP.NET MVC轻教程 Step By Step 7——改进Write动作方法

    在上一节我们使用强类型视图改进Write视图获得更好的智能感知和代码重构,现在可以进一步的改进动作方法. Step 1. 数据模型绑定 在Save方法中我们使用Request来获取表单传送的值,其实可 ...

  6. ASP.NET MVC轻教程 Step By Step 6——改进表单

    上一节我们使用原始的HTML表单来完成留言功能,但是ASP.NET MVC提供了丰富的HTML辅助方法来帮助我们构建更简洁优雅的表单. Step 1. 修改Form标签 首先,我们可以使用Html.B ...

  7. ASP.NET MVC轻教程 Step By Step 2 ——View初探

    在上一节我们完成了一个最简化的MVC程序,最重要的是下面这段代码. public class HomeController : Controller { public string Index() { ...

  8. ASP.NET MVC轻教程 Step By Step 4——Model、View和Controller

    ASP.NET MVC中的Model(数据模型)主要包括定义数据结构.数据库读写.数据验证等等和对象处理相关的工作. 在解决方案资源管理器中找到Model文件夹,点击右键,添加一个新类,名为“Mess ...

  9. [ASP.NET MVC]笔记（四 UnobtruSive AJAX和客户端验证

    UnobtruSive AJAX和客户端验证 ASP.NET MVC 已经默认开启非侵入试js和客户端验证,在web.config可以看到如下配置: <configuration> < ...

随机推荐

  1. java中如何使正在运行中的线程退出

    终止线程的三种方法      有三种方法可以使终止线程.      1.  使用退出标志,使线程正常退出,也就是当run方法完成后线程终止.      2.  使用stop方法强行终止线程(这个方法不 ...

  2. ABAP SAPGUI_PROGRESS_INDICATOR 显示数据处理进度

    ABAP处理的数据量较大时,盯着一动不动的选择屏幕是不是很无聊?? LOOP AT I_TAB. DESCRIBE TABLE I_TAB[] LINES L_LIN. L_PERC = SY-TAB ...

  3. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  4. Chapter 4 - How to Fire some Bullets

    Now, we want to let the hero fire some bullets to kill the enemies, add the codes below to set the l ...

  5. NDK开发之获得域和方法描述符

    在NDK开发之调用方法和NDK开发之访问域两篇博客中,我们在获得域ID和方法ID时都需要一个叫做描述符的参数,那么在实际开发中我们怎么知道我们要调用的域或者方法的描述符呢? 一个简单的方法就是使用Ja ...

  6. 前后端分离--mock

    fekit mock 数据 > fekit server -m mock.config 配置mock.config 支持正则 module.exports = { /queryProductDe ...

  7. Android WebView的loadData方法注意事项

    loadData()中的html data中不能包含'#', '%', '\', '?'四中特殊字符,出现这种字符就会出现解析错误,显示找不到网页还有部分html代码.需要如何处理呢?我们需要用Url ...

  8. thinkphp 常见问题

    0．写在最前面的不断更新 (1)trace不起作用 A:必须要输出到模板,才会有trace信息 (2)提示“您浏览的页面暂时发生了错误!请稍后再试-” A:检查控制器(看看能进到控制器没有,设断点输出 ...

  9. SharePoint Attachement操作代码

    下载文件 如果下载其它类别的文件:  SPSecurity.RunWithElevatedPrivileges(].ToString();                            swi ...

  10. Gym 100187M-Heaviside Function

    题意:给定函数: f(x) = θ(s1x - a1) + θ(s2x - a2) + ... + θ(snx - an), where si =  ± 1. Calculate its values ...