表單問題，是個糾結的問題，我覺得這個是程序開發(fā)人員要去處理的東西，但是有時候程序又要前端去處理，那要看你的后臺搭檔怎么樣了？苦逼的前端哇，不過還是自己了解一點還是比較好，你搞我也可以搞，你不搞我還可以搞，哈哈。如果對你有用歡迎留言，共同探討，共同進步，廢話不說，貼代碼（為了童鞋們方便，本代碼復制即可用，無需分塊拼湊）：

復制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<title>表單驗證的完整應用</title> 
<style type="text/css"> 
.leftside{width:100px; text-align:right;float:left;} 
label.error{color:#ea5200; margin-left:4px; padding:0px 20px; background:url(http://jt.875.cn/icon/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background:url(http://jt.875.cn/icon/checked.gif) no-repeat 2px 0} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.validate.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$( "#regForm" ).validate({ 
rules: { 
// 注冊用戶名 
username: { 
required: true, 
minlength: 5, 
maxlength: 12 
}, 
// email 
email: { 
required: true, 
email: true 
}, 
// 密碼 
password: { 
required: true, 
minlength: 6, 
maxlength: 18 
}, 
// 確認密碼 
confirm_password: { 
equalTo:"#password" 
}, 
// 檢驗驗證碼 
captcha: { 
required: true, 
remote: "checkCaptcha.php" 
} 
}, 
messages: { 
// 注冊用戶名 
username: { 
required: "此項不能為空", 
minlength: "不能少于5個字符", 
maxlength: "不能多于12個字符" 
}, 
// email 
email: { 
required: "此項不能為空", 
email: "email格式不正確" 
}, 
// 密碼 
password: { 
required: "此項不能為空", 
minlength: "不能少于6個字符", 
maxlength: "不能多于18個字符" 
}, 
// 確認密碼 
confirm_password: "兩次輸入密碼不一致", 
// 檢驗驗證碼 
captcha: { 
required: "請輸入驗證碼", 
remote: "驗證碼輸入錯誤" 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 
<form id="regForm" method="get" action=""> 
<p><label class="leftside">姓名：</label><input type="text" value="" name="username" id="username" /></p> 
<p><label class="leftside">密碼：</label><input type="password" value="" name="password" id="password" /></p> 
<p><label class="leftside">確認密碼：</label><input type="password" value="" name="confirm_password" id="confirm_password" /></p> 
<p><label class="leftside">EMAIL：</label><input type="text" value="" name="email" id="email" /></p> 
</form> 
</body> 
</html> 