<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單驗(yàn)證</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<fieldset>
<legend>用戶注冊(cè)頁(yè)</legend>
<form id="myform">
<table>
<tr>
<td>用戶名：</td>
<td><input type="text" id="user"></td>
<td><div id="userTip"></div></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" id="pwd"></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td>確認(rèn)密碼：</td>
<td><input type="password" id="repwd"></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td>email地址：</td>
<td><input type="password" id="email"></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="rigist" value="注冊(cè)"></td>
<td></td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
表單驗(yàn)證需求:
不能為空,只能輸入英文+數(shù)字,長(zhǎng)度在6-12位
密碼:
不能為空,只能輸入英文,長(zhǎng)度在6-8之間
確認(rèn)密碼:
與密碼的要求一致
email:不能為空
效果:
獲取焦點(diǎn)事件,要給出輸入提示內(nèi)容
失去焦點(diǎn)事件,完成對(duì)應(yīng)元素的驗(yàn)證
驗(yàn)證成功 - 輸入正確的提示
驗(yàn)證失敗 - 輸入錯(cuò)誤的提示
當(dāng)提交表單之前,保證表單內(nèi)所有元素全部都是驗(yàn)證通過(guò)的。
*/
//1用戶名驗(yàn)證
$("#user").focus(function(){
$("#userTip").text("請(qǐng)輸入英文或數(shù)字,長(zhǎng)度在6-12位之間").css({"color":"black"});
}).blur(function(){
var regExp=/^[a-zA-Z0-9]{6,12}$/;
var $myval=$("#user").val();
if ($myval==""|| $myval==null) {
$("#userTip").text("用戶名輸入不能為空").css({
"color":"red",
"font-weight":"bold"
});
}
else if(!regExp.test($myval)){
$("#userTip").text("用戶名輸入錯(cuò)誤").css({
"color":"red",
"font-weight":"bold"
});
}
else{
$("#userTip").text("輸入正確").css({
"color":"green",
"font-weight":"bold"
});
}
});
</script>
</body>
</html>
