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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
理解jQuery stop()方法
Nov 21 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
React如何实现浏览器打印部分内容详析
May 19 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
在PHP中操作Excel实例代码
2010/04/29 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
举例讲解Python装饰器
2020/12/24 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
个人先进事迹材料范文
2014/12/29 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
导游词之河北野三坡
2019/12/11 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
详解Spring事件发布与监听机制
2021/06/30 Java/Android
python对文档中元素删除,替换操作
2022/04/02 Python