验证框架jsValidation的使用

JSValidation是强大灵活的客户端验证框架。在应用服务器或者开发框架不提供验证的情况下，例如，普通的JSP, ASP, PHP等开发，以及一些不提供验证支持的开发框架，如Tapestry, Velocity等，JSValidation提供了一种灵活的解决方案。与其他验证方式相比，它最大的优点在于独立与易于集成。纯JavaScript 结构，可以很容易的集成到现有的应用中而不论现有的应用是基于什么语言。将所有的表单验证集中管理，使得维护应用更加容易。简便的XML配置，易于扩充的 验证方式（目前支持13种验证，囊括了大部分常用表单验证），使得JSValidation成为验证框架的首选。

 

下面简单介绍它的配置和使用：

1.下载配置文件（http://cosoft.org.cn/projects/jsvalidation 版本已经很老了但使用很方便基本的严重还是实现了）

 

2.在下载的文件里面有它自带的demo当然了我们要的文件也在这里面只需这三个：<1>、validation-config.dtd <2>、 validation-config.xml  <3>、validation-framework.js

 

3.将上面三个文件添加到我们的工程里面。这里我们在WebRoot根目录下新建一个js目录然后将这三复制到js目录下。

（需要注意到是：有时候会出现乱码问题，解决办法是:将这三个文件先UE里面另存为然后将编码方式改为UTF-8）

 

4.将其中的js文件链接到我们的jsp文件里面：

<script type="text/javascript" src="<%=basePath%>js/validation-framework.js"></script>

 

5.配置路径：如果上面三个文件放在WebRoot根目录下则无需配置这一项，这里我们放在WebRoot/js目录下所有要在：alison_V1/WebRoot/js/validation-framework.js文件里面修改：默认为空

var ValidationRoot = "/alison_V1/js/";

 

6.在form表单里面注册鼠标事件：

<form id="form1" method="post" action="XXX" onSubmit="return doValidate('form1')">

 

7.这里就是我们想要的显示效果了：jsValidationFremawork给我们提供了两种显示效果都在/WebRoot/js/validation-config.xml ：1>.和js一样以alert方式弹出个窗口、2>、显示在一个div里面.(个人比较喜欢后面一种)。先介绍alert方式：如果想要这种方式在jsp页面端没有什么配置，在validation-config.xml文件里面：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
	<form id="form1" show-error="alert" show-type="all">
		<field name="userName" display-name="用户名" onfail="">
			<depend name="required" />
			<depend name="commonChar" />
		</field>
	</form>
</validation-config>

 如果想以div方式显示出来则先在jsp页面里面想提示错误信息的地方加上一个div：

<td><div id="errorDiv" style="color:red;font-weight:bold"></div></td>

 然后在validation-config.xml文件里面 ：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
	<form id="form1" show-error="errorDiv" onfail="" show-type="first">
		<field name="userName" display-name="用户名" onfail="">
			<depend name="required" />
			<depend name="commonChar" />
		</field>
	</form>
</validation-config>

 这样我们的配置就好了。

 

JSValidation支持的13种验：

 

name	描述	参数含义
required	必须，代表这个域不能为空	无参数
integer:	没有或者必须为整数	无参数
double:	允许为空或者必须为double数	无参数
commonChar	普通英文字符：字母数字和下划线	无参数
chineseChar:	中文字符	无参数
minLength:	最小长度，	param0为最小长度数值
maxLength:	最大长度，	param0为最大长度数值
email:	必须为Email格式	无参数
date:	必须为日期格式，	param0必须为yyyy-mm-dd,或者三个占位符的任意排列顺序。连接字符任意如dd/mm/yyyy
mask:	允许自定义正则表达式来进行校验	param0为表达式字符串
integerRange:	整数范围必须在参数0和参数1之间。	param0和param1必须能被转化成整数
doubleRange:	double数的范围必须在参数0和参数1之间	参数0和参数1必须能被转化成Float。
equalsField:	必须与某一个域的值相等	param0：同一个表单中域的名称。例如用来校验密码

 

 

仅供参考：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
	<form id="form1" show-error="alert" show-type="all">
		<field name="username" display-name="用户名" onfail="">
			<depend name="required" />
			<depend name="commonChar" />
		</field>
		<field name="password" display-name="密码">
			<depend name="required" />
			<depend name="commonChar" />
		</field>
	</form>
	<form id="form2" show-error="errorDiv" onfail="" show-type="first">
		<field name="username" display-name="用户名" onfail="">
			<depend name="required" />
			<depend name="commonChar" />
		</field>
		<field name="password" display-name="密码">
			<depend name="required" />
			<depend name="commonChar" />
		</field>
		<field name="confirm" display-name="确认密码">
			<depend name="equalsField" param0="password"/>
		</field>
		<field name="gender" display-name="性别">
			<depend name="required" />
		</field>
		<field name="interest" display-name="兴趣">
			<depend name="required" />
		</field>
		<field name="email" display-name="Email">
			<depend name="email"/>
		</field>
		<field name="age" display-name="年龄">
			<depend name="integerRange" param0="15" param1="60"/>
		</field>
		<field name="cname" display-name="中文姓名">
			<depend name="chineseChar"/>
		</field>

                <field name="phone" display-name="电话号码">
			<depend name="minLength" param0="2"/>
                        <depend name="manLength" param0="20"/>		
               </field>

	</form>
</validation-config>