2010.08.19——— 我佛山人 validator v4.0 详解
首先,大致介绍一下:
1. 引入js和css
<link href="css/validator.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/mootools.js" ></script>
<script type="text/javascript" src="js/full-validator.js" ></script>
2. 写法的大体框架
Validator.setup({
form : 'demo',
configs : 'xml,attribute,tag,json',
warns : 'summary, follow, color,class, alert,tips'
})
2.1 form 后面跟的是form标签的id
<form action="my_action_page_url" id="demo">
... ...
</form>
2.2 configs 指定表单验证规则的配置方式 默认为tag 一共有四种
对了 在这里先介绍一下验证的一些属性
for:指定需要此验证的id
rule:指定验证的类型(username,password,email,IdCard 身份证,ip,date,range 范围,qq,mobile等等)
empty:为空时的提示
warn:不符合验证规则的提示
tips:tips或者follow的内容
pass:验证成功显示的内容
2.2.1 xml xml的方式验证
当configs指定为xml方式验证时,可以设置一个xml的属性
Validator.setup({
form : 'demo', //指定要验证的表单的id
configs : 'xml',//指定表单验证规则的配置方式
xml : {
url : 'my_dir/xml_file_name.xml' //指定XML文件的路径
}
});
xml属性里面可以配置路径和xpath 详见chm文档的"使用XML文件配置"和XmlReader
xml的格式如下:
<?xml version="1.0" encoding="UTF-8"?>
<formset>
<form name="demo" path="/validator/validator.html">
<item for="IPAddress" rule="date" empty="请填写您的出生年月日" warn="您输入的日期不存在或格式不正确" tips="请输入一
次您的出生年月日(格式:1980-01-01)" pass="验证正确了" />
</form>
</formset>
2.2.2 attribute attribute的方式验证
当configs指定为attribute方式验证时
Validator.setup({
form : 'demo', //指定要验证的表单的id
configs : 'attribute' //指定表单验证规则的配置方式
});
详见chm文档的"使用属性配置"和AttributeReader
2.2.3 tag tag的方式验证
当configs指定为tag方式验证时,可以设置一个tag的属性
Validator.setup({
form : 'demo', //指定要验证的表单的id
configs : 'tag', //指定表单验证规则的配置方式
tag : { ns : 'my', name : 'tag'} //name:自定义标签的名字 默认v,ns:自定义标签的命名空间 默认ui
});
tag属性里面可以name和ns 详见chm文档的"使用自定义标签配置"和TagReader
tag的格式如下:
<input id="IPAddress" name="IPAddress" type="text" value="192.168.128.254" /><ui:v for="IPAddress" rule="ip" empty="请填写您
的当前IP地址" warn="您输入的IP不存在或格式不正确" pass="验证正确了" />
2.2.4 json json的方式验证
当configs指定为json方式验证时,可以设置一个xml的属性
Validator.setup({
form : 'demo', //指定要验证的表单的id
configs : 'json', //指定表单验证规则的配置方式
json : {
url : 'my_dir/json_file_name.xml' //指定JSON文件的路径
}
});
json属性里面可以配置wait,utl和type 详见chm文档的"使用JSON数据件配置"和JsonReader
json的格式如下:
{"rules" : [{"for":"Card", "rule":"IdCard", "empty":"号码不允许为空", "warn":"号码不正确", "tips":"请输入15位或18位的身份
证", "pass":"验证正确"},{"for":"Name", "rule":"username", "empty":"不允许为空", "warn":"验证错误", "tips":"昵称是由英文与下
划线组成的4~20位的字符", "pass":"验证正确", "require" : "false"},{"for":"Password", "rule":"password", "level":"2",
"empty":"密码不允许为空", "warn":"密码安全度太低", "tips":"请输入6~16位数字、字母及特殊字符的混合字符", "pass":"验证正确"}]}
2.3 warns 信息的显示方式,默认为跟随方式follow 一共有6种
2.3.1 alert 用alert显示错误信息
Validator.setup({
form : 'demo', //指定要验证的表单的id
warns : 'alert', //指定表单验证的信息显示方式
title : '提交失败,请按以下提示检查您的输入:' //用显示整个表单验证的所有失败信息的第一行提示
});
title : 当warns中使用summary或alert时,提供的第一行内容提示
详见chm文档的"使用警告信息提示"和AlertMessenger
2.3.2 follow 用跟随方式显示错误信息
Validator.setup({
form : 'demo', //指定要验证的表单的id
warns : 'follow' //指定表单验证的信息显示方式
follow : {
warn : 'msg block', //验证失败时的样式
tips : 'msg tips', //提示信息的样式
remote : 'msg loading',//远程验证时的样式
pass : 'msg pass', //验证成功时的样式
blur : 'msg' //失去焦点时的提示样式
}
});
follow属性主要用来修改默认的css类名
详见chm文档的"使用跟随信息提示"和FollowMessenger
2.3.3 tips 用浮动框显示错误信息
Validator.setup({
form : 'demo', //指定要验证的表单的id
warns : 'tips' //指定表单验证的信息显示方式
tips : {
offset : {
x : 0, //浮动层左下角相对于表单项左上角的横坐标偏移量
y : 0 //浮动层左下角相对于表单项左上角的纵坐标偏移量
},
'class' : 'tooltips' //浮动层使用的CSS类名,注意class前后必须带引号
}
});
详见chm文档的"使用浮动信息提示"和TipsMessenger
2.3.3 class 用class样式显示错误信息
Validator.setup({
form : 'demo', //指定要验证的表单的id
warns : 'class' //指定表单验证的信息显示方式
'class' : {
warn : 'style-warn', //指定验证失败时使用的CSS类
pass : 'style-pass' //指定验证成功时使用的CSS类
}
});
详见chm文档的"使用样式信息提示"和ClassMessenger
2.3.3 color 用颜色样式显示错误信息
Validator.setup({
form : 'demo', //指定要验证的表单的id
warns : 'color' //指定表单验证的信息显示方式
color : {
warn : 'yellow', //指定验证失败时文字变成黄色
pass : 'black' //指定验证成功时文字变成黑色
}
});
详见chm文档的"使用颜色信息提示"和ColorMessenger
2.3.3 summary 用汇总显示错误信息
Validator.setup({
form : 'demo', //指定要验证的表单的id
warns : 'summary',//指定表单验证规则的信息显示方式
summary : {
id : 'summary', //指定汇总信息显示到的HTML Element的id <div id="summary" class="summary"></div>
},
title : '提交失败,请按以下提示检查您的输入:' //用于显示汇总信息的第一行提示
});
汇总信息显示方式只显示验证失败项的失败信息,为了得到更丰富的信息,您可以与浮动提示方式一起使用
详见chm文档的"使用汇总信息提示"和SummaryMessenger
分享到:
相关推荐
表单验证 Validator v4.0 表单的验证一直是Web开发头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于UI设计与业务逻辑上。 Validator早期...
表单验证Validator V4.0(html文件),表单验证Validator V4.0(html文件)
Mootools 表单验证插件 validator v4.0.zip
表单验证 Validator v4.0 表单的验证一直是Web开发头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于UI设计与业务逻辑上。 Validator早期版本...
我佛山人框架 我佛山人框架 我佛山人框架 我佛山人框架 我佛山人框架
支持Ajax验证,实现密码安全度等级验证及显示,5种配置方式,6种消息提示模式,能避免网络原因未完全下载validator.js时提交未经验证表单,避免变量名冲突 。已内含详细的帮助说明文档。
Validator v4.0考虑了绝大多数情况下的应用可能,几乎能“应对千变万化的业务规则”,集成4种常见的信息表现方式,5种验证规则的配置途径,并且多种信息表现方式与多个验证规则的配置途径可以安全共存,“和谐”一体...
很好用的表单通用验证。不过有时一个文本框里有默认文本是,验证就会达不到效果。 于是增加属性:allowDefaultValue:是否允许默认值通过验证 默认...附:详细的我佛山人使用说明 欢迎访问我的博客:www.selectersky.cn
表单验证Validator v4.0代码生成工具实在太好用啦,做表单验证的时候只要打开这个工具,勾上需要验证的属性一点生成按钮就可以把表单验证Validator v4.0代码生成,这样的话就可以僻免写错代码啦....
1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1
4.0 功能特点 1.支持Ajax验证 2.实现密码安全度等级验证及显示 3.5种配置方式 4.6种消息提示模式 5.能避免网络原因未完全下载validator.js时提交未经验证表单的 6.避免变量名冲突 7.详细的帮助说明文档 8. ...
NULL 博文链接:https://zxh277100963.iteye.com/blog/720738
Validator v4.0考虑了绝大多数情况下的应用可能,几乎能“应对千变万化的业务规则”,集成4种常见的信息表现方式,5种验证规则的配置途径,并且多种信息表现方式与多个验证规则的配置途径可以安全共存,“和谐”一体...
我佛山人Validator常用的js文件,包含js源码和示例程序~
我佛山人Validator3.0 不错的js验证类,很好用的
NULL 博文链接:https://nassir.iteye.com/blog/1112713
JSON Schema 校验库——json-schema-validator(java版本).rar
这个Demo示范了怎么通过Spring的Validator接口来进行数据验证,包括Validator的复用、jsp错误信息的展示等。可参考本人博客: http://blog.csdn.net/oLanMoMo/article/details/50530352
hibernate-validator.jarhibernate-validator.jarhibernate-validator.jarhibernate-validator.jar