jquery.validate使用攻略 第一部


Posted in Javascript onJuly 01, 2010

主要分几部分
jquery.validate 基本用法
jquery.validate API说明
jquery.validate 自定义
jquery.validate 常见类型的验证代码

下载地址

jquery.validate插件的文档地址
http://docs.jquery.com/Plugins/Validation

jquery.validate插件的主页
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jquery.validate插件主页上提供的demo
http://jquery.bassistance.de/validate/demo/

验证规则下面是默认校验规则,也可以自定义规则

(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(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

验证提示

下面是默认的验证提示,官网有简体中文版的验证提示下载,或者通过jQuery.extend(jQuery.validator.messages自定义错误提示信息,可以将网站的验证提示文本统一到一个文件里。

required: "This field is required.", 
remote: "Please fix this field.", 
email: "Please enter a valid email address.", 
url: "Please enter a valid URL.", 
date: "Please enter a valid date.", 
dateISO: "Please enter a valid date (ISO).", 
number: "Please enter a valid number.", 
digits: "Please enter only digits", 
creditcard: "Please enter a valid credit card number.", 
equalTo: "Please enter the same value again.", 
accept: "Please enter a value with a valid extension.", 
maxlength: $.validator.format("Please enter no more than {0} characters."), 
minlength: $.validator.format("Please enter at least {0} characters."), 
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), 
range: $.validator.format("Please enter a value between {0} and {1}."), 
max: $.validator.format("Please enter a value less than or equal to {0}."), 
min: $.validator.format("Please enter a value greater than or equal to {0}.")

使用方式

1:
在控件中使用默认验证规则,例子:
电子邮件(必填) <input id="email" class="required email" value="email@" />2:
可以在控件中自定义验证规则,例子:
自定义(必填,[3,5])
<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,
messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}" />

3: 通过javascript自定义验证规则,下面的JS自定义了两个规则,password和confirm_password

$().ready(function() { 
$("#form2").validate({ 
rules: { 
password: { 
required: true, 
minlength: 5 
}, 
confirm_password: { 
required: true, 
minlength: 5, 
equalTo: "#password" 
} 
}, 
messages: { 
password: { 
required: "没有填写密码", 
minlength: jQuery.format("密码不能小于{0}个字符") 
}, 
confirm_password: { 
required: "没有确认密码", 
minlength: "确认密码不能小于{0}个字符", 
equalTo: "两次输入密码不一致嘛" 
} 
} 
}); 
});

required除了设置为true/false之外,还可以使用表达式或者函数,比如
$("#form2").validate({ 
rules: { 
funcvalidate: { 
required: function() {return $("#password").val()!=""; } 
} 
}, 
messages: { 
funcvalidate: { 
required: "有密码的情况下必填" 
} 
} 
});

Html
密码<input id="password" name="password" type="password" />
确认密码<input id="confirm_password" name="confirm_password" type="password" />
条件验证<input id="funcvalidate" name="funcvalidate" value="" />

4: 使用meta自定义验证信息

首先用JS设置meta
$("#form3").validate({ meta: "validate" });

Html

email<input class="{validate:{required:true, email:true,
messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}}"/>

5: 使用meta可以将验证规则写在自定义的标签内,比如validate

JS设置meta
$().ready(function() {
$.metadata.setType("attr", "validate");
$("#form1").validate();
});

Html

Email
<input id="email" name="email"
validate="{required:true, email:true, messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}" />

6: 自定义验证规则

对于复杂的验证,可以通过jQuery.validator.addMethod添加自定义的验证规则

官网提供的additional-methods.js里包含一些常用的验证方式,比如lettersonly,ziprange,nowhitespace等

例子

// 字符验证 
jQuery.validator.addMethod("userName", function(value, element) { 
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); 
}, "用户名只能包括中文字、英文字母、数字和下划线"); //然后就可以使用这个规则了 
$("#form1").validate({ 
// 验证规则 
rules: { 
userName: { 
required: true, 
userName: true, 
rangelength: [5,10] 
} 
}, 
/* 设置错误信息 */ 
messages: { 
userName: { 
required: "请填写用户名", 
rangelength: "用户名必须在5-10个字符之间" 
} 
}, 
});

7: radio、checkbox、select的验证方式类似

radio的验证

性别
<span>
男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />
女<input type="radio" id="gender_female" value="f" name="gender" />
</span>

checkbox的验证

最少选择两项
<span>
选项1<input type="checkbox" id="check_1" value="1" name="checkGroup"
class="{required:true,minlength:2, messages:{required:'必须选择',minlength:'至少选择2项'}}" /><br />
选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />
</span>

select的验证

下拉框
<span>
<select id="selectbox" name="selectbox" class="{required:true}">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
8: Ajax验证

用remote可以进行Ajax验证
remote: {
url: "url", //url地址
type: "post", //发送方式
dataType: "json", //数据格式 data: { //要传递的数据
username: function() {
return $("#username").val();
}}
}

补充: jQuery Validation插件remote验证方式的Bug
https://3water.com/article/24079.htm

下一章是API的具体说明
然后整理怎么进一步自定义jQuery.validate以及网上一些常用的验证代码

Javascript 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
jquery 新浪网易的评论块制作
Jul 01 #Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 #Javascript
jQuery ajax cache缓存问题
Jul 01 #Javascript
javascript 实用的文字链提示框效果
Jun 30 #Javascript
一个简单的js鼠标划过切换效果
Jun 30 #Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 #Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
解决PyCharm中光标变粗的问题
2017/08/05 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Sony C++笔试题
2013/03/10 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
1000字打架检讨书
2014/11/03 职场文书
中班上学期个人总结
2015/02/12 职场文书
大学学生个人总结
2015/02/15 职场文书
2015年防汛工作总结
2015/05/15 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS