JQuery Validate使用总结
本文参考了 http://www.cnblogs.com/linjiqin/p/3431835.html
可以在mvc 或webform项目中使用,可以方便快捷的对前端表单进行校验
一、导入两个js文件
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
*这里需注意,引入的两个文件必须紧挨,否则错误提示显示不出。
二、默认校验规则
(1)、required:true 必输字段
(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true 必须输入正确格式的电子邮件
(4)、url:true 必须输入正确格式的网址
(5)、date:true 必须输入正确格式的日期,日期校验ie6出错,慎用
(6)、dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)、number:true 必须输入合法的数字(负数,小数)
(8)、digits:true 必须输入整数
(9)、creditcard:true 必须输入合法的信用卡号
(10)、equalTo:"#password" 输入值必须和#password相同
(11)、accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10] 输入值必须介于 5 和 10 之间
(16)、max:5 输入值不能大于5
(17)、min:10 输入值不能小于10 三、使用方法,
使用方法有两种,一种是将校验规则直接写到标签中,
另一种是将校验规则写到js文件中
本次主要使用第二种方法
脚本代码如下:
<script>
$(function () {
$("#form1").validate({
rules: {
txtName: { required: true },
txtMail: {
required: true,
email: true
},
txtPwd: {
required: true,
minlength: 5
},
txtPwd2: {
required: true,
minlength: 5,
equalTo: "#txtPwd"
}
},
messages: {
txtName: "请输入姓名",
txtMail: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
txtPwd: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符")
},
txtPwd2: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
}
});
});
</script>
html代码如下:
<div>
<form method="post" action="@Url.Action("Regerster", "UserInfo")" id="form1">
用户名:<input type="text" name="txtName" id="txtName" /><br />
密码:<input type="password" name="txtPwd" id="txtPwd" /><br />
确认密码:<input type="password" name="txtPwd2" id="txtPwd2" /><br />
邮箱:<input type="text" name="txtMail" id="txtMail" /><br /> <input type="submit" value="提交" />
</form>
</div>
JQuery Validate使用总结的更多相关文章
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
- ASP.NET MVC 5 Jquery Validate
ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- JS验证控件jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
随机推荐
- CentOS7 安装MongoDB 3.0服务
1,下载&安装 MongoDB 3.0 正式版本发布!这标志着 MongoDB 数据库进入了一个全新的发展阶段,提供强大.灵活而且易于管理的数据库管理系统.MongoDB宣称,3.0新版本不只 ...
- 支付宝&腾讯的OpenID之路
10年前上网很简单,那时我只用记住三个账号:QQ.21cn邮箱和中国联众.10年后的今天,应用或服务层次不穷:盛大网游.淘宝.豆瓣.人人.微博……太多的账号和密码我已经没办法记住.如果有一个 ...
- C++学习49 对二进制文件的读写操作
二进制文件不是以ASCII代码存放数据的,它将内存中数据存储形式不加转换地传送到磁盘文件,因此它又称为内存数据的映像文件.因为文件中的信息不是字符数据,而是字节中的二进制形式的信息,因此它又称为字节文 ...
- mysql如何给汉字按照首字母顺序排序
select * from 表名 order by convert(列明 USING gbk) COLLATE gbk_chinese_ci asc
- I/O地址映射
几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器.状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址.根据CPU体系结构的不同,CPU对IO端口的编址方式有两种: (1)I ...
- 在Eclipse ee中成功使用jQuery UI插件
关键代码截图如下:
- IOS学习之路- 运行过程
1. 执行Main函数(在main.m文件中) 2. 加载MainStoryborad.storyboard文件 * 创建ViewController文件 * 根据storyboard文件中描述创建V ...
- Hive表数据导出
方式一: hadoop命令导出 hadoop fs -get hdfs://hadoop000:8020/data/page_views2 pv2 方式二:通过insert...directory导 ...
- 命令行运行jmeter脚本
1.通过gui界面的jmeter创建一份脚本:2.打开cmd,切换到jmeter程序的Bin目录:3.执行jmeter.bat -n -t bookair_0613.jmx -l log_3.jtl: ...
- CnBlogs博文排版技巧(转)
看的一篇讲博文排版技巧的文章,虽然有些地方有些过时,不过还是有些可以借鉴地方的 http://www.cnblogs.com/lyj/archive/2008/11/30/1344463.html