自己結合了在網上找的驗證功能和漂亮的提示同能後做出來的驗證
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="valid4.aspx.cs" Inherits="ImgAll.valid4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
}
body {
margin: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px
}
a {
color: #000000;
display: block;
height: 36px;
text-decoration: none;
width: 164px;
}
ul {
list-style-type: none;
margin: 200px auto;
width: 632px;
}
li {
float: left;
height: 36px;
line-height: 39px;
margin: 0px 20px;
position: relative;
text-align: center;
width: 164px;
}
label {
background: url(images/hover.gif) no-repeat 0px 0px;
display: none;
height: 76px;
left: -16px;
line-height: 68px;
position: absolute;
top: -100px;
width: 200px;
}
input.error {
border: 2px dashed red;
}
</style>
<script src="scripts/jquery-1.8.2.js"></script>
<script src="scripts/jquery.validate.js"></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.validator.format("密碼不能小於{0}個字符")
},
name: {
required: "測試"
}
},
success: function() {
$("label.error").remove();
}
});
})
</script>
</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>
<input type="submit" value="提交"/>
</form>
</body>
</html>
如圖：
