在MVC应用程序中使用jQuery的验证

呵呵,觉得很久没有写博客了,均是工作忙于公司的ERP系统,这是正确的,因为这才是真正的工作。

今天想写点在MVC应用程序中,使用jQuery来验证。在进行之前,还是先回看一下《MVC会员注册http://www.cnblogs.com/insus/p/3439599.html 这里有些问题需要改正的,如密码文本框,需要把type="text"改为type="password",这样在输入密码时,就不再是明显的了。

另外,所有文本框均没有做验证,是否为必填,密码与确认密码是否匹配相同,邮箱地址是否为Email格式等。那这次,我们就这些问题进行一一改正。

下面是更改密码文本框的type:

实现验证,Insus.NET决定使用jQuery的验证插件来实现。获取最新jQuery.js和jQuery的validate,在Solution explorer中,对应用程序点击Mouse的右键,然后看到菜单Manage NuGet Packages...

把最新版的jQuery和validate插件下载到应用程序中:

接下来,需要修改一下App_Start/BundleConfig.cs:

下面就可以写jQuery代码了:

其中#37至#57行,是Ajax提交事件,也是从上一篇中,原版搬过来的。

在整个练习过程,发现在验证过中:

<input id="btnReg" type="button" value="注册" />

与使用Submit有点不一样:

<input id="btnReg" type="submit" value="注册" />

本练习,就是使用Button,意味着写click事件。最后看看实时操作演示:

下面是存入数据库记录:

在MVC应用程序中使用jQuery的验证

时间: 2024-11-09 18:55:40

在MVC应用程序中使用jQuery的验证的相关文章

在ASP.NET MVC应用程序中随机获取一个字符串

在开发ASP.NET MVC应用程序时,有可能需要一个随机字符串,作为密码或是验证码等. 如果你需要的是SQL版本,可以参考<密码需要带特殊字符(二)>http://www.cnblogs.com/insus/archive/2012/02/16/2354453.html 此篇实现方法多少是参照这个实现C#版本. 在应用程序下,创建一个CharacterUtility.cs: 这个类别中,分别有几个静态方法:一,为随机的小写字母: 二,是随机产生大写字母: 三,是随机产生数字: 四,是产生特殊

1.仓储模式在MVC应用程序中的使用

目录 1.仓储模式在MVC应用程序中的使用 2.泛型仓储模式在MVC应用程序中的使用 3.MVC Code-First和仓储模式的应用 4.待续.... 这篇文章中,我会解释仓储模式在MVC程序中的使用. 首先,我们需要理解什么是仓储模式[repository Pattern],来看看下面的图片 没有使用仓储模式的MVC应用程序:      使用了仓储模式的MVC应用程序: 仓储模式,是一个抽象层,它将数据库的访问逻辑,映射到实体的访问逻辑. 下面,我们来看做一个应用程序,来体验一下仓储模式吧.

在MVC应用程序中,怎样删除上传的文件

在ASP.NET MVC应用程序中,怎样删除上传的文件. 由于上传时,真正文件是存储在应用程序某一目录,在数据库表中,只是存储其基本信息.在删除时,需要注意一下,由于没有事务可操作.Insus.NET的实现方法,是先删除物理路径的文件,然后是删除数据库记录. 打开数据库,写一个删除记录的存储过程: 在FileLibraryEntity.cs添加一个Delete的方法: 创建控制器: 先从数据库中获取记录信息,然后组合文件路径,判断是否存在,存在者删除之.最后是删除数据库记录. 创建视图: #1标

MVC应用程序中管理(更新)上传的文件

实现上传文件功能,有时上传也会操作出错,能让用户有改正有机会,开发上传文件能有更新的功能. 文件上传时,如果是存储于应用程序某一目录的话,在更新时需要了解一些流程,先是删除旧文件,更新数据表相关信息,存储新文件. 本篇让你了解到MVC与jQuery的交互处理. 在数据库中,新建一个更新的存储过程: 找到并打开FileLibraryEntity.cs,添加一个vlid更新方法: 在ExerciseController.cs控制器中,创建一个更新Action: A标记,删除旧文件. B标记,获取新上

在MVC应用程序中动态加载PartialView

有时候,我们不太想把PartialView直接Render在Html上,而是使用jQuery来动态加载,或是某一个事件来加载. 为了演示与做好这个练习,我们先在Views目录下的Home下创建_Partial1.cshtml部分视图,视图内容任你自定义,Insus.NET在本例中只让其显示一些文字与一张图片: 接下来,我们需要建立一个ActionResult()方法,在Controllers目录之下,打开HomeController.cs: 再去Views\Home目录,创建一个DynamicL

MVC应用程序中,怎样控制与复制相同的功能

先看此篇<MVC程序实现Autocomplete功能> http://www.cnblogs.com/insus/p/3546255.html 它是实现使用jQuery实现文本框输入文字,出现下拉列表,自动完成与选择功能. 相信你的开发的MVC应用程序中,不止有唯一一个此AutoComplete功能.如果有多个时,或是不断新加时,你的Handlers目录下,肯定会出现多个ashx文件来支持.每增加一个,就会去复制然后修改它.因为这个ashx内处理的是不同类各自的数据. 因此让Insus.NET

在ASP.NET MVC应用程序中实现Server.Transfer()类似的功能

在ASP.NET MVC应用程序中,如果使用Server.Transfer()方法希望将请求转发到其它路径或者Http处理程序进行处理,都会引发“为xxx执行子请求时出错”的HttpException异常.而在最终实现Server.Transfer()操作的方法内部,我看到这样几行代码. else if (!(handler is Page)) { error = new HttpException(0x194, string.Empty); } 很明显,在方法内部,所有的IHttpHandle

连接弹性和命令拦截的 ASP.NET MVC 应用程序中的实体框架

最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    上篇博客我们学习了EF 之 MVC 排序,查询,分页 Sorting, Filtering, and Paging For MVC About EF,本节继续学习 标题中的:连接弹性(微软解释:瞬态错误自动重试连接)和命令拦截(捕捉所有 SQL 查询发送到数据库,以便登录或改变它们) 上网查了大量的资料,网友们基本都是直接翻译原文:Connecti

EF6与mvc5系列(3):在MVC应用程序中使用EF进行排序,过滤和分页

上节中,我们实现了基本增删查改功能,本节中要在Student的Index页面添加排序,分页和过滤功能,同时创建一个简单的分组页面. 在Student的Index页面添加列排序链接 为了在Index页面中实现排序.修改Index方法中的代码. 在Index方法中添加排序功能 修改Student控制器中的Index方法,在Index视图中添加代码. // GET: /Student/ public ActionResult Index(string sortOrder) { ViewBag.Name