jquery結(jié)合CSS使用validate實現(xiàn)漂亮的驗證

2024-05-06 16:15:30

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了jquery結(jié)合CSS使用validate實現(xiàn)漂亮的驗證,需要的朋友可以參考下

自己結(jié)合了在網(wǎng)上找的驗證功能和漂亮的提示同能后做出來的驗證希望大家喜歡

<!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>