jquery.validate入门demo

工作中经常需要用到js验证,jquery有一款比较不错的表单验证框架(jquery.validate.js)

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3.  <head>   
  4.   <title></title>   
  5.   <script type="text/javascript" src="lib/jquery.js"></script>   
  6.   <script type="text/javascript" src="./jquery.validate.js"></script>   
  7.  </head>   
  8.   
  9.  <body>   
  10.   <script type="text/javascript">   
  11.   <!--   
  12.   
  13.     $(function(){    
  14.   
  15.         $.validator.addMethod("isMobile",function(value, element, params){   
  16.             return this.optional(element)||value=='13420642222';   
  17.         },"请填入正确的手机号码!");   
  18.   
  19.         var v = $("#form1").validate({   
  20.         rules:{   
  21.             text1:{required:true},   
  22.             text2:{required:true,email:true},   
  23.             text4:{required:true,digits:true},   
  24.             text5:{required:true,date:true},   
  25.             text6:{required:true,isMobile:true},   
  26.             text3:{required:true,number:true}   
  27.         },messages:{   
  28.             text1:{required:"请输入姓名"},   
  29.             text2:{required:"email不能为空!",email:"请输入正确的email"},   
  30.             text4:{required:"text4不能为空!",digits:"请输入正确整数"},   
  31.             text5:{required:"text5不能为空!",date:"请输入正确日期"},    
  32.             text3:{required:"text3不能为空!",number:"必须为数字"}   
  33.         },debug:true,    
  34.         onfocusout:false  
  35.         });   
  36.   
  37.            
  38.         $("#ss").click(function(){   
  39.             var check = v.form();   
  40.         /*  v.errorList.push({message:"dasd",element:null});   
  41.             var msg = "";  
  42.              $.each( v.errorList, function(i,v){    
  43.               msg += ((i+1)+"、"+v.message+"\r\n");    
  44.             });    
  45.             if(msg!="") alert(msg);*/  
  46.         });   
  47.     });   
  48.   //-->   
  49.   </script>   
  50.  </body>   
  51.  <form method="post" action="" id="form1">   
  52.     <input type="text" name="text1"><br/>   
  53.     <input type="text" name="text2"><br/>   
  54.     <input type="text" name="text3"><br/>   
  55.     <input type="text" name="text4"><br/>   
  56.     <input type="text" name="text5"><br/>   
  57.     <input type="text" name="text6"><br/>   
  58.     <input type="text" name="text7"><br/>   
  59.     <input type="text" name="text8"><br/>   
  60.   
  61.   
  62.     <input type="button" id="ss" value="提交">   
  63.  </form>   
  64. </html>  

你可能感兴趣的:(validate)