最快速的表单验证框架 RapidValidation

最快速的表单验证框架 RapidValidation

【转载】原网址：http://wiki.javascud.org/display/si/Javascript_RapidValidation

主要特征

• 简洁,快速的验证语法
• 无需编写验证提示信息(当然也支持自定义提示信息)
• 支持组合验证
• Ajax支持
• 错误消息在指定地方显示
• 基于prototype.js
• 支持国际化
• 易于扩展
• 基于标准的Html属性(class)添加验证,易于其它标准的jsp taglib集成
• 特殊应用场景支持,如:密码确认,结束日期必须大于开始日期

支持浏览器

• IE 5.x 以上
• Mozilla 1.4 以上
• FireFox 0.9 以上
• Opera 8.5 测试通过

helloworld示例

引用文件

<script src="prototype.js"
 type="text/javascript"
>
</script>

<script src="validation_cn.js"
 type="text/javascript"
>
</script>

<link rel="stylesheet"
 type="text/css"
 href="style_min.css"
/>

• prototype.js是所有的基础
• validation_cn.js真正的验证框架文件
• 可以添加style_min.css中的样式声明,也可以把style_min.css中的样式声明引入到你的框架js文件中去.

表单验证

<!-- 为form增加required-validate class,标识需要验证form -->


<form id='helloworld' action="#"
 class='required-validate'>

	helloworld:</br>

	<!--通过class添加验证: required表示不能为空,min-length-15表示最小长度为15 -->


	<textarea name='content' class='required min-length-15'>
</textarea>
</br>

	<input type='submit' value='Submit'/>
 
	<input type='reset' value='Reset'/>

</form>

• 要是某个form中的元素被验证可以这样给声明的form中加一个class='required-validate'的属性,框架会在load是自动绑定所有要验证的域.
• 在要检查的域中通过class属性来声明被检查域的限制条件,例如上面的class='required min-length-15'表示这是一个非空,并且最小长度是15的域,在编辑域失去焦点时,会自动检查,如果输入不满足上述条件,则产生错误提示.

验证效果

 

检查规则

验证表达式	描述	示例
required	非空域,全部空格也算空
validate-number	一个有效数
validate-digits	只能包含[0-9] 任意个数字
validate-alpha	只能是字母[a-zA-Z]
validate-alphanum	只能是字母和数字的组合
validate-email	只能是有效的email
validate-url	只能是有效的url地址
validate-one-required	至少有一个被选中,例如一组checkbox, radiobutton,它们最好包含在一个div和span中
validate-integer	只能是整数,可以有正负号
validate-ip	有效的IP地址
min-length-$number	最小长度是$number (此处$some表示一个特定的值)	最小长度为8: min-length-8
max-length-$number	最大长度是$number	最大长度为8: max-length-8
max-value-$number	输入域的最大值是$number	最大值为8.1: max-value-8.1
min-value-$number	输入域的最小值是$number	最大值为-8.1: max-value--8.1
equals-$otherInputId	必须和某个input field相等,用于密码两次输入验证	equals-password
less-than-$otherInputId	小于某个input field less-than-otherInputId,多用于结束日期不能小于开始日期的需求
great-than-$otherInputId	大于某个input field less-than-otherInputId
validate-date-$dateFormat	只能是日期,$dateFormat为日期格式,$dateFormat的可选,默认格式为yyyy-MM-DD	validate-date-yyyy年MM月dd日
validate-file-$type1-$type2-$typeX	验证文件输入域选择的文件类型只能为声明的$type1 – $typeX中的一种	validate-file-png-jpeg
float-range-$minValue-$maxValue	必须是$minValue到$maxValue的一个浮点数	1至20: float-range-1-20
int-range-$minValue-$maxValue	必须是$minValue到$maxValue的一个整数
length-range-$minLength-$maxLength	输入字符串的长度必须在$minLength到$maxLength之间
validate-pattern-$RegExp	通过自定义正则表达式$RegExp来验证输入域的正确性	vaidate-pattern-/a/gi
validate-ajax-$url	通过ajax来验证输入域,$url为ajax验证提交的地址,错误提示信息将由服务器端返回. 数据示例 <input name="username" value="badqiu" /> ,提交数据为:username =badqiu&what =username&value =badqiu what为input的name,value为input的value	validate-ajax-http://localhost/valiate-email.jsp
validate-selection	用于下拉列表框验证
validate-chinese	只能是中文(以下为中国的相关验证)
validate-phone	有效的电话
validate-mobile-phone	有效的手机号
validate-id-number	验证是否有效的身份证号码
validate-zip	验证邮政编码
validate-qq	验证QQ号码

在指定地方显示错误消息

• 在html页面中如果发现advice-$inputId的div,则错误消息的显示内容会显示在div中间
• 例子:

  <input name="age"
   type="text"
   class="required min-value-18"
  />
  年龄
  <div id="advice-age"
   style="display:none"
   class="validation-advice"
  >
  </div>
  

  效果
  
  

编程式为表单增加验证(Validation选项)

• 可以手工指定要验证那个form,在指定是可以给定一些选项

  <script type="text/javascript"
  >
  
  	var valid = new Validation('form-id', {onSubmit:false});
           // do something ...
           var result = valid.validate();
  </script>
  

创建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

添加自己的Validator测试函数

增加Validator

/*参数说明
 * v: 为需要测试的值
 * elm: 为html input
 * args: 为有参数的验证表达式传递的参数,如min-length-10,则args[0]为10
 * metadata: 为Validator本身
*/
Validation.add(['max-value',function
(v,elm,args,metadata) {
		return
 parseFloat(v) <= parseFloat(args[0]);
	},{depends : ['validate-number']}],
});
/*
 * 增加验证出错的提示信息
 */
Validator.messagesSourceCn = [
['max-value' , '最大值为%s'],
]

Validator的选项:

depends – 为validator的之间的内部依赖
ignoreEmptyValue – 表明validator是否忽略空值不进行测试

FAQs

1. 我的网站现在使用的是UTF-8编码,怎么使用validation_cn.js显示中文会乱码?
   答:validation_cn.js默认是使用GBK编码,使用可以改变文件编码的编辑器以UTF-8编码方式再保存,如保存为validation_cn_UTF-8.js
2. 国际化怎么办?
   答:动态修改Validator.messageSource即可
3. 日期之间的比较怎么办,如结束日期要大于开始日期
   答:先使用validate-date验证输入的值是合法的日期,再加上"less-than"的比较即可
4. prototype.js兼容性问题
   答:一般是prototype.js与effect.js的兼容性问题,让其两者兼容即可,与validation_cn.js无关
5. 在IE中提示"Unterminated string constant"或是"末结束的字符串常量"错误
   答: 是由于你网页的编码问题,validation_cn.js默认是GBK编码,请转换成与你的网页想适应的编码

引用

http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype/

Authors

badqiu
Ivan Li

Comments  (Hide )

一直在使用原版的WForms的验证架构，也修改过的不足之处，今天发现国人也要开始写他了，支持他。

建议用插件的方式加入:提示信息的自定义和位置的自定义性。

可以的话我也找点时间加入这个开源项目

Posted by Anonymous at Jul 24, 2008 17:50 | Reply To This

哈,这个东西写了好久啦,老外最初都是从这个项目借签的.灵感不错.

Posted by badqiu at Aug 03, 2008 18:26 | Reply To This

这个以前项目中用过。
1.工作量大，维护困难，与开发语言无关，其实还是hibernate validator 之类比较实用。
2.性能低下，它会在加载页面后，扫描整个页面文件，页面大的话难以忍受。

Posted by Anonymous at Oct 08, 2008 00:28 | Reply To This

原来项目用过这个 感觉还不错

Posted by Anonymous at Dec 19, 2008 21:06 | Reply To This