快捷導(dǎo)航

表單驗(yàn)證的完整應(yīng)用案例探討

更新時(shí)間：2013年03月29日 17:52:07 作者：

表單問題，是個(gè)糾結(jié)的問題，有時(shí)候程序又要前端去處理，那要看你的后臺(tái)搭檔怎么樣了，接下來一起探討表單驗(yàn)證吧

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

復(fù)制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<title>表單驗(yàn)證的完整應(yīng)用</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: { 
// 注冊(cè)用戶名 
username: { 
required: true, 
minlength: 5, 
maxlength: 12 
}, 
// email 
email: { 
required: true, 
email: true 
}, 
// 密碼 
password: { 
required: true, 
minlength: 6, 
maxlength: 18 
}, 
// 確認(rèn)密碼 
confirm_password: { 
equalTo:"#password" 
}, 
// 檢驗(yàn)驗(yàn)證碼 
captcha: { 
required: true, 
remote: "checkCaptcha.php" 
} 
}, 
messages: { 
// 注冊(cè)用戶名 
username: { 
required: "此項(xiàng)不能為空", 
minlength: "不能少于5個(gè)字符", 
maxlength: "不能多于12個(gè)字符" 
}, 
// email 
email: { 
required: "此項(xiàng)不能為空", 
email: "email格式不正確" 
}, 
// 密碼 
password: { 
required: "此項(xiàng)不能為空", 
minlength: "不能少于6個(gè)字符", 
maxlength: "不能多于18個(gè)字符" 
}, 
// 確認(rèn)密碼 
confirm_password: "兩次輸入密碼不一致", 
// 檢驗(yàn)驗(yàn)證碼 
captcha: { 
required: "請(qǐng)輸入驗(yàn)證碼", 
remote: "驗(yàn)證碼輸入錯(cuò)誤" 
} 
} 
}); 
}); 
</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">確認(rèn)密碼：</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> 