jquery validate的漂亮css样式验证

自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢

页面代码代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <HTML xmlns="http://www.w3.org/1999/xhtml">  
  3. <HEAD><TITLE>鼠标悬停 - 蘋果·志 - goldapple's blog</TITLE>  
  4. <META http-equiv=Content-Type content="text/html; charset=utf-8">  
  5. <STYLE type=text/css>  
  6. BODY {  
  7.     FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif  
  8. }  
  9.  {  
  10.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px  
  11. }  
  12. A {  
  13.     DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none  
  14. }  
  15. UL {  
  16.     MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none  
  17. }  
  18. LI {  
  19.      FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center  
  20. }  
  21. LABEL {  
  22.     DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px  
  23. }  
  24. input.error{  
  25. border: 2px dashed red;  
  26. }  
  27. </STYLE>  
  28.   
  29. <SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT>  
  30. <SCRIPT src="jquery.validate.js" type=text/javascript></SCRIPT>  
  31. <SCRIPT type=text/javascript>  
  32.       
  33.           
  34. $(function(){  
  35.           
  36.               
  37.           
  38.               
  39.   $('#a input').hover(function(){  
  40.                           
  41.     $(this).parent().find('label').animate({opacity:"show",left:"-85px"},500);//.show();  
  42.    },function(){  
  43.                               
  44.    $(this).parent().find('label').animate({opacity:"hide",left:"-105px"},500);//.hide();  
  45.    });    
  46.       
  47.      
  48.      
  49.      
  50.    $("#signupForm").validate({  
  51.         
  52.         rules: {  
  53.                password: {  
  54.                 required: true,  
  55.                 minlength: 5  
  56.                },  
  57.                name:{  
  58.                  required:true  
  59.                }  
  60.   },  
  61.         messages: {  
  62.            password: {  
  63.             required: "请输入密码",  
  64.             minlength: jQuery.format("密码不能小于{0}个字符")  
  65.            },  
  66.            name:{  
  67.              required:"测试"  
  68.            }  
  69.   },success:function(){  
  70.    $("label.error").remove();  
  71.   }  
  72.     });  
  73.      
  74.   
  75. })  
  76.           
  77.   
  78.   
  79.   
  80.   
  81.   
  82. </SCRIPT>  
  83.   
  84. <META content="MSHTML 6.00.2900.5803" name=GENERATOR></HEAD>  
  85. <BODY>  
  86. <form id="signupForm">  
  87. <div id="a">  
  88. <UL>  
  89.   <LI><div><input type="text" name="password"></div> </LI>  
  90.   <LI><input type="text" name="name"> </LI>  
  91. </UL>  
  92. </div>  
  93. </form>  
  94. </BODY></HTML>  

 

posted @ 2015-01-30 08:44  技术狂  阅读(7895)  评论(1)  编辑  收藏  举报