<!DOCTYPE html>
<html>
<head>
<title>表單提交驗證功能</title>
<meta charset="utf-8"/>
<script src="scripts/jquery-1.11.3.js"></script>
</head>
<body>
<fieldset>
<legend>用戶注冊頁面</legend>
<form onsubmit="return formValidator();" id="myform" name="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>確認密碼:</td>
<td>
<input type="password" id="repwd">
</td>
<td>
<div id="repwdTip"></div>
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<input type="text" id="addr">
</td>
<td>
<div id="addrTip"></div>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" id="submit" value="注冊">
</td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
* 表單提交實現方式
* * 通過submit按鈕提交表單
* * 表單具有onsubmit事件
* * 表單具有submit()方法
*
* 通過DOM獲取<form>表單的方式
* * getElementById("formId")
* * window.document.forms[0]
* * window.document.表單名稱
*
* 事件對象,return value(返回值)
* * true - 允許默認事件(行為)執行
* * false - 阻止默認事件(行為)執行
*
* 如何實現表單提交驗證
* * 用戶名 - 非空,只能輸入英文+數字,長度在6至12之間
* * 密碼 - 非空,只能輸入英文,長度只能為6
* * 確認密碼 - 兩次密碼輸入一致
* * 地址 - 非空
*
* 功能
* * 對應的input獲取焦點時,給出提示內容
* * 對應的input失去焦點時,做出驗證
* * 表單提交時,保證上述所有input驗證通過
*/
// 用戶名的驗證
function userValidator(){
var regExp = /^[a-zA-Z0-9]{6,12}$/;
// 做出驗證
if(this.value == null || this.value == ""){
// 為空
$("#userTip").text("用戶名不能為空.").css("color","red").css("font-weight","bolder");
return false;
}else if(!regExp.test(this.value)){
// 不匹配
$("#userTip").text("用戶名輸入錯誤.").css("color","red").css("font-weight","bolder");
return false;
}else{
// 輸入正確
$("#userTip").text("用戶名輸入正確.").css("color","green").css("font-weight","bolder");
return true;
}
}
function pwdValidator(){
var regExp = /^[a-zA-Z]{6}$/;
if(this.value == null || this.value == ""){
// 為空
$("#pwdTip").text("密碼不能為空.").css("color","red").css("font-weight","bolder");
return false;
}else if(!regExp.test(this.value)){
// 不匹配
$("#pwdTip").text("密碼輸入錯誤.").css("color","red").css("font-weight","bolder");
return false;
}else{
// 輸入正確
$("#pwdTip").text("密碼輸入正確.").css("color","green").css("font-weight","bolder");
return true;
}
}
function repwdValidator(){
var regExp = /^[a-zA-Z]{6}$/;
if(this.value == null || this.value == ""){
// 為空
$("#repwdTip").text("確認密碼不能為空.").css("color","red").css("font-weight","bolder");
return false;
}else if(!regExp.test(this.value)){
// 不匹配
$("#repwdTip").text("確認密碼輸入錯誤.").css("color","red").css("font-weight","bolder");
return false;
}else if(this.value != $("#pwd").val()){
// 兩次密碼輸入不一致
$("#repwdTip").text("兩次密碼輸入不一致.").css("color","red").css("font-weight","bolder");
return false;
}else{
// 輸入正確
$("#repwdTip").text("確認密碼輸入正確.").css("color","green").css("font-weight","bolder");
return true;
}
}
function addrValidator(){
if(this.value == null || this.value == ""){
$("#addrTip").text("地址不能為空.").css("color","red").css("font-weight","bolder");
return false;
}else{
$("#addrTip").text("地址輸入正確.").css("color","green").css("font-weight","bolder");
return true;
}
}
$("#user").focus(function(){
// 給出提示內容
$("#userTip").text("用戶名必須為6至12之間的英文和數字.").css("color","blue").css("font-weight","bolder");;
}).blur(userValidator);
$("#pwd").focus(function(){
$("#pwdTip").text("密碼必須為6位的英文.").css("color","blue").css("font-weight","bolder");
}).blur(pwdValidator);
$("#repwd").focus(function(){
$("#repwdTip").text("確認密碼必須為6位的英文.").css("color","blue").css("font-weight","bolder");
}).blur(repwdValidator);
$("#addr").focus(function(){
$("#addrTip").text("必須輸入地址.").css("color","blue").css("font-weight","bolder");
}).blur(addrValidator);
// 定義一個函數formValidator()用於驗證表單
function formValidator(){
// 上述所有驗證通過
if(userValidator()&&pwdValidator()&&repwdValidator()&&addrValidator()){
// 允許表單提交
return true;
}else{
return false;
}
}
</script>
</body>
</html>