jQuery Tools Validator 表单验证插件工具用法详解
2014-01-09 09:20
916 查看
网页中经常需要用到表单验证功能,以往需要写大量的代码来验证表单字段,而jQuery Tools提供了一套方便的表单验证工具,熟悉之后可以节省大量的开发时间。一、validator基本使用方法
jQuery Tools validator插件为input元素新增了几种类型:email、number、url,将自动按照电子邮件格式,整数格式和URL格式来验证input输入框,同时还支持max,min,pattern,required属性,这些都是HTML5标准的属性和类型,即使浏览器不支持HTML5,jQuery tools validator也会自动识别。
示例:定义简单验证规则
二、validator配置参数详解
示例:初始化validator并传入配置参数
以上代码定义了一系列语种名称为'cn'的默认错误提示信息。如果仅需要对某些单独的字段设置多语种版本,可以使用以下方法
远程AJAX返回错误信息的话需要使用JSON格式,如下:
七、Validator的API方法调用
使用方法:
jQuery Tools validator插件为input元素新增了几种类型:email、number、url,将自动按照电子邮件格式,整数格式和URL格式来验证input输入框,同时还支持max,min,pattern,required属性,这些都是HTML5标准的属性和类型,即使浏览器不支持HTML5,jQuery tools validator也会自动识别。
示例:定义简单验证规则
$("input[name='email']").validator();
二、validator配置参数详解
属性 | 默认值 | 说明 |
---|---|---|
effect | 'default' | 错误消息显示效果 |
errorClass | 'invalid' | 验证失败时给表单元素添加一个醒目的样式 |
errorInputEvent | 'keyup' | 当验证有错误(处于错误状态中),触发单项验证的事件名称,还可以使用change,blur 或 null |
formEvent | 'submit' | 表单整体验证时机,将对所有项目进行一次验证 |
grouped | false | 是否将多种错误合并显示. |
inputEvent | null | 正常状态下触发单项验证的事件名称,优先级低于errorInputEvent,也就是说当发生错误时,优先执行errorInputEvent而忽略本项,还可以使用change,blur 或 null |
lang | 'en' | 错误信息语种 |
message | '<div/> | 错误信息的外部元素 |
messageAttr | 'data-message' | 错误信息属性名称,如果给表单元素添加了此属性,则发生错误时显示此属性的值 |
messageClass | 'error' | 错误信息的CSS样式 |
offset | [0, 0] | 错误信息显示位置的偏移量 |
position | 'center right' | 错误信息显示位置,默认在表单元素右侧,上下居中 |
singleError | false | 是否每次只显示一个错误信息 |
speed | 'normal | 错误信息渐显速度 |
cript" > $("form.vali").validator({ messageClass:"yellow", position:"bottom left", errorClass:"errorClass" });三、定义默认错误提示
cript" > $.tools.validator.localize("cn", { ':email' : '请输入电子邮件地址', ':number' : '请输入整数', '[max]' : '做多可以输入$1个字符', '[min]' : '请至少输入$1个字符', '[required]' : '该项为必填项目!' }); $("#myForm").validator({lang: 'cn'});
以上代码定义了一系列语种名称为'cn'的默认错误提示信息。如果仅需要对某些单独的字段设置多语种版本,可以使用以下方法
cript" > $.tools.validator.localizeFn("[type=time]", { en: 'Please supply a valid time', cn: '请输入正确的时间格式' });四、自定义验证规则
cript" >五、使用服务端远程ajax验证
//简单用法
$.tools.validator.fn("[type=time]", function(el, value) {
return /\d\d:\d\d/.test(value) ? true : "错误的事件格式";
});
//高级用法
$.tools.validator.fn(
"[type=range]",
"请输入介于 $1 至 $2 之间的值",
function(el, v) {
// 获取min属性和max属性的值
var min = el.attr("min"), max = el.attr("max"), value = parseFloat(v);
// 如果符合规则返回true,否则返回一个对象,可用于错误提示中替换占位符
return value >= min && value < max true min maxbr> }
);
//高级用法2
$.tools.validator.fn(
// 第一个参数用于检测是否适用本验证规则,如果匹配则返回true
function() {
return $(this).parents("form.register").length > 0;
// 第二个参数为验证函数
}, function(el, v) {
// 如果验证通过则返回true
return true;
}
);//高级用法3// 定义匹配函数
function myMatcher() {
return $(this).parents("form.register").length > 0;
}// 作用对象
myMatcher.key = "register-input";// 使用指定的匹配函数
$.tools.validator.fn(myMatcher, "请填写正确的值", function(el, v) {
// 验证通过返回true
return true;
});
cript" >
// 初始化 validator 并自定义的表单提交事件处理办法
$("#myform").validator({ position: 'center right' }).submit(function(e) {var form = $(this);// 客户端验证已通过的情况下再使用远程验证
if (!e.isDefaultPrevented()) {// 使用AJAX提交表单数据,你也可以使用post或其他方式提交表单
$.getJSON(form.attr("action") + "?" + form.serialize(), function(json) {
// 远程验证通过时返回true
if (json === true) {
form.load("success.php");//具体成功后怎么处理随你
} else {
// 远程验证失败. 使用 invalidate() 显示错误信息
form.data("validator").invalidate(json);
}
});// 阻止表单提交事件冒泡,即表单事件到此处理完毕
e.preventDefault();
}
});
远程AJAX返回错误信息的话需要使用JSON格式,如下:
cript" > { "zip": "You must live in northern Finland in order to proceed", "total": "You gave us too much money! Please check" }六、使用自定义效果显示/隐藏错误信息
cript" >
// 定义名称为wall的效果
$.tools.validator.addEffect("wall",
function(errors, event) {// 显示方法
$.each(errors, function(index, error) {// 获取表单对象
var input = error.input;// 获取错误信息
var errors = error.messages;//剩下的你自己想怎么处理就在这里写代码
});}, function(inputs) {
// 隐藏方法,定义隐藏时的特效
}
);
七、Validator的API方法调用
方法 | 返回值类型 | 说明 |
---|---|---|
checkValidity() | boolean | 立即执行表单验证 |
destroy() | API | 销毁 validator 实例. |
getConf() | Object | 返回当前 validator 实例的参数配置. |
getForm() | jQuery | 返回表单对象 |
getInputs() | jQuery | 返回所有的input对象 |
invalidate(Object) | API | 强制显示错误信息,参数为JSON格式。主要用于从服务端接收到远程验证的错误后进行显示. |
reflow() | API | 修正错误信息的显示位置,因为错误信息是以绝对定位的方式显示的,有时候表单位置发生改变会导致错误信息显示的位置不正确,调用此函数进行修正。 |
reset(jQuery) | API | 重置"验证错误",如果参数为空,则重置所有字段;如果表单里有reset按钮,则会被自动添加这个功能。 |
$('#myform').data("validator").checkValidity();
相关文章推荐
- FireFox、Chrome不支持Jquery Tools Validator的解决方法
- jQueryTools Tab页使用方法
- jQueryTools Scrollable和通用轮播图片原理分析
- jQueryTools Scrollable详解
- jQuery-File-Upload图片上传组件简要使用指南(挥泪共享)
- 使用CDN加载Jquery等JS库
- jquery tools overlay 使用方法
- 浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
- jquery和javascript中将一元素的内容赋给另一元素
- jquery 输入框动态增减的代码
- jquery中美元符号命名冲突的解决办法
- jquery中美元符号命名冲突问题解决
- 在CodedUI中使用JQuery选择器
- 利用JQuery的$.ajax()调用asp.net的后台方法
- 浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
- js与jquery获取父元素,删除子元素的两种不同方法
- js与jquery获取父级元素,子级元素,兄弟元素的实现方法
- js/jquery解析json和数组格式的方法详解
- jquery实现鼠标拖动图片效果示例代码
- jQuery动态添加、删除元素的方法