2006-12-04

一个基于prototype的通用的web验证框架使用详解

原作网址:http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype
扩展:badqiu (badqiu@gmail.com)
使用说明整理:Ivan Li (http://ivanl.javaeye.com)
1:引用js文件
js 代码
 
  1. "prototype.js" type="text/javascript">  
  2. "validation.js" type="text/javascript">  

prototype.js是所有的基础
validation.js真正的验证框架文件,badqiu在原来的基础上增加了许多不错的功能.

2:引用css文件

可以参加style_min.css中的样式声明,也可以把style_min.css中的样式声明引入到你的框架js文件中去.

3:hellow world
在badqiu的扩展中如果要是某个form中的元素被验证可以这样给声明的form中加一个class='required-validate'的属性,框架会在load是自动绑定
所有要验证的域.
   
xml 代码
 
  1.   
  2.     <form id='helloworld' action="#" class='required-validate'>  
  3.         helloworld:br>  
  4.           
  5.         <textarea name='content' class='required min-length-2'>textarea>br>  
  6.         <input type='submit' value='Submit'/>  
  7.         <input type='reset' value='Reset'/>  
  8.     form>  

在要检查的域中通过class属性来声明被检查域的限制条件,例如上面的class='required min-length-2'表示这是一个非空,并且最小长度是2的域,
在编辑域失去焦点时,会自动检查,如果输入不满足上述条件,则产生错误提示.

4:检查规则说明
  • required -- 非空域
  • validate-number -- 一个有效数
  • validate-digits -- 只能包含[0-9]任意个数字
  • validate-alpha -- 只能是字母[a-zA-Z]
  • validate-alphanum -- 只能是字母和数字的组合
  • validate-date -- 只能是日期
  • validate-email -- 只能是有效的email
  • validate-url -- 只能是有效的url地址
  • validate-date-au -- 日期的形式必须是dd/mm/yyyy
  • validate-one-required -- 至少有一个被选中,例如一组checkbox, radiobutton,它们最好包含在一个div和span中
  • validate-date-cn -- 日期的形式必须是yyyy/mm/dd
  • validate-integer -- 只能是整数,可以有正负号
  • validate-chinese -- 只能是中文
  • validate-ip -- 有效的IP地址
  • validate-phone -- 有效的电话(仅适用于中国)
  • validate-mobile-phone -- 有效的手机号,在badqiu的版本中只验证了135的,有待改进
  • validate-equals-$otherInputId -- 必须和某个input field相等例如 validate-equals-otherInputId(此处$some表示一个特定的值)
  • less-than-$otherInputId -- 小于某个input field less-than-otherInputId(此处$some表示一个特定的值)
  • great-than-$otherInputId -- 大于某个input field less-than-otherInputId(此处$some表示一个特定的值)
  • min-length-$number -- 最小长度是$number(此处$some表示一个特定的值)
  • max-length-$number -- 最大长度是$number(此处$some表示一个特定的值)
  • validate-file-$type1-$type2-$typeX -- file的input必须是声明的$type1 -- $typeX中的一种
  • validate-float-range-$minValue-$maxValue -- 必须是$minValue到$maxValue的一个浮点数
  • validate-int-range-$minValue-$maxValue -- 必须是$minValue到$maxValue的一个整数
  • validate-length-range-$minLength-$maxLength -- 输入字符串的长度必须在$minLength到$maxLength之间
  • max-value-$number -- 输入域的最大值是$number
  • min-value-$number -- 输入域的最小值是$number
  • validate-pattern-$patternAttributes -- 通过自定义pattern来验证输入域的正确性
  • validate-ajax -- 通过ajax来验证输入域 ,例如

5:Validation的选项说明
可以手工指定要验证那个form,在指定是可以给定一些选项
js 代码
 
  1. "text/javascript">  
  2.     var valid = new Validation('form-id', {onSubmit:false});  
  3.     var result = valid.validate();  
  4.   

创建Valuedation是的参数说明
onSubmit -- 是否绑定onSubmit函数, default - true
stopOnFirst -- 是否在检查到第一个错误时就停止检查 default- false
immediate -- 是否在被检测域失去焦点时就检查被检查域 default - false
focusOnError -- 是否把焦点移动到发生错误的域上 default - true
useTitles -- 是否使用提示 default - false
onFormValidate:当form被检测和的回调函数,有两个输入参数 arg[0]-检测form的结果true or false, arg[1]-form本身的id
onElementValidate:当没个element被检查后的回调函数,有两个输入参数 arg[0]-检测form的结果true or false, arg[1]-element本身的id

6:添加自己的测试函数
js 代码
 
  1. Validation.add('class-name', 'Error message text', function(value [, element]) {  
  2.      return /* do validation here */  
  3. });  


或者这样
js 代码
 
  1. Validation.addAllThese([  
  2.      ['required', 'This is a required field.', function(v) {  
  3.        return !Validation.get('IsEmpty').test(v);  
  4.      }],  
  5.      ['validate-number', 'Please use numbers only in this field.', function(v) {  
  6.        return Validation.get('IsEmpty').test(v) || !isNaN(v);  
  7.      }],  
  8.      ['validate-digits', 'Please use numbers only in this field.', function(v) {  
  9.        return Validation.get('IsEmpty').test(v) ||  !/[^\d]/.test(v);  
  10.      }]  
  11. ]);   
评论
hax 2007-05-31   回复
使用class的这种思路非常不好！！！

我认为这是class的滥用。如果需要这样的功能，应该用自定义属性（现在浏览器都支持的）。


我认为现在比较好的方式是去实现WebApp1规范（未来的html5规范）所作的扩展。
netlzh 2007-05-31   回复
可以限制一个域输入的值大于或者小于另外一个域，能否做到大于等于和小于等于呢？
jianfeng008cn 2006-12-15   回复

这个框架的优点在于利用了elm的classname 可以把验证的规则 验证的结果和样式结合起来，

而且可以自动生成提示信息，我按照自己的思路重新实现了一遍，并使其支持radio checkbox select 的验证

在使用上我可以达到我前面那个扩展了的验证框架（myvalidator）同样的效果

（可以把需要验证的form form元素以及验证规则都通过js来注入，而不需要处理html代码 ，因为是时间关系现在没有做Demo,目前代码也没有重新调整下，还可以精简很多的）

不过不知道为什么大家都没什么意见。

http://www.javaeye.com/topic/38717

white182517 2006-12-15   回复

这个验证框架利用了OO思想，但是感觉使用起来过于复杂，主要是关于验证规则的描述部分。上述的设计只在具体的验证规则层面进行了抽象，但是和验证表现逻辑进行了紧耦合，个人以为还是我的设计使用起来更简洁  ：

www.javaeye.com/topic/32983

www.javaeye.com/post/178969

Ivan Li 2006-12-15   回复
使用这个版本的时候很可能还要加一些自己的js check，比如几个域的依赖等等
可以这样加入自己的js check
1：把input type='submit'换成 button
2: onclick = 'inputCheck()'
function inputCheck()
	{
		//your own js check code
		if(Validation.$('mainForm').validate())
		{
			$('mainForm').submit();
		}
	}

就可以了
yangyundu 2006-12-07   回复
谢谢 收藏！
simbasun 2006-12-06   回复
好..藏之～
Tin 2006-12-06   回复
nice!这个东西的侵入性相当小。工程里面的unittest很有意思，js项目有单元测试很爽呀。
badqiu 2006-12-05   回复
谢谢你的总结,不错
超级潜水员 2006-12-04   回复
不错,赞一个!!
guoshiguan 2006-12-04   回复
这种方式好，
我在做struts的ajax时，也用使用过class来做这种批配，就是不知在控件很多的性况下会不会出现性能问题
发表评论

该博客是同时发布到论坛的，无法评论在论坛已被锁定的帖子

Ivan Li
搜索本博客
最近加入圈子
存档
最新评论