jsvalidation客户端javascript验证框架使用手册
官方地址：（目前好像打不开）
jsvalidation是客户端表单验证框架，用在bs系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者（javascript开发者）需要编写大量的javascript来与表单对象交互，并进行校验。常见的校验如不能为空，必须满足长度要求，必须为数字，必须为email等等。根据一般的经验，如果表单中需要校验的域个数超过10个，开发过程就显得枯燥无味——多段重复的代码不断重复，如果要求跨浏览器，更多的考虑因素使人头疼不已。往往这个页面的验证还不能用于那个验证……虽然逻辑基本相同；但是在大多数情况下，出于种种原因，开发者宁愿（或者没办法）重新编写另一个页面的javascript代码。
jsvalidation致力于改善这一过程。它将常见的校验（目前支持13种）封装起来，并创造性的采用xml来存贮表单验证信息，使得表单的验证成为整个项目中最不重要的环节，开发者只需要定义几个xml标记，就可以创建出复杂的验证策略，而不用编写一行javascript代码。由于采用xml集中管理表单验证，使得表单验证在整个系统中的耦合度大大降低，并且易维护性大大提高。开发者更多的精力可以投入到业务相关的代码中。
恰恰相反，jsvalidation内部结构虽然不太简单（对用户而言），但是调用方式却极其简单，配置好环境后，只需要在需要验证的表单的html标记中加上onsubmit="return dovalidate('formid')"即可。这并没有改变开发者的习惯。
更为明显的优势是，jsvalidation具备跨浏览器的能力。在目前的测试环境下，支持ie5及以上版本，mozilla系列和支持dom2模型的其他浏览器。你不用再考虑在多浏览器下如何兼容，jsvalidation帮你做到了这些。
2.1.1. jsvalidation能够校验表单
在系统复杂，表单复杂的场景下，jsvalidation的优势更加突出。jsvalidation目前能够完成客户端的13种验证如下：
取值非空
必须为整数
必须为双精度数
必须为普通英文字符（字母，数字，下划线）
必须为中文字符
最小长度
最大长度
是否为email格式
是否为日期格式（yyyy-mm-dd）
自定义的正则表达式
整数范围（大于某数小于某数）
双精度数范围
必须与某个域的值相同
所有这些验证都在客户端完成。如果还有在此之外的验证需求，请告诉我们，我们会跟据需求程度开发出新的验证模型。
2.1.2. jsvalidation不能做的：
跨页面的验证。例如，a页面输入值，必须满足b页面中某一个值的条件，或者更多的页面。这个需求需要用户的反馈。如果在现实开发中这种需求很普遍，我们会考虑开发。目前的替代方式是，将a页面需要验证的值post到b页面的一个hidden field，然后再使用已有的验证方式。
与服务器交互验证。最常见的是输入用户名密码后登录。限于它的表示范围，jsvalidation不能完成这个工作。
其他没有提到的，很希望你能告诉我们。
如果没有现成的验证参考，就使用它吧。
有很多的开发工具、开发框架（模型）都已经提供了验证支持，如asp.net，struts。但是还有更多的framework没有提供支持，例如我们使用的velocity（也许它不能称为框架），以及其他的asp, php, pure jsp, cgi等等。也许没有成熟的框架使用。如果没有，jsvalidation也许能够帮助你减轻客户端校验编程的压力，让你有更多的精力投入对业务的关注中。
另外，如果你的系统很小，或者系统中需要校验的很少——例如只有一个登陆的用户名、密码需要校验，那么基于性能考虑，我们不建议你采用jsvalidation。jsvalidation库文件达到22kb，加上验证文件，也许要在你的页面上加载额外的26k 才能运行。而相同的功能，自己按照常规方式写也不过几行。
当然，如果你现有的开发过程中已经有了自己的模型，很熟悉也很牢固了，尽可能采用你自己的方式吧。
4.1.1. 获取jsvalidation
官方下载：（目前好像打不开）
本地下载：
4.1.2. 配置环境
首先将validation-framework.js和validation-config.xml复制到项目的某一目录下
例如：
1) 打开validation-framework.js，找到var validationroot = ""; 将这行代码更改为var validationroot = "js/"; (就是validation-config.xml文件的位置)。
2) 在你需要进行校验的页面中，加入jsvalidation的引用：
3) 在该页面需要验证的表单form标记中，加入on submit="return dovalidate('formid')"。其中formid是该form的id。
4) 完成。
4.1.3. 编写validation-config.xml
validation-config.xml是集中管理表单的存放点，也是jsvalidation处理验证条件的地方。
1) - 文件格式
validation-config.xml是标准文本格式。你可以以任何文本编辑器来编辑它。在正式校验之前，请确保你的xml文件能够正常显示在浏览器中。
2) - 基本结构
|
每个validation-config.xml都有一个validation-config根节点
可以进行一个或者多个form的校验
每个form有一个或者多个需要验证的表单域
每个域需要验证的条件可以有一个或者多个
|
3) 节点说明
validation-config: 根节点
属性：lang: 所用的语言，可以是"auto", "zh-cn"（简体中文）或者"en-us"（英文）。默认为auto，可选。
子节点：form, 一个或多个
form: 虚拟表单，通过id映射网页中的表单
属性：id: 映射网页表单中的id，通过这个id，使得jsvalidation与实际网页表单相关联。必须
show-error: 显示错误提示信息的方式。可以是alert（将会显示对话框）或者一个div的id（将会在这个div中显示错误消息）必须
onfail: 当校验失败时，运行的自定义js函数。可选（该版本尚未实现）
子节点：field，一个或者多个
field: 虚拟表单域，通过name映射表单中的实际域
属性：name: 表单中的域的名称，例如input name="abc"，此处则对应abc。 必须
display-name: 表单的显示名称。当校验失败时，会显示这个属性。必须
onfaile: 与form中的onfail一样。尚未实现。可选
子节点：depend，一个或多个
depend: 校验条件
属性：name: 校验条件的名称，必须为下面指定的13中名称之一，大小写敏感。必须。
param0-param4，5个参数，根据name不同，各有不同取值。
一个范例：
|
xml version="1.0" encoding="utf-8"?>
doctype validation-config system "validation-config.dtd">
<validation-config lang="auto">
<form show-error="errordiv" id="registerform" show-type="first">
<field display-name="用户名" name="username">
<depend name="required"/>
<depend name="commonchar"/>
<depend name="minlength" param0="6"/>
<depend name="maxlength" param0="8"/>
field>
<field display-name="密码" name="password">
<depend name="required"/>
<depend name="commonchar"/>
<depend name="minlength" param0="6"/>
<depend name="maxlength" param0="8"/>
field>
<field display-name="重复密码" name="repassword">
<depend name="required"/>
<depend name="commonchar"/>
<depend name="minlength" param0="6"/>
<depend name="maxlength" param0="8"/>
<depend name="equalsfield" param0="password"/>
field>
<field display-name="年龄" name="age">
<depend name="required"/>
<depend name="integerrange" param0="18" param1="60"/>
field>
<field display-name="年出生年月" name="birthday">
<depend name="required"/>
<depend name="date" param0="yyyy-mm-dd"/>
field>
<field display-name="电子邮件" name="emails">
<depend name="required"/>
<depend name="email"/>
field>
form>
validation-config>
|
4.1.4. 校验表单
编写完validation-config.xml后，就可以按照上面的部署方法进行部署。
|
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：同一个表单中域的名称。例如用来校验密码
|
6.1.1. 项目目录
结合以上目录注意修改文件中21行路径
在jsp页面中引入文件
6.1.2. 注册页面内容
|
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>用户注册title>
<script type="text/javascript" src="js/validation-framework.js">script>
head>
<body>
<div id="errordiv">div>
<form action="http://www.google.cn" method="post" id="registerform" onsubmit="return dovalidate('registerform')">
<table align="center" style="border: 1px solid; border-collapse: collapse;" width="300" height="300" border="1" bordercolor="blue">
<caption>用户注册caption>
<tr>
<td align="right">用户名:td>
<td><input id="username" type="text"/>td>
tr>
<tr>
<td align="right">密码:td>
<td><input id="password" type="password"/>td>
tr>
<tr>
<td align="right">重复密码:td>
<td><input id="repassword" type="password"/>td>
tr>
<tr>
<td align="right">年龄:td>
<td><input id="age" type="text"/>td>
tr>
<tr>
<td align="right">出生年月:td>
<td><input id="birthday" type="text"/>td>
tr>
<tr>
<td align="right">email:td>
<td><input id="emails" type="text"/>td>
tr>
<tr>
<td>td>
<td>
<input type="submit" value="注册"/>
<input type="reset" value="取消"/>
td>
tr>
table>
form>
body>
html>
|
6.1.3. 配置validation-config.xml文件
（针对上述用户注册表单信息validation-config.xml文件配置信息如下）
|
xml version="1.0" encoding="utf-8"?>
doctype validation-config system "validation-config.dtd">
<validation-config lang="auto">
<form show-error="alert" id="registerform" show-type="all">
<field display-name="用户名" name="username">
<depend name="required"/>
<depend name="commonchar"/>
<depend name="minlength" param0="6"/>
<depend name="maxlength" param0="8"/>
field>
<field display-name="密码" name="password">
<depend name="required"/>
<depend name="commonchar"/>
<depend name="minlength" param0="6"/>
<depend name="maxlength" param0="8"/>
field>
<field display-name="重复密码" name="repassword">
<depend name="required"/>
<depend name="commonchar"/>
<depend name="minlength" param0="6"/>
<depend name="maxlength" param0="8"/>
<depend name="equalsfield" param0="password"/>
field>
<field display-name="年龄" name="age">
<depend name="required"/>
<depend name="integerrange" param0="18" param1="60"/>
field>
<field display-name="年出生年月" name="birthday">
<depend name="required"/>
<depend name="date" param0="yyyy-mm-dd"/>
field>
<field display-name="电子邮件" name="emails">
<depend name="required"/>
<depend name="email"/>
field>
form>
validation-config>
|
对于里面具体的配置信息我不在阐述，如有不懂的大家可以查询jsvalidation的文档，这里提醒大家在项目中长疏忽的地方及应注意的事项
i. 整个项目文件的编码问题：
最好统一编码为utf-8，这里需要注意的是文件默认的编码格式是gbk建议大家统一更换为utf-8否则里面的中文字符乱码达不到预期的效果，我在初次使用的时候就疏忽了这个地方，结果浪费了好多时间
ii. 注意路径问题，这里告诉大家一个快捷方法：在jsp中引用文件时，选中该文件然后拖到页面中松开鼠标，大家会发现奇迹出现了，这个文件已经被引用进来了，而且保证不会出错
这块应注意两处的路径问题：
(a)jsp页面中引用文件的路径
(b) 文件中的路径问题：
其中var validationroot的值可直接拷贝在jsp中引用文件路径的前半部分
如：
|
<script type="text/javascript" src="js/validation-framework.js">script>
|
即你只需拷贝“js/”部分去填充var validationroot的值
iii. 验证email类型表单属性：
在验证email类型表单属性时，你必须同时指定
<depend name="required"/>
<depend name="email"/>
否则在验证email时将不起作用
iv. validation-config.xml文件中 标签属性配置
1) show-error
show-error属性用来确定以何种方式展现错误信息,其取值有alert/errordiv, alert就不用解释了, errordiv就是以div的形式提示错误信息,这就需要你在jsp页面中定义一个div其id应为errordiv,
如：<div id="errordiv">div>,最终错误信息将会显示在该div中
2) id
id对应jsp页面中form的id属性
3) show-type
show-type属性用来确定错误信息显示的条目,其取值为all/first
all一次性显示所有的错误信息（从第一个不合法的表单属性一次性校验）
first每次只显示一条（从第一个不合法的表单属性逐个校验）