/*
* 網站註冊頁面驗證,本人花瞭將近一天的時間弄好的,希望朋友們多多提意見,進一步優化這個表單驗證,下面配有詳細的註釋
* 我的QQ1659397593,歡迎朋友和我交流
* 註意的問題: 引用計數js代碼的路徑 ,本程序有3個頁面組成:表單頁面 註冊成功頁面 js代碼頁面 和一個通過驗證的小圖片組成.圖片自己下載吧,網上很多的
*/
效果如如下: 
//網頁代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<style type="text/css">
input[type = "text"], input[type = "password"] {
width: 150px;
}
</style>
<script type="text/javascript" src="js/checkForm.js">
</script>
</head>
<body>
<fieldset style="width:80% ;margin-left:10%">
<legend>
新用戶註冊
</legend>
<form action="success.html" method="post" id="form">
<table border="1" width="60%" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="20%">
用戶名:
</td>
<td>
<input type="text" name="username" id="username"><span id="usernameSpan"></span>
</td>
</tr>
<tr>
<td>
密碼:
</td>
<td>
<input type="password" name="password" id="password"><span id="passwordSpan"></span>
</td>
</tr>
<tr>
<td>
確認密碼:
</td>
<td>
<input type="password" name="confirm" id="confirm"><span id="confirmSpan"></span>
</td>
</tr>
<tr>
<td>
郵箱:
</td>
<td>
<input type="text" name="email" id="email"><span id="emailSpan"></span>
</td>
</tr>
<tr>
<td>
出生日期:
</td>
<td>
<input type="text" name="birthday" id="birthday"><span id="birthdaySpan"></span>
</td>
</tr>
<tr>
<td>
性別:
</td>
<td>
<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<span id="genderSpan"></span>
</td>
</tr>
<tr>
<td>
興趣:
</td>
<td>
<input type="checkbox" name="interest" value="java">Java <input type="checkbox" name="interest" value="HTML">HTML
<input type="checkbox" name="interest" value="javascript">JavaScript<span id="interestSpan"></span>
</td>
</tr>
<tr>
<td>
城市:
</td>
<td>
<select id="city">
<option value="">-請選擇城市-</option>
<option value="bj" >北京</option>
<option value="gz">廣州</option>
<option value="cd">成都</option>
</select>
<span id="citySpan"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="新用戶註冊">
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
//註冊成功代碼;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<font size="7" color="green">註冊成功!</font>
</body>
</html>
//js腳本代碼:
window.onload = function(){
//通過ID或名字獲取每個對象
var usernameObj = document.getElementById("username");
var passwordObj = document.getElementById("password");
var confirmObj = document.getElementById("confirm");
var emailObj = document.getElementById("email");
var birthdayObj = document.getElementById("birthday");
var genderArr = document.getElementsByName("gender");
var interestArr = document.getElementsByName("interest");
var cityObj = document.getElementById("city");
//設置每個對象的onblur事件(對象失去焦點時發生),並調用各自的方法
usernameObj.onblur = checkUsername;
passwordObj.onblur = checkPassword;
confirmObj.onblur = checkConfirm;
emailObj.onblur = checkEmail;
birthdayObj.onblur = checkBirthday;
genderArr.onblur = checkGender;
interestArr.onblur = checkInterest;
cityObj.onblur = checkCity;
//每個onblur事件的方法,8個方法
function checkUsername(){
var usernameValue = trim(usernameObj.value);
var usernameRegex = /^[a-zA-Z_]\w{0,9}$/;
var msg =" <img src='img/true.gif' style='width:12px'>";
if(usernameValue == null || usernameValue == "")
msg ="<font color='red'>用戶名必須填寫!</font>";
else if(!usernameRegex.test(usernameValue))
msg ="<font color='red'>用戶名格式不正確</font>";
var span = document.getElementById("usernameSpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
function checkPassword(){
var passwordValue = passwordObj.value;
var passwordRegex = /^\w{6,10}$/;
var msg =" <img src='img/true.gif' style='width:12px'>"; //不懂?
if (!passwordValue)
msg = "<font color='red'>密碼必須填寫!</font>";
else
if (!passwordRegex.test(passwordValue)) {
msg = "<font color='red'>密碼必須6-16位</font>";
//alert(msg);
}
var span = document.getElementById("passwordSpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
function checkConfirm(){
var confirmValue = confirmObj.value;
var passwordValue = passwordObj.value;
var msg =" <img src='img/true.gif' style='width:12px'>";
if (!confirmValue)
msg = "<font color='red'>確認密碼必須填寫!</font>";
else if (confirmValue != passwordValue)
msg = "<font color='red'>密碼必須一致!</font>";
var span = document.getElementById("confirmSpan");
span.innerHTML = msg;
return (msg == " <img src='img/true.gif' style='width:12px'>");
}
function checkEmail(){
var emailObjValue = emailObj.value;
var emailRegex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,3}$/;
var msg =" <img src='img/true.gif' style='width:12px'>";
if(!emailObjValue)
msg = "<font color='red'>Email必須填寫!</font>";
else if(!emailRegex.test(emailObjValue))
msg = "<font color='red'>Email格式不正確!</font>";
var span = document.getElementById("emailSpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
function checkBirthday(){
var birthdayValue = birthdayObj.value;
var birthdayRegex = /^([12]\d{3})-(([1-9])|(1[012])|(0[1-9]))-(([1-9])|([12]\d)|(3[01]))$/;
var msg =" <img src='img/true.gif' style='width:12px'>";
if(!birthdayValue)
msg = "<font color='red'>生日必須填寫!</font>";
else if(!birthdayRegex.test(birthdayValue))
msg = "<font color='red'>出生日期格式不正確!</font>";
var span = document.getElementById("birthdaySpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
function checkGender(){
//var genderValue = genderObj.value;
var msg =" <img src='img/true.gif' style='width:12px'>";
if(genderArr[0].checked == genderArr[1].checked)
msg = "<font color='red'>性別必須選擇!</font>";
var span = document.getElementById("genderSpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
function checkInterest(){
var msg =" <img src='img/true.gif' style='width:12px'>";
if(!(interestArr[0].checked || interestArr[1].checked || interestArr[2].checked))
msg = "<font color='red'>興趣必須選擇!</font>";
var span = document.getElementById("interestSpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
function checkCity(){
//var cityValue = cityObj.value;
var msg =" <img src='img/true.gif' style='width:12px'>";
if(!cityObj.value)
msg = "<font color='red'>城市必須選擇!</font>";
var span = document.getElementById("citySpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
//獲取表單對象,並且為表單提交事件寫個方法
var form = document.getElementById("form");
form.onsubmit = function(){
var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkConfirm();
var bEmail = checkEmail();
var bBirthday = checkBirthday();
var bGender = checkGender();
var bInterest = checkInterest();
var bCity = checkCity();
//如果,每個上面的每個對象,驗證成功,則還回true
return bUsername && bPassword && bConfirm && bEmail && bBirthday && bGender && bInterest && bCity;
}
//去除用戶名前後的空格
function trim(s){
return s.replace(/^\s+|\s+$/g,"");
}
}
摘自 代俊建的專欄
