当前位置： 代码迷 >> JavaScript >> 用户注册时用到的各种js代码（ajax证验）
  详细解决方案

用户注册时用到的各种js代码（ajax证验）

热度：352   发布时间：2012-10-24 14:15:58.0
用户注册时用到的各种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:services@dekaron.com.cn">services@dekaron.com.cn</a></p>
			<p>版权所有BEIJING WONDERSERVICE TEC&amp;DEV CO.,LTD &nbsp;北京文德荣达科技开发有限公司</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;
	}

}

?

?

?

?

?

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.