| 行业类别 | 格式 | 大小 |
|---|---|---|
| Mac系统软件 | dmg | 3.7M |
描述
Total Validator Tool 这软件帮助你检查你的网页是否符合标准，结果将帮助你迅速地解决问题。这件检查工具有针对 W3C/ISO DTDs 的 (X)HTML 有效性，W3C WAI ，时间检查，坏链检查等。
jQuery Tools Validator 表单验证插件工具用法
网页中经常需要用到表单验证功能，以往需要写大量的代码来验证表单字段，而jQuery Tools提供了一套方便的表单验证工具，熟悉之后可以节省大量的开发时间。
一、validator基本使用方法
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 错误信息渐显速度
示例：初始化validator并传入配置参数
$("form.vali").validator({
messageClass:"yellow",
position:"bottom left",
errorClass:"errorClass"
});
三、定义默认错误提示
$.tools.validator.localize("cn", {
':email' : '请输入电子邮件地址',
':number' : '请输入整数',
'[max]' : '做多可以输入$1个字符',
'[min]' : '请至少输入$1个字符',
'[required]' : '该项为必填项目！'
});
$("#myForm").validator({lang: 'cn'});
以上代码定义了一系列语种名称为'cn'的默认错误提示信息。如果仅需要对某些单独的字段设置多语种版本，可以使用以下方法
$.tools.validator.localizeFn("[type=time]", {
en: 'Please supply a valid time',
cn: '请输入正确的时间格式'
});
四、自定义验证规则
//简单用法
$.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;
});
五、使用服务端远程ajax验证
// 初始化 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格式，如下：
{
"zip": "You must live in northern Finland in order to proceed",
"total": "You gave us too much money! Please check"
}
六、使用自定义效果显示/隐藏错误信息
// 定义名称为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();
文件信息
更新时间：2024-11-17
更新时间：2022-03-21
大小：3.7M
版本：V6.7.0 官方版
类型：Mac系统软件
平台：Mac
预览效果
相关搜索:
