zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    基本概念和术语
    Html中的<label>标签
    shell17echo打印带颜色的文字
    shell-15 &的三种不同
    shell-14 多个命令以分号隔开
    shell-13 tee管道可以重定向但是不截流
    shell-12实用cat完成文件复制
    shell-11输入内容到文件
    shell-10kill杀死作业号和进程号
    shell-9前后台切换
  • 原文地址：https://www.cnblogs.com/ranzige/p/4258549.html
Copyright © 2011-2022 走看看