- 浏览: 330413 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
di1984HIT:
学习了~
Spring scope="prototype" -
netkiller.github.com:
路还很长看看我的博客 http://netkiller.git ...
写博客是个好习惯 -
ooo456mmm:
JAVA 设计模式之——动态代理 -
hanmiao:
问题是这么问的:请使用 Java 的基本数据类型表示壹下单链表 ...
JAVA数据结构之——单链表的逆序 -
hanmiao:
谢谢,今天刚好有人问我这个问题,结果没有答上来,看了你这篇文章 ...
JAVA数据结构之——单链表的逆序
用户注册时用到的各种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&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; } }
- signup.rar (17.1 KB)
- 下载次数: 61
相关推荐
本项目名为“原生js仿京东注册页面表单验证代码”,其主要目标是利用JavaScript实现一个与京东注册页面类似的表单验证功能。下面将详细探讨相关知识点。 1. **表单元素与事件监听**: - 在HTML中,表单元素如`...
在用户注册场景中,Ajax可以提高用户体验,因为在后台验证用户信息时,前端页面不会发生跳转或刷新,用户可以即时看到验证结果。 在这个实例中,"Ajax之用户注册"可能包括以下几个关键知识点: 1. **ASP.NET表单...
本示例涉及的是使用jQuery实现京东会员注册页面的表单验证代码,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了DOM操作、事件处理、...
在本项目中,"jQuery仿京东会员注册页面表单验证代码特效.zip" 是一个包含用于创建类似京东会员注册页面的JavaScript代码示例。这个压缩包的核心是实现一个具有交互性和用户体验良好的注册表单验证功能。下面我们将...
"jQuery个性用户注册进度条代码"就是一个很好的示例,它利用了jQuery库来提升用户在注册过程中的交互体验。这个项目借助了两个关键的JavaScript库:`jquery.easing.1.3.js`和`jquery-1.8.2.js`。 `jQuery`是一个...
本项目“jQuery实现digg风格的表单验证和验证提示的用户注册表单”专注于利用jQuery来创建高效且用户体验良好的表单验证机制,其灵感来自于著名的Digg网站的注册表单设计。 Digg风格的表单验证通常意味着简洁、实时...
用户登录注册则会用到AJAX进行前后端的数据交互,同时需要处理错误和验证用户输入。 此外,这个项目还可能涉及到了一些现代JavaScript的特性,如Promise用于异步处理,ES6的解构赋值和箭头函数简化代码,以及Vue.js...
5. **AJAX(Asynchronous JavaScript and XML)**:如果项目中包含与服务器的交互,JavaScript可能会使用AJAX技术来异步发送请求,验证用户名是否已被占用,或者将注册信息发送到服务器进行处理。这通常涉及到`...
在用户注册过程中,使用Ajax可以让用户在提交信息时实现页面无刷新验证,例如实时检查用户名是否已存在,提高交互性。通过发送异步请求到服务器,Ajax可以获取验证结果并立即显示给用户,而无需等待整个表单提交后才...
此“ajax+php无刷新回贴和注册检验”压缩包文件包含了一个实例,它展示了如何利用这两种技术实现无刷新的用户交互,如在论坛或社交平台上进行回复和注册时的实时验证。 1. **Ajax**:Ajax 是一种在无需刷新整个网页...
在本项目中,我们主要探讨的是使用JavaScript进行用户注册页面的开发。...在完成这个用户注册实例后,你可以进一步扩展功能,例如添加AJAX异步通信,实现实时验证或与服务器端接口交互,存储用户数据等。
在IT行业中,构建一个用户注册页面是Web应用开发的基础步骤之一。这个特定的"用户注册页面jsp"项目涉及到了几个关键的技术知识点,包括Java JSP(JavaServer Pages)、密码强度判断、年月日时间选择以及jQuery库的...
该压缩包文件“简洁html5登录注册js验证网页模板_登录 注册 login form验证 后台.zip”包含了一个用于创建用户登录和注册功能的前端模板。这个模板利用HTML5、CSS和JavaScript技术,实现了对用户输入的有效性验证,...
在实现登录界面时,我们通常会用到`<form>`标签来创建表单,它包含了用户的输入字段。例如,可以使用`<input>`标签来创建用户名和密码的输入框,代码示例如下: ```html 用户名: ...
在本资源中,你将找到三个完整的Java注册登录模块源代码,这些模块涵盖了Web开发中的重要环节,包括用户注册和身份验证。以下是这些模块中涉及的关键知识点和详细说明: 1. **验证码技术**:验证码是一种防止自动...
jquery框架实现的ajax 验证用户名是否存在的部分JS 代码如下: $(“#accounts”).formValidator({onshow:”请输入用户名”,onfocus:”用户名至少4个字符,最多10个字符”,oncorrect:”该用户名可以注册”})....
在开发Web应用时,尤其是涉及到用户注册功能时,确保用户名的独特性是非常重要的。"用户名验证是否已注册"这个主题就是关于在ASP.NET平台下,利用AJAX技术实现实时检查用户名是否已被其他用户占用的功能。这不仅可以...
该压缩包文件“简洁html5登录注册js验证网页模板_登录 注册 login form验证 后台.rar”包含了一个基于HTML5、JavaScript的登录注册界面模板,重点在于前端表单的验证功能。以下将详细解析这一模板中的关键知识点: ...