# RapidValidation

**Repository Path**: codepiano/rapidvalidation

## Basic Information

- **Project Name**: RapidValidation
- **Description**: 一个前端校验框架，将框架的库依赖由prototype.js替换成了jQuery
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2013-06-14
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

RapidValidation
======

该项目是由baiqiu编写的RapidValidation校验框架

原始作者:
------

>modified by badqiu (badqiu(a)gmail.com)

>blog: http://badqiu.javaeye.com

>Project Home: http://code.google.com/p/rapid-validation/

>Rapid Framework Project Home: http://code.google.com/p/rapid-framework/

>Version 1.5.1

框架原始的依赖是prototype.js

为了以后维护和改造,将库的依赖替换成了jQuery

目前已完成了基本功能的改造,去掉了tooltip和effect

使用说明:
------

引用文件:

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

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

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

	jquery.js 是所有的基础 请先引入jquery1.4+文件

	validation_cn.js 真正的验证框架文件

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

为表单添加校验的方式:

	1.为 form 增加required-validate的class属性,标识需要验证的form,校验框架将使用默认的选项设置

	  eg:

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

	2.初始化校验对象,传入表单元素,传入可选的选项设置对象

	  传入表单元素的方式由三种:通过jquery获取的form对象、通过dom获取的form对象、form的id

	  eg:

	  new Validation($('#form-id'));

	  或

	  new Validation(document.form[0]);

	  或

	  new Validation('form-id');
	  传入校验选项设置

	  eg:

		new Validation(

				document.forms[0],

				{

					onSubmit : true, //是否监听form的submit事件

					onReset : true, //是否监听form的reset事件

					stopOnFirst : false, //表单验证时停留在第一个验证的地方,不继续验证下去

					immediate : false, //是否实时检查数据的合法性

					focusOnError : true, //是否出错时将光标指针移到出错的输入框上

					useTitles : false, //是否使用input的title属性作为出错时的提示信息

					onFormValidate : function(result, form) {return result;},//Form验证时的回调函数,可以修改最终的返回结果

					onElementValidate : function(result, elm) {} //某个input验证时的回调函数

				}

		});

为表单添加校验项:

	在需要进行校验的表单后面指定相应的校验class属性

	eg:

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

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

在指定地方显示错误消息:

	默认情况下,错误消息会显示在校验的表单输入框的后面

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

	自定义一个div标签,class为'validation-advice',

	id为'advice-校验对应的class的名字-对应的校验表单元素id'或者'advice-对应的校验表单元素id'

	例如<input type="text" id="test" class="required"/>

	如果html页面中有如下div标签,<div id="advice-required-test" class="validation-advice" ></div>

	或<div id="advice-test" class="validation-advice" ></div>

	错误信息会被显示到该div中

是否忽略空值和校验依赖:

	ValidatorDefaultOptions.prototype = {

		ignoreEmptyValue : true, //是否忽略空值

		depends : [ ] //相关依赖项

	}

	ignoreEmptyValue:输入框为空值时是否进行校验

	depends:必须先通过依赖校验,才能继续进行校验

	比如校验一个输入框内是否为整数且是否在一个整数范围内

	int-range',function(v,elm,args,metadata) {

		//校验逻辑

		},{depends : ['validate-integer']}]

	在进行校验时,框架会先对输入框的值进行validate-integer校验,如果通过,再继续进行int-range的校验

AJAX校验:

	1.不需要回调,并且只需要提交校验元素值的ajax校验:

	  必需为class增加validate-ajax-validateUrl的值

	  validateUrl为HTTP请求验证的URL,发送的请求会使用get方式提交当前绑定校验的表单元素的name=value对

	  如果服务器端返回非空字符串,将做为出错信息显示,空字符串则为成功

	  eg:

	    <input id='email' class='validate-ajax-http://localhost:8080/validate-email.jsp'>

	2.需要回调,并且只需要提交校验元素值的ajax校验:

	  必需为class增加validate-ajax-responseJudge-validateUrl的值

	  validateUrl为HTTP请求验证的URL,发送的请求会使用get方式提交当前绑定校验的表单元素的name=value字符串

	  对应的回调函数需事先绑定在Validator.callBack对象中,绑定形式为Validator.callBack[进行ajax校验的标签id] = 回调函数的引用

	  eg:

		为id为example并且进行ajax校验的元素绑定了回调函数callbackFunction

	    Validator.callBack['example'] = callbackFunction;

	    <input id='email' class='validate-ajax-responseJudge-http://localhost:8080/validate-email.jsp'>

	  请求结束后分以下三种情况进行处理:

	  1).如果返回值不为空且以'error:'开头,则返回的为错误信息,截取错误信息的正文,在Validator.callBack中寻找绑定的回调函数

	     将返回值作为参数调用回调函数,获取回调函数的返回结果,然后由框架进行错误信息的显示流程

	  2).如果返回值不为空且不以'error:'开头,则返回的是需要获取的数据,根据elm的id值,在Validator.callBack中寻找绑定的回调函数

	     将返回值作为参数调用回调函数,获取回调函数的返回结果,然后由框架进行错误信息的显示流程

	  3).如果返回值为空,则说明校验通过且没有返回数据

	3.需要回调,并且需要提交多个表单元素的值的ajax校验:

	  必需为class增加validate-ajax-responseJudge-multiParams-validateUrl的值

	  validateUrl为HTTP请求验证的URL,发送的请求会使用get方式提交标示的表单元素的name=value字符串

	  对应的回调函数需事先绑定在Validator.callBack对象中,绑定形式为Validator.callBack[进行ajax校验的标签id] = 回调函数的引用

	  eg:

		为id为example并且进行ajax校验的元素绑定了回调函数callbackFunction

	    Validator.callBack['example'] = callbackFunction;  

	    <input id='email' class='validate-ajax-responseJudge-http://localhost:8080/validate-email.jsp-id1-id2-id3'>

	  请求结束后的处理情况同2中的逻辑

自定义校验:

	可以在页面上添加自定义校验

	eg:

 	  Validator.messageSource['zh-cn'].push(['test-test','error message']); 
	  
	  第一个参数是校验名,即class属性的值,第二个参数是校验失败显示的错误信息

	  Validation.add('test-test',validateFunc); 
	  
	  第一个参数是校验名,第二个参数是进行校验的函数的引用,第三个参数是validator的选项,可以不填

	  在页面上即可使用该自定义校验,调用validateFunc进行校验,如果校验失败,则显示字符串error message

	  <textarea name='content' class='test-test'></textarea>

表单的提交方式:

	如果使用静态提交方式,即<input type="submit" />,可以正常进行提交事件的捕获

	如果使用动态提交,例如<input type="button" onclick="fireSubmit()" />,在fireSubmit函数中提交表单
	
	则提交方式必须调用jQuery的submit()方法,否则将无法校验表单

TODO
------

1. 修复过时正则校验逻辑

2. 增加新的自定义校验

3. 可能会添加Tooltip功能

4. 可能会添加Effect

BUGFIX
------

1. Validation中的get函数根据用户指定的class的值获取对应的校验函数

   在处理能传参数的校验时，在class值上调用indexOf函数，循环校验函数数组，以校验函数的name为参数

   如果indexOf函数的返回值大于等于0则认为该函数即为class对应的校验函数，但是循环不退出

   所以原始逻辑获取的是在包含在class值中的最后一个匹配

   这样如果class后拼接的参数中与其他校验重名的话会出现返回错误校验函数的bug

   用户自定义校验也可能引发该问题

   目前修复为校验名从0开始匹配class值并且最早出现的最长匹配