jquery结合CSS使用validate实现漂亮的验证

时间:2022-10-02 09:59:35

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!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>

是不是非常漂亮呢,下伙伴们也可以按照自己的要求美化美化,希望小伙伴们能够喜欢。