Terry.Li-彬

虚其心,可解天下之问;专其心,可治天下之学;静其心,可悟天下之理;恒其心,可成天下之业。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  143 随笔 :: 344 文章 :: 130 评论 :: 0 Trackbacks

JQuery 结合 Yav 验证


http://yav.sourceforge.net/en/oldnews.html

1、 在工程中加入jqueryyavjs文件

< script type = "text/javascript" src = "yourPath/jquery1.2.6.js" ></ script >

< script type = "text/javascript" src = "yourPath/yav.js" ></ script >

< script type = "text/javascript" src = "yourPath/yav-config-zh-CN.js" ></ script >

2、 jsp页面中使用Jquery初始化yav验证

$( function () {

        yav.init( 'formName' , rules);

} );

这表示在 jsp 页面上的元素失去焦点的时候出发对应元素的验证

参数说明:

formName form 表单的 name 属性名称

rules :对应表单的验证规则

3、 jsp页面添加表单的验证规则和提示信息以及错误信息

< script >

va r rule s=ne w Array();

rules[0 ]='username|required| 用户名不能为空 ';

rules[1 ]='password|require d| 密码不能为空 ';

rules[2 ]='password|minlength| 8';

rules[3 ]='confirm|equal|$passwor d';

rules[4 ]='email|required|e-mail 格式不 ';

rules[5 ]='email|emai l';

yav.addHel p('usernam e' , ' 用户名输入格式描述 ' );

yav.addHel p('passwor d' , ' 密码的格 ');

yav.addHel p('confir m' , ' 确认密码格 ');

yav.addHel p('emai l' , 'e-mai l 格式 ');

</ script >

在步骤 2 yav.init 方法中传递的 rules 参数,就是这里定义的,他是一个数组,格式为:

元素的 name 属性 | 规则 | 错误提示信息 ,例如 rules[0 ]='username|required| 用户名不能为空 ';

  标示 username 为必填项,如果为空则显示“ 用户名不能为空 ”错误提示

yav.addHel p 方法是指在对应元素获得焦点的时候的提示信息(可选)

4、 form表单提交前请调用方法

yav.performCheck(‘ 表单名 ’, 验证规则 ,'inline')

例如:

yav.performCheck('exampleform', rules,'inline')

5、 在需要显示元素错误信息的地方使用如下语句

< span id = "errorsDiv_[ 元素名称 ]"/ >

例如: < span id = "errorsDiv_username"/ > ,则会将 username 的错误信息显示在这个 span

6、 例子代码:,解压即可

7、 目前yav实现了如下验证规则

规则名称

语法

描述

应用范围

示例

alnumhyphen

元素名 |alnumhyphen| 错误信息

a-z, A-Z, 0-9 or -_

hidden, text, password, textarea

Username|alnumhyphen| 用户名只能包含字母、数字、 - _

alnumhyphenat

元素名 |alnumhyphen| 错误信息

a-z, A-Z, 0-9 or -_@

hidden, text, password, textarea

Username|alnumhyphenat| 用户名只能包含字母、数字、 - _ @

alphabetic

元素名 |alphabetic| 错误信息

a-z or A-Z

hidden, text, password, textarea


alphanumeric

元素名 |alphanumeric| 错误信息

a-z, A-Z or 0-9

hidden, text, password, textarea


alphaspace

元素名 |alphaspace| 错误信息

a-z, A-Z, 0-9, -_ or Space



and

索引 |and| 其他索引编号 | 错误信息



1|and|2-3|(1 and 2 and 3) not validated.

custom

元素名 |custom| 函数名称

使用自定义的 js 函数验证



date

元素名 |date| 错误信息

验证日期

hidden, text, password, textarea


date_le

元素名 |date_le|dateValue| 错误信息

日期比较


formerDate|date_le|01-01-2000

formerDate|date_le|$latterDate:Latter date

date_lt

元素名 |date_lt|dateValue| 错误信息

日期比较

hidden, text, password, textarea

formerDate|date_lt|01-01-2000

formerDate|date_lt|$latterDate:Latter date

double

元素名 |double| 错误信息

十进制数

hidden, text, password, textarea


email

元素名 |email| 错误信息

email

hidden, text, password, textarea


empty

元素名 |empty| 错误信息

为空判断

hidden, text, password, textarea


equal

元素名 |equal|textValue| 错误信息

比较



implies

index of precondition|implies|index of postcondition|msg




integer

元素名 |integer| 错误信息

整数

hidden, text, password, textarea


keypress

元素名 |keypress| 允许的自字符

只允许输入预先定义的字符

hidden, text, password, textarea


mask

元素名 |mask|maskName

嵌入规则

hidden, text, password, textarea


maxlength

元素名 |maxlength| 错误信息

最大长度

hidden, text, password, textarea


minlength

元素名 |minlength| 错误信息

最小长度

hidden, text, password, textarea


notequal

元素名 |notequal|textValue| 错误信息

不等于

hidden, text, password, textarea, checkbox, select, radio


numeric

元素名 |numeric| 错误信息

数字

hidden, text, password, textarea


numrange

元素名 |numrange| 最小值 - 最大值 | 错误信息

数字范围

hidden, text, password, textarea


or

元素名 |alnumhyphen| 错误信息




post-condition





pre-condition





regexp

元素名 |regexp|regexpValue| 错误信息

正则表达式

hidden, text, password, textarea


required

元素名 |required| 错误信息

必填项

hidden, text, password, textarea, checkbox, select, radio



<! 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 > Insert title here </ title >
    
< link  rel ="stylesheet"  type ="text/css"  href ="styles/yav-style.css" >
    
< script  type ="text/javascript"  src ="./js/jquery1.2.6.js" ></ script >
    
< script  type ="text/javascript"  src ="./js/yav.js" ></ script >
    
< script  type ="text/javascript"  src ="./js/yav-config-zh-CN.js" ></ script >
    
< script >

        $(
function (){
            yav.init('exampleform', rules);
        });

        
function  haha(){
            
// alert("haha");
        }
        
var  rules = new  Array();
        rules[
0 ] = 'username | required | 用户名不能为空';
        rules[
1 ] = 'password | required';
        rules[
2 ] = 'password | minlength | 8 ';
        rules[
3 ] = 'confirm | equal | $password';
        rules[
4 ] = 'email | required | e - mail 格式不对';
        rules[
5 ] = 'email | email';
        rules[
6 ] = 'username | custom | haha()'

        yav.addHelp('username', '用户名输入格式描述');
        yav.addHelp('password', '密码的格式');
        yav.addHelp('confirm', '确认密码格式');
        yav.addHelp('email', 'e
- mail格式');

    
</ script >
    
</ head >
    
< body >
        
< form  onsubmit ="return yav.performCheck('exampleform', rules,'inline')"  name ="exampleform" >
            
< table  valign ="top" >
                
< tbody >
                    
< tr >
                        
< td  class ="" > Username: </ td >
                        
< td >
                            
< input  type ="text"  class ="inputNormal"  name ="username"  title ="aaaaaaaaaaaa" />
                            
< span  id ="errorsDiv_username" ></ span >
                        
</ td >
                    
</ tr >
                    
< tr >
                        
< td  class ="" > Password: </ td >
                        
< td >
                            
< input  type ="password"  class ="inputNormal"  name ="password"   />
                            
< span  id ="errorsDiv_password"   />
                        
</ td >
                    
</ tr >
                    
< tr >
                        
< td  class ="" > Confirm Password: </ td >
                        
< td >
                            
< input  type ="password"  class ="inputNormal"  name ="confirm"   /> &nbsp;&nbsp;&nbsp;&nbsp;
                            
< span  id ="errorsDiv_confirm"   />
                        
</ td >
                    
</ tr >
                    
< tr >
                        
< td  class ="" > E-mail: </ td >
                        
< td >
                            
< input  type ="text"  class ="inputNormal"  name ="email"   />
                            
< span  id ="errorsDiv_email"   />
                        
</ td >
                    
</ tr >
                    
< tr >
                        
< td  class ="" >   </ td >
                        
< td  />
                    
</ tr >
                    
< tr >
                        
< td  class ="" >
                            
< input  type ="submit"  class ="buttonstyle"  value ="Check"   />< br  />
                        
</ td >
                        
< td  />
                    
</ tr >
                
</ tbody >
            
</ table >
        
</ form >
    
</ body >
</ html >

posted on 2009-01-17 16:47 礼物 阅读(1304) 评论(2)  编辑  收藏 所属分类: yav

评论

# re: (原创)yav - javascript validation tool 2009-09-08 20:36 tj
不错!支持你!  回复  更多评论
  

# re: (原创)yav - javascript validation tool 2009-09-09 09:49 李彬
谢谢  回复  更多评论
  


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

网站导航: