【IT168技术文档】
JSValidation是客户端表单验证框架，用在BS系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来与表单对象交互，并进行校验。常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。根据一般的经验，如果表单中需要校验的域个数超过10个，开发过程就显得枯燥无味——多段重复的代码不断重复，如果要求跨浏览器，更多的考虑因素使人头疼不已。往往这个页面的验证还不能用于那个验证……虽然逻辑基本相同；但是在大多数情况下，出于种种原因，开发者宁愿（或者没办法）重新编写另一个页面的JavaScript代码。
在系统复杂，表单复杂的场景下，JSValidation的优势更加突出。JSValidation目前能够完成客户端的13种验证如下：
? 取值非空
? 必须为整数
? 必须为双精度数
? 必须为普通英文字符（字母，数字，下划线）
? 必须为中文字符
? 最小长度
? 最大长度
? 是否为Email格式
? 是否为日期格式（yyyy-mm-dd）
? 自定义的正则表达式
? 整数范围（大于某数小于某数）
? 双精度数范围
? 必须与某个域的值相同
使用步骤：
以我所做的测试为例，说明在实际应用中如何使用JSValidation。
1． 首先确定下载了最新版本的jsvalidation-framework.js文件。我将对index.htm文件进行JSValidation验证，我所做的测试都在名为test文件夹下，在该文件夹下有index.htm文件，即我所要进行测试的页面，在test文件夹下还有个名为javascripts的文件夹，我们将jsvalidation-framework.js、validation-config.xml和validation-config.dtd文件放到javascripts文件夹下。
2． 打开jsvalidation-framework.js，找到var ValidationRoot = ""; 将这行代码更改为var ValidationRoot = "XXX"; (XXX就是validation-config.xml文件的位置)。如果 jsvalidation-framework.js、validation-config.xml在同一文件夹下XXX值就为空。本例为var ValidationRoot = "javascripts/";
3． 在你需要进行校验的页面中，在<HEAD></HEAD>之间加入jsvalidation的引用：
<script language="javascript" src="javascripts/jsvalidation-framework.js"></script> src即为jsvalidation-framework.js文件相对测试页面的相对地址。
4．在该页面需要验证页面的表单Form标记中，加入onsubmit="return doValidate('formId')"。其中formID是该Form的id。在本测试页面中Form的ID为 form1。所以在该测试页面中的Form表单中应用为：<form method="GET" action="123.html" id="form1" onsubmit="return doValidate('form1')">
【IT168技术文档】
5．编写validation-config.xml
打开javascripts文件夹中的validation-config.xml文件进行编辑以我所做的为例进行说明：
validation-config.xml：
validation-config: 根节点<?xml version="1.0" encoding="utf-8"?>
属性：lang: 所用的语言，可以是"auto", "zh-cn"（简体中文）或者"en-us"（英文）。默认为auto，可选。
子节点：form, 一个或多个form: 虚拟表单，通过id映射网页中的表单。有几个Form表单就有几个Form子节点。
属性：id: 映射网页表单中的id，通过这个id，使得jsvalidation与实际网页表单相关联。这个id与测试页面中form表单中的id 一致。必须
show-error: 显示错误提示信息的方式。可以是alert（将会显示对话框）或者一个div的id（将会在这个div中显示错误消息）如果要用div来显示错误信息，则要在测试页面的Form 表单前加
<div id="errorDiv" style="color:red;font-weight:bold"></div> 即：
<div id="errorDiv" style="color:red;font-weight:bold"></div>
<form method="GET" action="demo_result.html" ID="form2" onsubmit="return doValidate(this)"> 表明该表单是用div来显示错误信息的。当然show-error的值为该div的id 本例中为 show-error="errorDiv" 必须
onfail: 当校验失败时，运行的自定义JS函数。
子节点：field，一个或者多个field: 虚拟表单域，通过name映射表单中的实际域
属性：name: 表单中的域的名称，例如input name="abc"，此处则对应abc。在本例中有ID和密码两个输入框则对应有两个field,且field中的id与测试页面中输入框ID想对应 必须display-name: 表单的显示名称。当校验失败时，会显示这个属性。必须
onfaile: 与form中的onfail一样。尚未实现。可选
子节点：depend，一个或多个depend: 校验条件
属性：name: 校验条件的名称，必须为下面指定的13中名称之一，大小写敏感。如我要对ID和密码对要进行空值验证则有个<depend name="required" />如还要对ID进行“普通英文字符：字母数字和下划线”验证则在加个<depend name="commonChar" />如上所示。如还要进行其他验证在在加 <depend name="XXX" />XXX为以下13中函数其中之一的名称。
param0-param4，5个参数，根据name不同，各有不同取值。
【IT168技术文档】
JSValidation支持的种验证
|
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：同一个表单中域的名称。例如用来校验密码 |
带参数的测试：
如integerRange这个函数，他的作用是测试所输入的数据是否为给定数据的范围之内，如本例中我测试密码是否为1-100之间的整数，在validation-config.xml应这样引用：
