jquery validate的漂亮css样式验证

时间：2015-01-29 09:20:42 阅读：184 评论：0 收藏：0 [点我收藏+]

标签：

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

页面代码代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<HTML xmlns="http://www.w3.org/1999/xhtml">  
<HEAD><TITLE>鼠标悬停 - 蘋果·志 - goldapple‘s blog</TITLE>  
<META http-equiv=Content-Type content="text/html; charset=utf-8">  
<STYLE type=text/css>  
BODY {  
    FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif  
}  
 {  
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px  
}  
A {  
    DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none  
}  
UL {  
    MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none  
}  
LI {  
     FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center  
}  
LABEL {  
    DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px  
}  
input.error{  
border: 2px dashed red;  
}  
</STYLE>  
  
<SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT>  
<SCRIPT src="jquery.validate.js" type=text/javascript></SCRIPT>  
<SCRIPT type=text/javascript>  
      
          
$(function(){  
          
              
          
              
  $(‘#a input‘).hover(function(){  
                          
    $(this).parent().find(‘label‘).animate({opacity:"show",left:"-85px"},500);//.show();  
   },function(){  
                              
   $(this).parent().find(‘label‘).animate({opacity:"hide",left:"-105px"},500);//.hide();  
   });    
      
     
     
     
   $("#signupForm").validate({  
        
        rules: {  
               password: {  
                required: true,  
                minlength: 5  
               },  
               name:{  
                 required:true  
               }  
  },  
        messages: {  
           password: {  
            required: "请输入密码",  
            minlength: jQuery.format("密码不能小于{0}个字符")  
           },  
           name:{  
             required:"测试"  
           }  
  },success:function(){  
   $("label.error").remove();  
  }  
    });  
     
  
})  
          
  
  
  
  
  
</SCRIPT>  
  
<META content="MSHTML 6.00.2900.5803" name=GENERATOR></HEAD>  
<BODY>  
<form id="signupForm">  
<div id="a">  
<UL>  
  <LI><div><input type="text" name="password"></div> </LI>  
  <LI><input type="text" name="name"> </LI>  
</UL>  
</div>  
</form>  
</BODY></HTML>  

jquery_validate漂亮的验证.zip (323 KB)
下载次数: 680

jquery_validator漂亮的css验证.zip (

jquery validate的漂亮css样式验证

标签：

原文地址：http://www.cnblogs.com/ranzige/p/4258549.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行