用户注册时用到的各种js代码（ajax验证）
最近在做前台开发时，遇到一个用户注册的页面，里面需要进行各种各样的验证：身份证号码检查，用户名、邮箱是否存在（AJAX技术）等等。
页面见附件。
具体页面代码：
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>用户注册</title>
<link href="../css/zhuce.css" rel="stylesheet" type="text/css" />
<link href="../css/gonggong.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="../common/js/flash.js"></script>
<script language="javascript" type="text/javascript" src="../js/mootools.js"></script>
<!--检查各种限制-->
<script language="javascript">
var flagEMAIL = false;
var flagACCOUNT_NAME = false;
var flagNICK_NAME = false;
var flagUSER_NUMBER = false;
function checkInfo(codeType, viewType, codeTY) {
var xmlHttp;
try {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var result = xmlHttp.responseText;
if(result == 1){
document.getElementById(viewType).style.color = "#00FF00";
document.getElementById(viewType).innerHTML = "OK";
eval("flag"+codeTY +" = true");
} else {
document.getElementById(viewType).style.color = "#FF0000";
document.getElementById(viewType).innerHTML = result;
eval("flag"+codeTY +" = false");
}
}
};
var codeValue = document.getElementById(codeType).value;
var url = "./check_info";
url = url + "?codeTY=" + codeTY + "&codeValue=" + codeValue;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function ConcetEmail() {
if(checkEmail() == false) {
return false;
}
checkInfo("email", "tetEm", "EMAIL");
return flagEMAIL;
}
function checkEmail() {
var re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
var email = document.formlogo.email.value;
if (email != null && email.length > 0) {
if (!re.test(email)) {
alert("对不起，你输入的Email不合法！");
document.formlogo.email.focus();
return false;
} else {
return true;
}
} else {
return true;
}
}
function checkAccountName() {
if(checkNameByRE() == false) {
return false;
}
checkInfo("accountName", "tetAccName", "ACCOUNT_NAME");
return flagACCOUNT_NAME;
}
function checkNickName() {
checkInfo("nickName","tetNick","NICK_NAME");
return flagNICK_NAME;
}
function checkUserNumber() {
if(checkUserId() == false) {
return false;
}
checkInfo("userNumber", "tetId", "USER_NUMBER");
return flagUSER_NUMBER;
}
</script>
<!-- 必填项不可为空 -->
<script language="javascript">
function checkPwdLength(pwd) {
var v = pwd.value;
if(v.length>7 && v.length<17)
return false;
else return true;
}
function on_submit() {
if (checkAccountName() == false) {
document.formlogo.accountName.focus();
return;
}
if (document.formlogo.password.value == "") {
alert("用户密码不能为空，请输入密码！");
document.formlogo.password.focus();
return;
}
if (checkPwdLength(document.formlogo.password)) {
alert("请重新输入8-16位密码");
document.formlogo.password.focus();
return;
}
if (document.formlogo.repaswod.value == "") {
alert("用户确认密码不能为空，请输入密码！");
document.formlogo.repaswod.focus();
return;
}
if (checkPwdLength(document.formlogo.repaswod)) {
alert('请重新输入8-16位密码');
document.formlogo.repaswod.focus();
return;
}
if (document.formlogo.password.value != document.formlogo.repaswod.value) {
alert("密码与确认密码不同");
document.formlogo.repaswod.focus();
return;
}
if (checkNickName() == false) {
document.formlogo.nickName.focus();
return;
}
if (document.formlogo.userName.value == "") {
alert("玩家姓名不能为空，请输入姓名！");
document.formlogo.userName.focus();
return;
}
var UserId = document.formlogo.userNumber.value;
if (UserId.length != 18 && UserId.length != 15) {
alert("请输入合法的身份证件号码！！");
document.formlogo.userNumber.focus();
return;
}
var age = document.formlogo.age.value;
if (isNaN(age) || age == "") {
alert('请填写正确的年龄');
document.formlogo.age.focus();
return;
}
if (document.formlogo.userNumber.value == "") {
alert("身份证不能为空，请输入身份证号码！");
document.formlogo.userNumber.focus();
return;
}
if (document.formlogo.question.value == "") {
alert("密保问题不能为空，请输入密保问题！");
document.formlogo.question.focus();
return;
}
if (document.formlogo.answer.value == "") {
alert("密保答案不能为空，请输入密保答案！");
document.formlogo.answer.focus();
return;
}
if (checkUserNumber() == false) {
return;
}
if(ConcetEmail() == false) {
return;
}
if (!document.formlogo.xieyi.checked) {
alert("您仔细阅读我们的用户协议");
document.formlogo.xieyi.focus();
return;
}
document.formlogo.submit();
}
</script>
<script language="javascript">
function checkNameByRE() {
var accountName = document.formlogo.accountName.value;
var wordch;
for (i = 0; i < accountName.length; i++) {
ch = accountName.charCodeAt(i);
if (!(ch >= 65 && ch <= 90) && !(ch >= 97 && ch <= 122)
&& !(ch >= 48 && ch <= 57) && !(ch == 45)) {
alert("用户名只能是英文字母和数字。");
document.formlogo.accountName.focus();
return false;
}
}
return true;
}
</script>
<!-- 身份证检测 -->
<script language="javascript">
var vcity = {
11 : "北京",
12 : "天津",
13 : "河北",
14 : "山西",
15 : "内蒙古",
21 : "辽宁",
22 : "吉林",
23 : "黑龙江",
31 : "上海",
32 : "江苏",
33 : "浙江",
34 : "安徽",
35 : "福建",
36 : "江西",
37 : "山东",
41 : "河南",
42 : "湖北",
43 : "湖南",
44 : "广东",
45 : "广西",
46 : "海南",
50 : "重庆",
51 : "四川",
52 : "贵州",
53 : "云南",
54 : "西藏",
61 : "陕西",
62 : "甘肃",
63 : "青海",
64 : "宁夏",
65 : "新疆",
71 : "台湾",
81 : "香港",
82 : "澳门",
91 : "国外"
};
function checkCard() {
var cardidstr = document.formlogo.userNumber.value;
if (cardidstr.length == 18) {
return check18Card(cardidstr);
} else if (cardidstr.length == 15) {
return check15Card(cardidstr);
} else if(cardidstr.length != 0){
alert("身份地址不符合要求!");
document.formlogo.userNumber.value = "";
document.formlogo.userNumber.focus();
return false;
} else {
return true;
}
}
function check18Card(cardidstr) {
var ycode = cardidstr.substr(cardidstr.length - 1);
var cardLastCode = ycode.charCodeAt(ycode);
var isum = 0;
var re = /^\d{17}(\d|X)$/i;
if (cardidstr != null && cardidstr.length > 0) {
if (!re.test(cardidstr)) {
alert("卡号不符合要求!");
document.formlogo.userNumber.focus();
return false;
}
if (vcity[parseInt(cardidstr.substr(0, 2))] == null) {
alert("身份地址不符合要求!");
document.formlogo.userNumber.focus();
return false;
} else {
document.formlogo.address.value = vcity[parseInt(cardidstr.substr(0, 2))];
}
sbirthday = cardidstr.substr(6, 4) + "-"
+ Number(cardidstr.substr(10, 2)) + "-"
+ Number(cardidstr.substr(12, 2));
var date = new Date(sbirthday.replace(/-/g, "/"));
if (sbirthday != (date.getFullYear() + "-" + (date.getMonth() + 1)
+ "-" + date.getDate())) {
alert("出生日期非法!" + date.getFullYear() + "-" + date.getMonth()
+ "-" + date.getDate());
document.formlogo.userNumber.focus();
return false;
}
if (cardLastCode != 120 && cardLastCode != 88) {
for ( var i = 17; i >= 0; i--) {
isum += (Math.pow(2, i) % 11)
* parseInt(cardidstr.charAt(17 - i), 11);
}
if (isum % 11 != 1) {
alert("身份证非法!");
document.formlogo.userNumber.focus();
return false;
}
}
return true;
} else {
document.formlogo.userNumber.focus();
return false;
}
}
function check15Card(cardidstr) {
var isum = 0;
var re = /^\d{14}(\d|X)$/i;
if (cardidstr.length > 0 && cardidstr != null) {
if (!re.test(cardidstr)) {
alert("卡号不符合要求!");
document.formlogo.userNumber.focus();
return false;
}
if (vcity[parseInt(cardidstr.substr(0, 2))] == null) {
alert("身份地址不符合要求!");
document.formlogo.userNumber.focus();
return false;
} else {
document.formlogo.address.value = vcity[parseInt(cardidstr.substr(0, 2))];
}
sbirthday = "19" + cardidstr.substr(6, 2) + "-"
+ Number(cardidstr.substr(8, 2)) + "-"
+ Number(cardidstr.substr(10, 2));
var date = new Date(sbirthday.replace(/-/g, "/"));
if (sbirthday != (date.getFullYear() + "-" + (date.getMonth() + 1)
+ "-" + date.getDate())) {
alert("出生日期非法!" + date.getFullYear() + "-" + date.getMonth()
+ "-" + date.getDate());
document.formlogo.userNumber.focus();
return false;
}
return true;
} else {
alert("请输入身份证号!");
document.formlogo.userNumber.focus();
return false;
}
}
function checkUserId() {
if(checkCard() == false) {
return false;
}
UserId = document.formlogo.userNumber.value;
uid_length = UserId.length;
if (uid_length == 18) {
userbrith = UserId.substr(6, 4);
theDate = new Date();
today = theDate.getYear();
userage = today - userbrith;
document.formlogo.age.value = userage;
userSex = UserId.substr(16, 1);
if (userSex % 2 == 1) {
document.formlogo.man.checked = true;
} else {
document.formlogo.women.checked = true;
}
} else if(uid_length == 15){
userbrith = "19" + UserId.substr(6, 2);
theDate = new Date();
today = theDate.getYear();
userage = today - userbrith;
document.formlogo.age.value = userage;
userSex = UserId.substr(14, 1);
} else {
return true;
}
return true;
}
function checkAge() {
var age = document.formlogo.age.value;
if (isNaN(age)) {
alert('请填写正确的年龄');
document.formlogo.age.value = "";
document.formlogo.age.focus();
return;
}
}
</script>
</head>
<body>
<div class="all">
<div class="logo"><a href="http://www.dekaron.com.cn/"><img src="../images/logo.jpg" /></a></div>
<div class="nav"><div class="lj_f"></div>
<div class="flash"><script type="text/javascript">setFlash("http://image.dekaron.com.cn/common/menu/submenu2.swf?top_num=2&main_num=2",690,60);</script>
</div></div>
<br class="ml_ClearFloat" />
<div class="main">
<img src="../images/zhzc.jpg" />
<p class="p">登录注册成功后，能享受公司提供的精彩游戏和其他业务</p>
<div class="hui">
<p>本网站的游戏全部已经纳入“网络游戏防沉迷系统”，所以为了维护您的自身权益和游戏帐号安全，请务必填写真实，准确的姓名与身份证号码。</p>
</div>
<form name="formlogo" method="post" action="join_member" id="formlogo">
<div class="mainform">
<p><font>用户名和昵称注册后不能修改，请慎重填写</font></p>
<table width="630" border="1" cellpadding="0" cellspacing="0" style="border-color:#CCCCCC; border-collapse:collapse;">
<tr>
<td width="115" height="27" align="left" valign="middle" bgcolor="#EFEFEF"><img src="../images/hoverlibj.jpg" class="mr5"/>用户名</td>
<td class="p5"><input type="text" name="accountName" class="text" id="accountName" onblur="checkAccountName()"/><span id="tetAccName" ></span></td>
</tr>
<tr>
<td width="115" height="27" align="left" valign="middle" bgcolor="#EFEFEF"><img src="../images/hoverlibj.jpg" class="mr5"/>密码</td>
<td class="p5"><input type="password" name="password" class="text" /><span style='color:#FF0000'>由8~16个数字和英文字母组成 （特殊字符不可以用）</span></td>
</tr>
<tr>
<td width="115" height="27" align="left" valign="middle" bgcolor="#EFEFEF"><img src="../images/hoverlibj.jpg" class="mr5"/>重复密码</td>
<td class="p5"><input type="password" name="repaswod" class="text" /><span style='color:#FF0000'>由8~16个数字和英文字母组成 （特殊字符不可以用）</span></td>
</tr>
<tr>
<td width="115" height="27" align="left" valign="middle" bgcolor="#EFEFEF"><img src="../images/hoverlibj.jpg" class="mr5"/>昵称</td>
<td class="p5"><input type="text" name="nickName" id="nickName" class="text" onblur="checkNickName()" /><span id="tetNick"></span></td>
</tr>
</table>
<p style="margin-top:20px; border-top:1px dashed #CCC;"><font>以真实姓名和身份证号码为本人确认的唯一根据，同时是防沉迷系统是否纳入的根据，请慎重填写。</font></p>
<table width="630" border="1" cellpadding="0" cellspacing="0" style="border-color:#CCCCCC; border-collapse:collapse;">
<tr>
<td width="115" height="27" bgcolor="#EFEFEF"><img src="../images/hui.jpg" class="mr5" />真实姓名</td>
<td class="p5"><input type="text" name="userName" id="userName" class="text" /></td>
</tr>
<tr>
<td width="115" height="27" bgcolor="#EFEFEF"><img src="../images/hui.jpg" class="mr5" />身份证号码</td>
<td class="p5"><input type="text" name="userNumber" id="userNumber" class="text" onblur="checkUserNumber()"/><span id="tetId"></span></td>
</tr>
<tr>
<td width="115" height="27" bgcolor="#EFEFEF"><img src="../images/hui.jpg" class="mr5" />玩家性别</td>
<td class="p5"><input type="radio" checked="checked" name="sex" value="1" id="man" />男 <input type="radio" name="sex" value="0" id="women" />女</td>
</tr>
<tr>
<td width="115" height="27" bgcolor="#EFEFEF"><img src="../images/hui.jpg" class="mr5" />玩家年龄</td>
<td class="p5"><input type="text" name="age" onblur="checkAge()"/></td>
</tr>
<tr>
<td width="115" height="27" bgcolor="#EFEFEF"><img src="../images/hui.jpg" class="mr5" />玩家联系地址</td>
<td class="p5"><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<td width="115" height="27" bgcolor="#EFEFEF"><img src="../images/hui.jpg" class="mr5" />玩家联系电话</td>
<td class="p5"><input type="text" name="phone" id="phone" /></td>
</tr>
</table>
<div class="blank20"></div>
<table width="630" border="1" cellpadding="0" cellspacing="0" style=" border-color:#CCCCCC; border-collapse:collapse; margin-top:20px;">
<tr>
<td width="115" height="27" align="left" valign="middle" bgcolor="#EFEFEF"><img src="../images/hoverlibj.jpg" class="mr5"/>密保问题</td>
<td class="p5"><input type="text" name="question" class="text" /></td>
</tr>
<tr>
<td width="115" height="27" align="left" valign="middle" bgcolor="#EFEFEF"><img src="../images/hoverlibj.jpg" class="mr5"/>密保问题答案</td>
<td class="p5"><input type="text" name="answer" class="text" /></td>
</tr>
<tr>
<td width="115" height="55" rowspan="2" align="left" valign="middle" bgcolor="#EFEFEF"><img src="../images/hoverlibj.jpg" class="mr5"/>邮 箱</td>
<td height="25" align="left" valign="middle" class="p5">
<input type="text" name="email" id="email" onblur="ConcetEmail()" class="text"/><span id="tetEm"></span></td>
</tr>
<tr>
<td height="20" align="left" valign="middle" class="p5"><a href="http://www.sina.com.cn" style="color:#F00; text-decoration:underline;">推荐您使用新浪邮箱</a></td>
</tr>
</table>
<p style="color:#666;margin-top:20px;"><input type="checkbox" name="xieyi" /><a href="./agreement" target="_blank"> 我已阅读并同意《用户协议》里的所有内容</a></p>
<div class="zhuce"><img src="../images/zcanbj.jpg" style="cursor:pointer;" onclick="on_submit()" /></div>
</div>
</form>
</div>
<!--footer-->
<div class="ml_foot">
<a class="ml_footLogo" href="index.html"></a>
<div class="ml_footText"><br />
<ul>
<li><a href="http://www.dekaron.com.cn/loding/index.html"> 关于我们 </a>|</li>
<li><a href="http://www.dekaron.com.cn/loding/index.html"> 网站地图 </a>|</li>
<li><a href="http://www.dekaron.com.cn/loding/index.html"> 异业合作 </a></li>
</ul>
<p>24小时客户服务热线:4006-700-560 | 传真:010-59312600| 客服邮箱:<a href="mailto:[email protected]">[email protected]</a></p>
<p>版权所有BEIJING WONDERSERVICE TEC&DEV CO.,LTD 北京文德荣达科技开发有限公司</p>
</div>
</div>
</div>
</body>
</html>
做AJAX验证，提交到CheckInfoAction：
package com.ultratech.wdrd.action.regist;
import javax.annotation.Resource;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.springframework.stereotype.Controller;
import com.ultratech.base.framework.BaseAction;
import com.ultratech.wdrd.service.CheckService;
@SuppressWarnings("serial")
@Controller
@ParentPackage("userplat-noauth")
public class CheckInfoAction extends BaseAction {
@Resource
private CheckService service;
private String codeTY;
private String codeValue;
private String message;
private static final String OK = "1";
public void prepare() throws Exception {
}
@Override
public String execute() throws Exception {
message = OK;
if(codeValue != null && codeValue.length() != 0) {
if(codeTY.equals("ACCOUNT_NAME")) {
if( service.checkAccountNameExist(codeValue)) {
message = "用户已存在！";
}
} else if(codeTY.equals("NICK_NAME")) {
if( service.checkNickNameExist(codeValue)) {
message = "昵称已存在！";
}
} else if(codeTY.equals("USER_NUMBER")) {
if( service.checkUserNumberExist(codeValue)) {
message = "身份证号码已存在！";
}
} else if(codeTY.equals("EMAIL")) {
if( service.checkEmailExist(codeValue)) {
message = "邮箱已存在！";
}
} else {
message = "未知的检测数据";
}
} else {
message = "*必填";
}
return SUCCESS;
}
public String getCodeTY() {
return codeTY;
}
public void setCodeTY(String codeTY) {
this.codeTY = codeTY;
}
public String getCodeValue() {
return codeValue;
}
public void setCodeValue(String codeValue) {
this.codeValue = codeValue;
}
public String getMessage() {
return message;
}
}