📄 userguide.html
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
<title>JavaScript Validation Framework</title>
<link rel="stylesheet" type="text/css" href="style.css">
<SCRIPT LANGUAGE="JavaScript" src="site.js"></SCRIPT>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">writeTop();</SCRIPT>
<table cellpadding="10" width="760" cellspacing="0" align="center" class="ContentTable">
<tr>
<td class="Nav" valign="top">
<SCRIPT LANGUAGE="JavaScript">writeNav();</SCRIPT>
</td>
<td valign="top">
<b>用户手册</b>
<p><u><font color="#000080">目录</font></u>
<ol>
<li><a href="#1">JSValidation是什么？</a></li>
<li><a href="#2">JSValidation能做什么，不能做什么？</a></li>
<li><a href="#3">什么情况下，我应该使用它？</a></li>
<li><a href="#4">快速开始</a></li>
<li><a href="#5">使用流程</a><br>
<a href="#5.1">
5.1 配置环境</a><br>
<a href="#5.2">5.2 编写validation-config.xml</a><br>
<a href="#5.3">
5.3 校验表单</a></li>
<li><a href="#6">JSValidation支持的13种验证</a></li>
<li><a href="#7">其他补遗</a></li>
</ol>
<p><b><a name="1"></a><font color="#FF0000">1. JSValidation是什么？</font> [<a href="#">top</a>]</b></p>
<p>如首页所说，JSValidation是客户端表单验证框架，用在BS系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来与表单对象交互，并进行校验。常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。根据一般的经验，如果表单中需要校验的域个数超过10个，开发过程就显得枯燥无味——多段重复的代码不断重复，如果要求跨浏览器，更多的考虑因素使人头疼不已。往往这个页面的验证还不能用于那个验证……虽然逻辑基本相同；但是在大多数情况下，出于种种原因，开发者宁愿（或者没办法）重新编写另一个页面的JavaScript代码。</p>
<p>JSValidation致力于改善这一过程。它将常见的校验（目前支持13种）封装起来，并创造性的采用xml来存贮表单验证信息，使得表单的验证成为整个项目中最不重要的环节，开发者只需要定义几个xml标记，就可以创建出复杂的验证策略，而不用编写一行JavaScript代码。由于采用xml集中管理表单验证，使得表单验证在整个系统中的耦合度大大降低，并且易维护性大大提高。开发者更多的精力可以投入到业务相关的代码中。</p>
<p>恰恰相反，JSValidation内部结构虽然不太简单（对用户而言），但是调用方式却极其简单，配置好环境后，只需要在需要验证的表单的HTML标记中加上onsubmit="return
doValidate('formId')"即可。这并没有改变开发者的习惯。</p>
<p>更为明显的优势是，JSValidation具备跨浏览器的能力。在目前的测试环境下，支持IE5及以上版本，Mozilla系列和支持DOM2模型的其他浏览器。你不用再考虑在多浏览器下如何兼容，JSValidation帮你做到了这些。</p>
<p><b><a name="2"></a><font color="#FF0000">2. JSValidation能做什么，不能做什么？
</font> [<a href="#">top</a>]</b></p>
<p>如上所述，JSValidation能够校验表单。在系统复杂，表单复杂的场景下，JSValidation的优势更加突出。JSValidation目前能够完成客户端的13种验证如下：</p>
<ul>
<li>取值非空</li>
<li>必须为整数</li>
<li>必须为双精度数</li>
<li>必须为普通英文字符（字母，数字，下划线）</li>
<li>必须为中文字符</li>
<li>最小长度</li>
<li>最大长度</li>
<li>是否为Email格式</li>
<li>是否为日期格式（yyyy-mm-dd）</li>
<li>自定义的正则表达式</li>
<li>整数范围（大于某数小于某数）</li>
<li>双精度数范围</li>
<li>必须与某个域的值相同</li>
</ul>
<p>所有这些验证都在客户端完成。如果还有在此之外的验证需求，请告诉我们，我们会跟据需求程度开发出新的验证模型。</p>
<p>JSValidation不能做的：</p>
<ul>
<li>跨页面的验证。例如，A页面输入值，必须满足B页面中某一个值的条件，或者更多的页面。这个需求需要用户的反馈。如果在现实开发中这种需求很普遍，我们会考虑开发。目前的替代方式是，将A页面需要验证的值POST到B页面的一个Hidden
Field，然后再使用已有的验证方式。</li>
<li>与服务器交互验证。最常见的是输入用户名密码后登录。限于它的表示范围，JSValidation不能完成这个工作。</li>
<li>其他没有提到的，很希望你能告诉我们。</li>
</ul>
<p><b><a name="3"></a><font color="#FF0000">3. 什么情况下，我应该使用JSValidation？</font> [<a href="#">top</a>]</b></p>
<p>答案是，如果没有现成的验证参考，就使用它吧。<p>有很多的开发工具、开发框架（模型）都已经提供了验证支持，如ASP.NET，Struts。但是还有更多的Framework没有提供支持，例如我们使用的Velocity（也许它不能称为框架），以及其他的ASP,
PHP, Pure JSP, CGI等等。也许没有成熟的框架使用。如果没有，JSValidation也许能够帮助你减轻客户端校验编程的压力，让你有更多的精力投入对业务的关注中。<p>另外，如果你的系统很小，或者系统中需要校验的很少——例如只有一个登陆的用户名、密码需要校验，那么基于性能考虑，我们不建议你采用JSValidation。JSValidation库文件达到22KB，加上验证文件，也许要在你的页面上加载额外的26K+才能运行。而相同的功能，自己按照常规方式写也不过几行。<p>当然，如果你现有的开发过程中已经有了自己的模型，很熟悉也很牢固了，尽可能采用你自己的方式吧。JSValidation并非久经考验（before
v1.0b）。<p><a name="4"></a><b><font color="#FF0000">4. 快速开始</font> [<a href="#">top</a>]</b><p>你可以有两种方法快速开始（看到效果）
<ul>
<li>直接查看Demo页面 （<a href="demo.html">goto>></a>）</li>
<li>下载最新的版本，直接在本地查看。（<a href="download.html">goto>></a>）</li>
</ul>
<p>无论是那种方法，演示的例子中都有详细的步骤，以及对应的代码。</p>
<p><b><a name="5"></a><font color="#FF0000">5. 使用流程</font> [<a href="#">top</a>]</b></p>
<p>以下介绍在实际开发中，如何配置使用JSValidation。在开始这些步骤之前，请保证你下载了最新版本的jsvalidation-framework.js文件。</p>
<p><a name="5.1"></a><b><font color="#FF0000">5.1 配置环境</font> [<a href="#">top</a>]</b></p>
<ol>
<li>首先将jsvalidation-framework.js和validation-config.xml复制到网站的某一目录下，例如/javascripts。</li>
<li>打开jsvalidation-framework.js，找到<font color="#800000">var ValidationRoot = "";
</font>将这行代码更改为<font color="#800000">var ValidationRoot =
"/javascripts/"; </font>(就是validation-config.xml文件的位置)。</li>
<li>在你需要进行校验的页面中，加入jsvalidation的引用：<br>
<script language="javascript"
src="/javascripts/jsvalidation-framework.js"></script></li>
<li>在该页面需要验证的表单Form标记中，加入on
submit="return doValidate('formId')"。其中formID是该Form的id。</li>
<li>完成。</li>
</ol>
<p><a name="5.2"></a><b><font color="#FF0000">5.2 编写validation-config.xml</font> [<a href="#">top</a>]</b></p>
<p>validation-config.xml是集中管理表单的存放点，也是JSValidation处理验证条件的地方。</p>
<p><b><font color="#800080">- 文件格式</font></b><br>
validation-config.xml是标准文本格式。你可以以任何文本编辑器来编辑它。在正式校验之前，请确保你的xml文件能够正常显示在浏览器中。<br>
<font color="#800080"><b>
- 基本结构</b></font>
<table class="CodeTable" width="100%">
<tr>
<td width="100%"><validation-config>
每个validation-config.xml都有一个validation-config根节点<br>
<form
...>
可以进行一个或者多个form的校验<br>
<field
...>
每个form有一个或者多个需要验证的表单域<br>
<depend ... /> 每个域需要验证的条件可以有一个或者多个</td>
</tr>
</table>
<p><font color="#800080"><b>- 节点说明</b></font><br>
<u>validation-config:</u> 根节点<br>
属性：lang: 所用的语言，可以是"auto", "zh-cn"（简体中文）或者"en-us"（英文）。默认为auto，可选。<br>
子节点：form, 一个或多个</p>
<p><u>form: </u>虚拟表单，通过id映射网页中的表单<br>
属性：id: 映射网页表单中的id，通过这个id，使得jsvalidation与实际网页表单相关联。必须<br>
show-error:
显示错误提示信息的方式。可以是alert（将会显示对话框）或者一个div的id（将会在这<br>
个div中显示错误消息）必须<br>
onfail: 当校验失败时，运行的自定义JS函数。可选（该版本尚未实现）<br>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -