Jquery插件validate使用一则
jquery.validate是一个基于jquery的非常优秀的验证框架，可以通过它迅速验证一些常见的输入，并且可以自己扩充自己的验证方法。
主要功能有：
验证url，email，number，length，require等。
默认校验规则：
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(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: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(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
validate安装：
下载validation，官网地址 http://jqueryvalidation.org/ 获得最新版本的js文件。
导入js库：
Html结构例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery validation plug-in - main demo</title>
<script type="text/javascript" src="jquery-1.7.2.js">
</script>
<script type="text/javascript" src="jquery.validate.min.js">
</script>
<script type="text/javascript" src="base.js">
</script>
</head>
<body>
<h1>validate测试</h1>
<form method="get" action="" id="form1">
<p>
<label for="cname">
用户名
</label>
<input name="cname" type="text" class="required" minlength="2"/>
</p>
<p>
<label for="cemail">
</label>
<input type="email" name="cemail" class="required email"/>
</p>
<p>
<label for="curl">
URL
</label>
<input type="text" name="curl" class="url" />
</p>
<p>
<label for="password">
密码
</label>
<input type="password" id="password" name="password" />
</p>
<p>
<label for="confirm_password">
确认密码
</label>
<input type="password" name="confirm_password" />
</p>
<p>
<label for="ccomment">
自定义
</label>
<input type="text" name="comment" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</body>
</html>
将校验写在Js代码中：
例如
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为{0} 的值"),
min: jQuery.validator.format("请输入一个最小为{0} 的值")
});
//自定义校验规则
jQuery.validator.addMethod("mobileNum", function(value, element){
return this.optional(element) || /^((13[456789])|(15[012789])|(18[2378]))\d{8}$/.test(value);
});
$(function(){
$("#form1").validate({
errorElement: "span",// 使用"div"标签标记错误， 默认:"label"
wrapper: "div",// 使用"li"标签再把上边的errorELement包起来
errorClass: "validate-error",// 错误提示的css类名"error"
rules: {
cname: {// 需要进行验证的输入框name
required: true,// 验证条件：必填
minlength: 2// 验证条件：最小长度为2
},
cemail: {// 需要进行验证的输入框name
required: true,// 验证条件：必填
email: true// 验证条件：格式为email
},
curl: {// 需要进行验证的输入框name
required: true,// 验证条件：必填
url: true// 验证条件：格式为url
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
comment: {
required: true,
number: true,
mobileNum: true
}
},
messages: {
cname: {
required: "用户名不允许为空!"// 验证未通过的消息
},
cemail: {
required: "地址不能为空",
email: "输入正确的url"
},
curl: {
required: "地址不能为空",
url: "输入正确的url"
},
password: {
required: "请输入密码",
minlength: "密码的最小长度是{0}个字符"
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码的最小长度是{0}个字符",
equalTo: "确认密码与密码不相等"
},
comment: {
required: "不能为空!",
mobileNum: "输入数字不符合要求"
}
},
errorPlacement: function(error, element){
element.parent().append(error);
},
submitHandler: function(form){
form.submit();
},
success: function(error, element){
error.remove();
}
})
});
将校验规则写到控件中：
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery validation plug-in - main demo</title>
<script type="text/javascript" src="jquery-1.7.2.js">
</script>
<script type="text/javascript" src="jquery.validate.min.js">
</script>
<script>
$(function(){
$("#form1").validate();
})
</script>
<script type="text/javascript" src="base.js">
</script>
</head>
<body>
<h1>validate测试</h1>
<form method="get" action="" id="form1">
<p>
<label for="cname">
用户名
</label>
<input name="cname" type="text" class="required" minlength="2"/>
</p>
<p>
<label for="cemail">
</label>
<input type="email" name="cemail" class="required email"/>
</p>
<p>
<label for="curl">
URL
</label>
<input type="text" name="curl" class="url" />
</p>
<p>
<label for="ccomment">
自定义
</label>
<input type="text" name="comment" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</body>
</html>
Jquery插件validate使用一则的更多相关文章
- 使用jquery插件validate制作的表单验证案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery插件-validate
1.引入js,css 下载地址:http://plugins.jquery.com/validate/ 2.设置验证规则:input的class添加以下验证属性 3.设置不符合规则的提示信息:添加da ...
- JQuery插件validate的Remote使用
JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下. 1. 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery ...
- jquery 插件 validate 学习
jquery是十分方便的对于现在来说. 首先应该明白一个问题: <p> <label for="password">Password</label& ...
- jQuery插件Validate
一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2 ...
- jQuery应用一之验证插件validate的使用
综述 validate是一个用来验证表单提交的插件,应用十分广泛,具有如下的几个功能 自带了基本的验证规则 提供了丰富的验证信息提示功能 多种事件触发验证 自定义验证规则 下面我们就来感受一下这个插件 ...
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- JQuery 表单校验插件 validate 使用纪录
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
随机推荐
- Java 11 新垃圾回收器 ZGC
可伸缩.低延迟的垃圾回收器 GC 暂停时间不超过 10ms 堆管理容量范围(小M级别,大到T级别) 对应用吞吐量影响不超过15%(对比 G1) 为进一步的添加新特性和优化做基础 默认支持 Linux/ ...
- 巨杉Tech | SequoiaDB虚机镜像正式上线
数据库云化架构需求 随着云架构的发展和流行,在业务和应用进行“云化”的过程中,云数据库因为在整体架构中的重要地位,在云化改造中的重要性不言而喻.云数据库需要满足这些技术要求,除了在功能上的具体提升,在 ...
- C++-POJ2159-Candies[spfa][栈优化][邻接表]
#include <cstdio> ,N=; struct edge{int v,w,next;}e[M];int head[N],cnt; void add(int u,int v,in ...
- windows重建ESP分区修复引导
开始 装在虚拟机里面的win7实在是太卡了,所以准备把虚拟磁盘文件复制到固态硬盘,,,但是,,, 我只有128GB固态... 那就只能卸载之前通宵装的linux 好气 首先需要装进入PE UEFI + ...
- 计蒜客 - A1633.蒜头君的数轴
我感觉出的很好的一道题,首先不难想到(其实我刚开始没想到),加点的个数就是找已有点两两形成区间的gcd,那么问题就出在了复杂度上,每次循环哪个区间不要复杂度过高,所以运用正反两次前缀和(?好像不能这么 ...
- 可持久化0-1 Trie 简介
Trie树是字符串问题中应用极为广泛的一种数据结构,可以拓展出AC自动机.后缀字典树等实用数据结构. 然而在此我们考虑0-1 Trie的应用,即在序列最大异或问题中的应用. 这里的异或是指按位异或.按 ...
- Itext相关知识
最近需求用到office和pdf相关知识,office使用poi操作的,pdf则使用Itext操作 Itext官网: http://itextpdf.com/ Itext7相关使用示例:https:/ ...
- adb 无线连接手机设备
连接语法: $ adb connect ip:port 断开连接: $ adb disconnect ip:port 可能遇到问题:unable to connect to 192.168.199.2 ...
- ssh: connect to git@gitlab.xxxxx.com:xxxxx.git port 22: Connection refused
公司服务器上的gitlab项目添加了ssh密钥,但是操作时却报错ssh: connect to git@gitlab.xxxxx.com:xxxxx.git port 22: Connection r ...
- MySQL认知
MySQL 认识MySQL MySQL是什么? MySQL是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management S ...