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的事件描述
Sep 08 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 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
phpmyadmin操作流程
2006/10/09 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python模块 _winreg操作注册表
2020/02/05 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Python hashlib模块的使用示例
2020/10/09 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
商场圣诞节活动总结
2015/05/06 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书