JQuery 结合Yav 验证

本文转自：http://blog.csdn.net/shandian534/article/details/4803931

1、 在工程中加入jquery和yav的js文件

< 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 中


<! 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 >