jquery结合CSS使用validate实现漂亮的验证
自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证希望大家喜欢
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>鼠标悬停-蘋果·志-goldapple'sblog</TITLE>
<METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8">
<STYLEtype=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:200pxauto;WIDTH:632px;LIST-STYLE-TYPE:none
}
LI{
FLOAT:left;MARGIN:0px20px;WIDTH:164px;LINE-HEIGHT:39px;POSITION:relative;HEIGHT:36px;TEXT-ALIGN:center
}
LABEL{
DISPLAY:none;BACKGROUND:url(images/hover.gif)no-repeat0px0px;LEFT:-16px;WIDTH:200px;LINE-HEIGHT:68px;POSITION:absolute;TOP:-100px;HEIGHT:76px
}
input.error{
border:2pxdashedred;
}
</STYLE>
<SCRIPTsrc="images/jquery.min.js"type=text/javascript></SCRIPT>
<SCRIPTsrc="jquery.validate.js"type=text/javascript></SCRIPT>
<SCRIPTtype=text/javascript>
$(function(){
$('#ainput').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>
<METAcontent="MSHTML6.00.2900.5803"name=GENERATOR></HEAD>
<BODY>
<formid="signupForm">
<divid="a">
<UL>
<LI><div><inputtype="text"name="password"></div></LI>
<LI><inputtype="text"name="name"></LI>
</UL>
</div>
</form>
</BODY></HTML>
是不是非常漂亮呢，下伙伴们也可以按照自己的要求美化美化，希望小伙伴们能够喜欢。