您的位置：首页 > 运维架构 > 网站架构

javascript 网站注册页面的客户端验证程序

2012-03-16 22:59 519 查看
/*

* 网站注册页面验证,本人花了将近一天的时间弄好的,希望朋友们多多提意见,进一步优化这个表单验证,下面配有详细的注释

* 我的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,"");

}

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航