javascript 网站注册页面的客户端验证程序
/*
* 网站注册页面验证,本人花了将近一天的时间弄好的,希望朋友们多多提意见,进一步优化这个表单验证,下面配有详细的注释
* 我的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,"");
}
}
摘自 代俊建的专栏
