JSValidation 验证框架的使用<转>

JSValidation 验证框架的使用

一.JSValidation要去http://cosoft.org.cn/projects/jsvalidation中下载最新版本。
二.JSValidation可以实现的验证功能：
13种验证规则：
输入内容非空
输入数值必须为整数
输入数值必须为双精度浮点数
输入字符必须为普通英文字符（字母，数字，下划线）
输入字符必须为中文字符
输入的内容是否为Email格式
输入内容最大长度
输入内容最小长度
输入的内容是否为日期格式（yyyy-mm-dd）
自定义的正则表达式
输入数值的整数范围（大于某数而小于某数）
输入数值的双精度范围
输入内容必须与某个域的值相同。
<!--6 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：同一个表单中域的名称。例如用来校验密码 -->

三.节点说明
节点说明
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不同，各有不同取值。


四.配置
1.本框架共三个文件，validation-config.dtd（关键文件，可能有关转码，无需配置）、validation-framework.js、validation-config.xml。
2.将三个文件放入相应的文件夹下，我常用的是.../WebRoot/js文件夹下
3.1.配置validation-framework.js文件，其中红色字体，这句是路径（如果三个文件放到Web-Root下就没必要修改）。
Validation-framework.js代码

var ValidationRoot = "js/";

 
Validation-framework.js代码

var ValidationRoot = "js/";  

3.2.配置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 id="UserForm" show-error="alert" show-type="all">   
<!--UserForm为需验证的表单名称或id(可对应struts-config.xml种的配置)-->   
        <field name="userinfo.UName" display-name="用户名" onfail="">   
<!--表单中需验证的字段名称,我这里对应的实体类的Uname属性-->   
            <depend name="required" />   
            <depend name="maxLength" param0="10"/>   
        </field>   
        <field name="userinfo.UPwd" display-name="密码" onfail="">   
            <depend name="required" />   
            <depend name="maxLength" param0="10"/>   
        </field>   
        <field name="comfirm_pwd" display-name="重新输入的密码" onfail="">   
            <depend name="required" />   
            <depend name="maxLength" param0="10"/>   
            <depend param0="userinfo.UPwd" name="equalsField"/>   
        </field>   
    </form>   
    <!--以下是另外一张需要验证的表单，登陆验证，我整合在一起了-->   
    <form id="loginform" show-error="alert" show-type="all">   
        <field name="username" display-name="用户名" onfail="">   
            <depend name="required" />   
            <depend name="maxLength" param0="10"/>   
        </field>         
        <field name="userpwd" display-name="密码" onfail="">   
            <depend name="required" />   
            <depend name="maxLength" param0="10"/>   
        </field>     
    </form>   
</validation-config>  

Validation-config.xml代码

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">  
<validation-config lang="auto">  
    <form id="UserForm" show-error="alert" show-type="all">  
<!--UserForm为需验证的表单名称或id(可对应struts-config.xml种的配置)-->  
        <field name="userinfo.UName" display-name="用户名" onfail="">  
<!--表单中需验证的字段名称,我这里对应的实体类的Uname属性-->  
            <depend name="required" />  
            <depend name="maxLength" param0="10"/>  
        </field>  
        <field name="userinfo.UPwd" display-name="密码" onfail="">  
            <depend name="required" />  
            <depend name="maxLength" param0="10"/>  
        </field>  
        <field name="comfirm_pwd" display-name="重新输入的密码" onfail="">  
            <depend name="required" />  
            <depend name="maxLength" param0="10"/>  
            <depend param0="userinfo.UPwd" name="equalsField"/>  
        </field>  
    </form>  
    <!--以下是另外一张需要验证的表单，登陆验证，我整合在一起了-->  
    <form id="loginform" show-error="alert" show-type="all">  
        <field name="username" display-name="用户名" onfail="">  
            <depend name="required" />  
            <depend name="maxLength" param0="10"/>  
        </field>        
        <field name="userpwd" display-name="密码" onfail="">  
            <depend name="required" />  
            <depend name="maxLength" param0="10"/>  
        </field>    
    </form>  
</validation-config>  

五.使用
注册验证页面代码

<html>    
    <head>   
        <title>用户注册</title>   
        <link rel="stylesheet" type="text/css" href="css/styles.css">   
        <script type="text/javascript" src="js/validation-framework.js"></script><!--引入框架-->   
</head>   
    <body>   
    <div>   
        <p align="left"><font size="120%">用户注册信息</font></p>   
    </div>   
    <div>   
        <html:form action="user.do?operate=doRegist" method="post" onsubmit="return doValidate('UserForm')">   
<!--注：由于本页面已经和UserForm.java 绑定了(在struts-config.xml中配置的)，所以不需要设置 form id或name 了(其实我用的html标准库标签，所以也没有name,id 等属性，系统会自动到struts-config.xml中找的)-->   
            用户名 ：<html:text property="userinfo.UName"/><br/>   
            密码：   <html:password property="userinfo.UPwd"/><br/>   
            确认密码：<html:password property="comfirm_pwd"/><br/>   
            身份证号码：<html:text property="userinfo.UCardid"/><br/>   
            电话：<html:text property="userinfo.UTel"/><br/>   
            地址：<html:text property="userinfo.UAddr"/><br/>   
            邮编：<html:text property="userinfo.UZip"/><br/>   
            <html:submit value="注册"/><html:reset value="重置"/>   
        </html:form>   
    </div>   
    </body>   
</html>  

注册验证页面代码

<html>   
    <head>  
        <title>用户注册</title>  
        <link rel="stylesheet" type="text/css" href="css/styles.css">  
        <script type="text/javascript" src="js/validation-framework.js"></script><!--引入框架-->  
</head>  
    <body>  
    <div>  
        <p align="left"><font size="120%">用户注册信息</font></p>  
    </div>  
    <div>  
        <html:form action="user.do?operate=doRegist" method="post" onsubmit="return doValidate('UserForm')">  
<!--注：由于本页面已经和UserForm.java 绑定了(在struts-config.xml中配置的)，所以不需要设置 form id或name 了(其实我用的html标准库标签，所以也没有name,id 等属性，系统会自动到struts-config.xml中找的)-->  
            用户名 ：<html:text property="userinfo.UName"/><br/>  
            密码：   <html:password property="userinfo.UPwd"/><br/>  
            确认密码：<html:password property="comfirm_pwd"/><br/>  
            身份证号码：<html:text property="userinfo.UCardid"/><br/>  
            电话：<html:text property="userinfo.UTel"/><br/>  
            地址：<html:text property="userinfo.UAddr"/><br/>  
            邮编：<html:text property="userinfo.UZip"/><br/>  
            <html:submit value="注册"/><html:reset value="重置"/>  
        </html:form>  
    </div>  
    </body>  
</html>  

转自：http://sgl124764903.iteye.com/blog/477649