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

客户端验证一般使用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. javascript字符串基本方法

    1)auchor anchor() 方法用于创建 HTML 锚. var txt="Hello world!" document.write(txt.anchor("my ...

  2. [TypeScript] Using Lodash in TypeScript with Typings and SystemJS

    One of the most confusing parts of getting started with TypeScript is figuring out how to use all th ...

  3. mybatis14 动态sql

    动态sql(重点) mybatis重点是对sql的灵活解析和处理. 1.1需求 将自定义查询条件查询用户列表和查询用户列表总记录数改为动态sql 1.2if和where <!-- 自定义查询条件 ...

  4. lambda与函数调用的转换

    14.38 编写一个类令其检查某个给定的string对象的长度是否与一个阈值相等.使用该对象编写程序,统计并报告在输入的文件中长度为1的单词有多少个,长度为2的单词有多少个.......长度为10的单 ...

  5. python学习笔记--Django入门三 Django 与数据库的交互：数据建模

    把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller (MVC)模式.在这个模式中, Model 代表数据存取层,View 代表的是系统中 ...

  6. hdu2044java

    一只小蜜蜂... Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  7. sqlite数据库修改及升级

    今天是上班的第二天,听说我最近的任务就是改bug,唉,权当学习了,遇到的一些问题都记录下来. sqlite数据库是android中非常常用的数据库,今天帮别人改bug,遇到一些问题记录下来. 1.修改 ...

  8. PS之火焰铁锈字

    效果图 素材一:将下图在PS中打开,选择菜单:编辑>定义图案,命名后关闭图案 素材二 1.新建如下画布 2.将素材二拖入新建好的画布(使用移动工具) 3.先将文字图层复制4次(ctrl+J)并且 ...

  9. MySQL存储过程详解 mysql 存储过程

    原文地址:MySQL存储过程详解  mysql 存储过程作者:王者佳暮 mysql存储过程详解 1.     存储过程简介 我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储 ...

  10. Eclipse项目 迁移到 Intellj IDEA

    自从用了Intellj IDEA,很多项目都想迁移到Intellj上面去开发  鉴于我们的大部分项目都是基于Maven构建的,所以就可以利用maven的命令来做这个事情.     1.选择一个ecli ...