温馨提示:您的每一次转载,体现了我写此文的意义!!!烦请您在转载时注明出处http://www.blogjava.net/sxyx2008/谢谢合作!!!

雪山飞鹄

温馨提示:您的每一次转载,体现了我写此文的意义!!!烦请您在转载时注明出处http://www.blogjava.net/sxyx2008/谢谢合作!!!

BlogJava 首页 新随笔 联系 聚合 管理
  215 Posts :: 1 Stories :: 674 Comments :: 0 Trackbacks

 

jsvalidation客户端JavaScript验证框架使用手册


jsvalidation.pdf  jsvalidationdemo.zip

1.       JSValidation是什么?

       官方地址:http://cosoft.org.cn/projects/jsvalidation(目前好像打不开)

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.       JSValidation能做什么,不能做什么?

2.1.1.       JSValidation能够校验表单

在系统复杂,表单复杂的场景下,JSValidation的优势更加突出。JSValidation目前能够完成客户端的13种验证如下:

取值非空

必须为整数

必须为双精度数

必须为普通英文字符(字母,数字,下划线)

必须为中文字符

最小长度

最大长度

是否为Email格式

是否为日期格式(yyyy-mm-dd

自定义的正则表达式

整数范围(大于某数小于某数)

双精度数范围

必须与某个域的值相同

所有这些验证都在客户端完成。如果还有在此之外的验证需求,请告诉我们,我们会跟据需求程度开发出新的验证模型。

2.1.2.       JSValidation不能做的:

跨页面的验证。例如,A页面输入值,必须满足B页面中某一个值的条件,或者更多的页面。这个需求需要用户的反馈。如果在现实开发中这种需求很普遍,我们会考虑开发。目前的替代方式是,将A页面需要验证的值POSTB页面的一个Hidden Field,然后再使用已有的验证方式。

与服务器交互验证。最常见的是输入用户名密码后登录。限于它的表示范围,JSValidation不能完成这个工作。

其他没有提到的,很希望你能告诉我们。

3.       什么情况下,我应该使用JSValidation

如果没有现成的验证参考,就使用它吧。

有很多的开发工具、开发框架(模型)都已经提供了验证支持,如ASP.NETStruts。但是还有更多的Framework没有提供支持,例如我们使用的Velocity(也许它不能称为框架),以及其他的ASP, PHP, Pure JSP, CGI等等。也许没有成熟的框架使用。如果没有,JSValidation也许能够帮助你减轻客户端校验编程的压力,让你有更多的精力投入对业务的关注中。

另外,如果你的系统很小,或者系统中需要校验的很少——例如只有一个登陆的用户名、密码需要校验,那么基于性能考虑,我们不建议你采用JSValidationJSValidation库文件达到22KB,加上验证文件,也许要在你的页面上加载额外的26K+才能运行。而相同的功能,自己按照常规方式写也不过几行。

当然,如果你现有的开发过程中已经有了自己的模型,很熟悉也很牢固了,尽可能采用你自己的方式吧。

4.       在项目中快速使用jsvalidation

4.1.1.       获取jsvalidation

官方下载:http://cosoft.org.cn/projects/jsvalidation(目前好像打不开)

本地下载:http://www.blogjava.net/Files/sxyx2008/jsvalidation.zip

4.1.2.       配置环境

首先将validation-framework.jsvalidation-config.xml复制到项目的某一目录下

例如:

 

1)         打开validation-framework.js,找到var ValidationRoot = ""; 将这行代码更改为var ValidationRoot = "js/"; (就是validation-config.xml文件的位置)

2)         在你需要进行校验的页面中,加入jsvalidation的引用:
<script language="javascript" src="js/validation-framework.js"></script>

3)         在该页面需要验证的表单Form标记中,加入on submit="return doValidate('formId')"。其中formID是该Formid

4)         完成。

4.1.3.       编写validation-config.xml

validation-config.xml是集中管理表单的存放点,也是JSValidation处理验证条件的地方。

1)        - 文件格式
    validation-config.xml是标准文本格式。你可以以任何文本编辑器来编辑它。在正式校验之前,请确保你的xml文件能够正常显示在浏览器中。

2)        - 基本结构

<validation-config>              每个validation-config.xml都有一个validation-config根节点
    <form ...>                         可以进行一个或者多个form的校验
        <field ...>                     每个form有一个或者多个需要验证的表单域
             <depend ... />        每个域需要验证的条件可以有一个或者多个

3)        节点说明

validation-config: 根节点

属性:lang: 所用的语言,可以是"auto", "zh-cn"(简体中文)或者"en-us"(英文)。默认为auto,可选。
子节点:form, 一个或多个

form: 虚拟表单,通过id映射网页中的表单
属性:id: 映射网页表单中的id,通过这个id,使得jsvalidation与实际网页表单相关联。必须
        show-error: 显示错误提示信息的方式。可以是alert(将会显示对话框)或者一个divid(将会在这个div中显示错误消息)必须
      onfail: 当校验失败时,运行的自定义JS函数。可选(该版本尚未实现)
子节点:field,一个或者多个

field: 虚拟表单域,通过name映射表单中的实际域
属性:name: 表单中的域的名称,例如input name="abc",此处则对应abc 必须
         display-name: 表单的显示名称。当校验失败时,会显示这个属性。必须
       onfaile: form中的onfail一样。尚未实现。可选
子节点:depend,一个或多个

depend: 校验条件
属性:name: 校验条件的名称,必须为下面指定的13中名称之一,大小写敏感。必须。
        param0-param45个参数,根据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后,就可以按照上面的部署方法进行部署。

5.       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之间。

param0param1必须能被转化成整数

doubleRange:

double数的范围必须在参数0和参数1之间

参数0和参数1必须能被转化成Float

equalsField:

必须与某一个域的值相等

param0:同一个表单中域的名称。例如用来校验密码

6.       完整的例子(实现用户注册验证)

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文件中<form> 标签属性配置

1)       show-error

show-error属性用来确定以何种方式展现错误信息,其取值有alert/errorDiv, alert就不用解释了, errorDiv就是以div的形式提示错误信息,这就需要你在jsp页面中定义一个divid应为errorDiv,

如:<div id="errorDiv"></div>,最终错误信息将会显示在该div

2)       id

id对应jsp页面中formid属性

3)       show-type

show-type属性用来确定错误信息显示的条目,其取值为all/first

all一次性显示所有的错误信息(从第一个不合法的表单属性一次性校验)

first每次只显示一条(从第一个不合法的表单属性逐个校验)

7.       jsvalidation类说明图

 下载电子版文档        jsvalidationdemo.zip

posted on 2009-11-26 14:31 雪山飞鹄 阅读(4104) 评论(6)  编辑  收藏

Feedback

# re: jsvalidation客户端JavaScript验证框架使用手册 2009-11-27 09:30 Unmi
在 xml 文件中有 id="registerForm"
验证的时候是否就可以省去再传 form id 参数呢?

return doValidate('registerForm')"

或者统一为 return doValidate(this) 即可。  回复  更多评论
  

# re: jsvalidation客户端JavaScript验证框架使用手册 2009-11-27 10:02 雪山飞鹄
@Unmi
首先感谢您的支持,我建议您最还亲自动手测试一下,这样可以加深你的印象,以便更好的去理解和使用该验证框架。

在 xml 文件中有 id="registerForm"
验证的时候是否就可以省去再传 form id 参数呢?

实验表明该form id 参数是必须的,它的工作原理是依据传递过来的参数去validation-config.xml中匹配与此id相同的form,相信学习过struts1的朋友很容易理解,因此这个参数不能省略,因为在validation-config.xml中用户可以配置多个<form>标签而唯一区别它们的依据就是doValidate('form id')中传递过来的form id,你可以参考validation-framework.js中29行doValidate()方法

当然你也可以在doValidate()方法中以this来代替form id(this就代表当前对象),但仍需要你显式的为该form声明一个id,理由上面已经交代过了,同样要传递参数,因此我还是建议传递form id这样看起来一目了然,更加清晰,相信代码质量更高  回复  更多评论
  

# re: jsvalidation客户端JavaScript验证框架使用手册 2009-11-27 10:16 FOG
说的好,我顶死你  回复  更多评论
  

# re: jsvalidation客户端JavaScript验证框架使用手册 2010-09-29 14:24 大道至简
如果有效果图就更好了,你虽然介绍的详细,但我不确定这个是不是就是我想要的效果!  回复  更多评论
  

# re: jsvalidation客户端JavaScript验证框架使用手册 2010-09-29 14:40 雪山飞鹄
@大道至简
请下载pdf文件及zip包,pdf中有详细的说明图,zip包为示例代码.由于图片较多,在blog上上传图片较为麻烦,具体你看以查看pdf文件  回复  更多评论
  

# re: jsvalidation客户端JavaScript验证框架使用手册[未登录] 2011-04-11 20:23 andy
http://item.taobao.com/item.htm?id=9943143919  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: