ASP实现ajax注册即时提示代码
ASP #ajax #注册2012-05-10 17:26
实现的提示功能包括：
1、注册时验证数据库用户名是否存在。
2、输入密码时提示密码强度和验证2次密码输入是否一样。
3、注册时验证数据库联系邮箱是否存在。
4、注册时验证用户输入的验证码和系统产生的验证码是否一致。
5、对输入中文验证
6、QQ号码验证
7、身份证号码验证
<!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=gb2312" />
<meta name="copyright" content="Copyright 2008-2009 bbmoo.com All Rights Reserved"/>
<title>yige.org会员注册</title>
<script language="javascript" src="regin.js" type="text/javascript"></script>
<style type="text/css">
.tr,td{
line-height:25px;
font-size:14px;
color: #333;
}
.msg{ color:#FF3300}
.msg2{ color: #006600}
.reg_title{
text-indent:20px;
font-weight:bold;
}
.STYLE1 {color: #FF3300; font-weight:bold;}
</style>
<body>
<form action="reg.asp" method="post" name="form2">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td colspan="4" class="reg_title">用户注册，必填信息</td>
</tr>
<tr>
<td width="14%" align="right">用户名：</td>
<td width="12%"><input name="u_name" id="u_name" type="text" maxlength="10" onblur="isName()" /></td>
<td width="2%"><span class="STYLE1" id="name_re">*</span></td>
<td width="72%" id="name_re_m">4～10个字符，一个中文2个字符</td>
</tr>
<tr>
<td align="right">性 别：</td>
<td><input type="radio" name="u_sex" value="男" />男 <input type="radio" name="u_sex" value="女" />女 <input type="radio" name="u_sex" value="人妖" />人妖</td>
<td><span class="STYLE1" id="sex_re">*</span></td>
<td id="sex_re_m">自己看着选一个</td>
</tr>
<tr>
<td align="right">登陆密码：</td>
<td><input name="u_pass" id="u_pass" type="password" maxlength="12" onblur="password()" onkeyup="showStrongPic();"/></td>
<td><span class="STYLE1" id="pass_re">*</span></td>
<td><span id="lowPic" style="display:" ><img src="images/gread_l_x.gif" /></span>
<span id="midPic" style="display:none"><img src="images/gread_m_x.gif" /></span>
<span id="highPic" style="display:none"><img src="images/gread_h_x.gif" /></span></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input name="u_pass_re" id="u_pass_re" type="password" maxlength="12" onblur="pass_re()" /></td>
<td><span class="STYLE1" id="pass_re_re">*</span></td>
<td id="pass_re_re_m">请您再输入一次密码</td>
</tr>
<tr>
<td align="right">安全问题：</td>
<td><select name="u_ask">
<option value="我的真实姓名">我的真实姓名</option>
<option value="我身份证最后6位数">我身份证最后6位数</option>
<option value="我高中班主任名字">我高中班主任名字</option>
<option value="我最喜欢的颜色">我最喜欢的颜色</option>
<option value="我家里的邮编号码">我家里的邮编号码</option>
</select> </td>
<td><span class="STYLE1">*</span></td>
<td>选一个熟悉的问题</td>
</tr>
<tr>
<td align="right">安全答案：</td>
<td><input name="u_answer" id="u_answer" type="text" maxlength="20" onblur="answer()" /></td>
<td><span class="STYLE1" id="answer_re">*</span></td>
<td id="answer_re_m">上面问题的答案，找回密码时用</td>
</tr>
<tr>
<td align="right">电子邮箱：</td>
<td><input name="u_mail" id="u_mail" type="text" maxlength="20" onblur="isEmail()" /></td>
<td><span class="STYLE1" id="mail_re">*</span></td>
<td id="mail_re_m">取回密码和修改密码时使用，请您正确填写。格式:123567@qq.com </td>
</tr>
<tr>
<td align="right">验证码：</td>
<td><input name="CheckCode" type=text id="CheckCode" size="4" maxlength="4" onblur="isCheckCode()"><img src="Code.asp" onclick="this.src = this.src+'?'+Math.random();" alt="点击刷新验证码" style="cursor:pointer"/>
</td>
<td><span class="STYLE1" id="CheckCode_re">*</span></td>
<td id="CheckCode_re_m">请输入正确的验证码</td>
</tr>
<tr>
<td colspan="4" class="reg_title">其他信息，可不填，建议你填完整</td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td><input name="u_name_zs" id="u_name_zs" type="text" maxlength="4" onblur="name_zs()" /></td>
<td><span class="STYLE1" id="name_zs_re"></span></td>
<td id="name_zs_re_m">兑换积分时用，请正确填写</td>
</tr>
<tr>
<td align="right"><p>联系 Q Q：</p> </td>
<td><input name="u_qq" id="u_qq" type="text" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" onblur="qq()" /></td>
<td><span class="STYLE1" id="qq_re"></span></td>
<td id="qq_re_m">为了方便联系，请正确填写</td>
</tr>
<tr>
<td align="right">支付宝号：</td>
<td><input name="u_alipay" id="u_alipay" type="text" maxlength="20" onblur="alipay()" /></td>
<td><span class="STYLE1" id="alipay_re"></span></td>
<td id="alipay_re_m">兑换积分时用，请正确填写，并保证此号码绑定的姓名和上面的一致</td>
</tr>
<tr>
<td align="right">身份证号码：</td>
<td><input name="u_nunber" id="u_nunber" type="text" maxlength="18" onkeyup="nunber()" /></td>
<td><span class="STYLE1" id="nunber_re"></span></td>
<td id="nunber_re_m">特殊情况需要用到，建议填写</td>
</tr>
<tr>
<td align="right"> </td>
<td align="center"><input type="button" onclick="tijiao()" name="Submit" value="确认注册" /></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body></html>
regin.js代码如下
//创建ajax对象
var name_re = false;
function name_xml()
{
try {
name_re = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
name_re = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
name_re = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
name_re = false;
}
}
}
if (!name_re)
alert("Error initializing XMLHttpRequest!");
}
var name_use;
var mail_use;
//ajax密码强度验证
function allNumber(v)
{
var reg = /^[0-9]*$/;
if(reg.test(v))
{
return true;
}
return false;
}
function CharMode(iN){
if(iN>=48 && iN<=57)//数字
return 1;
if(iN>=65 && iN<=90)//大写字母
return 2;
if(iN>=97 && iN<=122)//小写
return 4;
else
return 8;//特殊字符
}
//计算出当前密码当中一共有多少种模式
function bitTotal(num){
var modes=0;
for(i=0;i<4;i++){
if(num&1)
modes++;
num >>=1;
}
return modes;
}
//返回密码的强度级别
function checkStrong(sPW){
if(sPW.length<6)
return 0;//密码太短
var Modes=0;
for(i=0;i<sPW.length;i++){
//测试每一个字符的类别并统计一共有多少种模式.
Modes|=CharMode(sPW.charCodeAt(i));
}
// alert(bitTotal(Modes));
return bitTotal(Modes);
}
function showStrongPic()
{
var v = document.getElementById('u_pass').value;
var m = checkStrong(v);
if(m < 2)
{
document.getElementById('lowPic').style.display="";
document.getElementById('midPic').style.display="none";
document.getElementById('highPic').style.display="none";
}
else if(m==2)
{
document.getElementById('lowPic').style.display="none";
document.getElementById('midPic').style.display="";
document.getElementById('highPic').style.display="none";
}
else
{
document.getElementById('lowPic').style.display="none";
document.getElementById('midPic').style.display="none";
document.getElementById('highPic').style.display="";
}
}
//ajax验证码验证
function isCheckCode(){
var CheckCode = document.getElementById('CheckCode').value;
if (CheckCode==""){
document.getElementById('CheckCode_re').innerHTML='<img src=check_error.gif>';
document.getElementById('CheckCode_re_m').innerHTML='<span class=msg>验证码不能为空！</span>';
return false;
}else{
Code_ajax(CheckCode)
}
}
function Code_ajax(CheckCode){
var Code=CheckCode;
var url="code_ajax.asp?Code="+ escape(Code);
name_xml();
name_re.open("GET", url, true);
name_re.setRequestHeader("content-type","text/xml");
name_re.onreadystatechange = Code_requst;
name_re.setRequestHeader("If-Modified-Since","0");
name_re.send(null);
}
function Code_requst(){
if(name_re.readyState==4 && name_re.status==200)//返回完成
{
var msg=name_re.responseText;
if (msg=="yes"){
document.getElementById('CheckCode_re').innerHTML='<img src=check_error.gif>';
document.getElementById('CheckCode_re_m').innerHTML='<span class=msg>验证码错误！</span>';
Code_msg(0);
return false;
}
else{
document.getElementById('CheckCode_re').innerHTML='<img src=check_right.gif>';
document.getElementById('CheckCode_re_m').innerHTML='<span class=msg2>输入正确！</span>';
Code_msg(1);
return true;
}
}
}
function Code_msg(n){
var n=n;
if(n==0){
Code_use=true;
}
else{
Code_use=false;
}
}
//ajax用户名验证
function isName(){
var u_name = document.getElementById('u_name').value;
if (u_name==""){
document.getElementById('name_re').innerHTML='<img src=check_error.gif>';
document.getElementById('name_re_m').innerHTML='<span class=msg>用户名不能为空，4-10个字符</span>';
return false;
}else{
user_ajax(u_name)
}
}
function user_ajax(u_name){
var name=u_name;
var url="ajax.asp?action=names&name;="+ escape(name);
name_xml();
name_re.open("GET", url, true);
name_re.setRequestHeader("content-type","text/xml");
name_re.onreadystatechange = name_requst;
name_re.setRequestHeader("If-Modified-Since","0");
name_re.send(null);
}
function name_requst(){
if(name_re.readyState==4 && name_re.status==200)//返回完成
{
var msg=name_re.responseText;
if (msg=="yes"){
document.getElementById('name_re').innerHTML='<img src=check_error.gif>';
document.getElementById('name_re_m').innerHTML='<span class=msg>该用户名已经存在！</span>';
name_msg(0);
return false;
}
else{
document.getElementById('name_re').innerHTML='<img src=check_right.gif>';
document.getElementById('name_re_m').innerHTML='<span class=msg2>可以注册！</span>';
name_msg(1);
return true;
}
}
}
function name_msg(n){
var n=n;
if(n==0){
name_use=true;
}
else{
name_use=false;
}
}
//性别是否选择检测
function sex(){
if(document.form2.u_sex[0].checked==false && document.form2.u_sex[1].checked==false && document.form2.u_sex[2].checked==false) {
document.getElementById('sex_re').innerHTML='<img src=check_error.gif>';
document.getElementById('sex_re_m').innerHTML='<span class=msg>没有选择性别</span>';
return false;
}
else{
document.getElementById('sex_re').innerHTML='<img src=check_right.gif>';
document.getElementById('sex_re_m').innerHTML='<span class=msg2>已选择</span>';
return true;
}
}
//密码是否为空检测
function password(){
var u_pass = document.getElementById('u_pass').value;
if(u_pass=="" || u_pass.length<6){
document.getElementById('pass_re').innerHTML='<img src=check_error.gif>';
return false;
}
else{
document.getElementById('pass_re').innerHTML='<img src=check_right.gif>';
return true;
}
}
//确认密码检测
function pass_re(){
var u_pass=document.getElementById('u_pass').value;
var pass_re=document.getElementById('u_pass_re').value;
if(u_pass != pass_re){
document.getElementById('pass_re_re').innerHTML='<img src=check_error.gif>';
document.getElementById('pass_re_re_m').innerHTML='<span class=msg>两次密码不一致，请重新输入</span>';
return false;
}
else{
document.getElementById('pass_re_re').innerHTML='<img src=check_right.gif>';
document.getElementById('pass_re_re_m').innerHTML='<span class=msg2>填写正确</span>';
return true;
}
}
//密码保护问题检测
function answer(){
var u_answer=document.getElementById('u_answer').value;
if(u_answer==""){
document.getElementById('answer_re').innerHTML='<img src=check_error.gif>';
document.getElementById('answer_re_m').innerHTML='<span class=msg>请填写问题答案</span>';
return false;
}
else{
document.getElementById('answer_re').innerHTML='<img src=check_right.gif>';
document.getElementById('answer_re_m').innerHTML='<span class=msg2>填写正确</span>';
return true;
}
}
//邮箱格式验证
function isEmail() {
var u_mail=document.getElementById('u_mail').value;
if (u_mail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1){
email_ajax(u_mail);
}
else{
document.getElementById('mail_re').innerHTML='<img src=check_error.gif>';
document.getElementById('mail_re_m').innerHTML='<span class=msg>请输入正确的邮箱地址，格式为：123456@qq.com</span>';
return false;
}
}
function email_ajax(u_mail){
var email=u_mail;
var url="ajax.asp?action=email&mail;="+ escape(email);
name_xml();
name_re.open("GET", url, true);
name_re.setRequestHeader("content-type","text/xml");
name_re.onreadystatechange = mail_requst;
name_re.setRequestHeader("If-Modified-Since","0");
name_re.send(null);
}
function mail_requst(){
if(name_re.readyState==4 && name_re.status==200)//返回完成
{
var msg=name_re.responseText;
if (msg=="yes"){
document.getElementById('mail_re').innerHTML='<img src=check_error.gif>';
document.getElementById('mail_re_m').innerHTML='<span class=msg>该邮箱已被使用，请换一个</span>';
mail_msg(0);
return false;
}
else{
document.getElementById('mail_re').innerHTML='<img src=check_right.gif>';
document.getElementById('mail_re_m').innerHTML='<span class=msg2>可以使用</span>';
mail_msg(1);
return true;
}
}
}
function mail_msg(n){
var n=n;
if(n==0){
mail_use=true;
}
else{
mail_use=false;
}
}
//真实姓名检测
function name_zs(){
var name_zs=document.getElementById('u_name_zs').value;
if (name_zs != name_zs.replace(/[^\u4E00-\u9FA5]/g,'')|| name_zs=="" || name_zs.length<2){
document.getElementById('name_zs_re').innerHTML='<img src=check_error.gif>';
document.getElementById('name_zs_re_m').innerHTML='<span class="msg">请输入真实的中文名字</span>';
return false;
}
else{
document.getElementById('name_zs_re').innerHTML='<img src=check_right.gif>';
document.getElementById('name_zs_re_m').innerHTML='<span class="msg2">填写正确</span>';
return true;
}
}
//QQ号码检测
function qq(){
var qq=document.getElementById('u_qq').value;
if(qq=="" || qq.length<5){
document.getElementById('qq_re').innerHTML='<img src=check_error.gif>';
document.getElementById('qq_re_m').innerHTML='<span class="msg">正确的QQ是5-10位哦</span>';
return false;
}
else{
document.getElementById('qq_re').innerHTML='<img src=check_right.gif>';
document.getElementById('qq_re_m').innerHTML='<span class="msg2">填写正确</span>';
return true;
}
}
//检测支付宝帐号
function alipay(){
var alipay=document.getElementById('u_alipay').value;
if (alipay.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1){
document.getElementById('alipay_re').innerHTML='<img src=check_right.gif>';
document.getElementById('alipay_re_m').innerHTML='<span class=msg2>填写正确</span>';
return true;
}
else{
document.getElementById('alipay_re').innerHTML='<img src=check_error.gif>';
document.getElementById('alipay_re_m').innerHTML='<span class=msg>错误的支付宝帐号</span>';
return false;
}
}
//身份证号码检测
function nunber(){
var idcard=document.getElementById('u_nunber').value;
var Errors=new Array("验证通过!","身份证号码位数不对!","出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!");
var area={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:"国外"}
var idcard,Y,JYM;
var S,M;
var idcard_array = new Array();
idcard_array = idcard.split("");
if(area[parseInt(idcard.substr(0,2))]==null)
{
document.getElementById('nunber_re').innerHTML='<img src=check_error.gif>';
document.getElementById('nunber_re_m').innerHTML="<span class=msg>"+Errors[4]+"</span>";
return false;
}
switch(idcard.length){
case 15:
if ( (parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;
} else {
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;
}
if(ereg.test(idcard)){
document.getElementById('nunber_re').innerHTML='<img src=check_right.gif>';
document.getElementById('nunber_re_m').innerHTML="<span class=msg2>"+Errors[0]+"</span>";
return true;
}
else {
document.getElementById('nunber_re').innerHTML='<img src=check_error.gif>';
document.getElementById('nunber_re_m').innerHTML="<span class=msg>"+Errors[2]+"</span>";
return false;
}
break;
case 18:
//18位身份号码检测
if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;
} else {
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;
}
if(ereg.test(idcard)){
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7
+ (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9
+ (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10
+ (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5
+ (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8
+ (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4
+ (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2
+ parseInt(idcard_array[7]) * 1
+ parseInt(idcard_array[8]) * 6
+ parseInt(idcard_array[9]) * 3 ;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y,1);
if(M == idcard_array[17]){
document.getElementById('nunber_re').innerHTML='<img src=check_right.gif>';
document.getElementById('nunber_re_m').innerHTML="<span class=msg2>"+Errors[0]+"</span>";
return true;
}
else {
document.getElementById('nunber_re').innerHTML='<img src=check_error.gif>';
document.getElementById('nunber_re_m').innerHTML="<span class=msg>"+Errors[3]+"</span>";
return false;
}
}
else {
document.getElementById('nunber_re').innerHTML='<img src=check_error.gif>';
document.getElementById('nunber_re_m').innerHTML="<span class=msg>"+Errors[2]+"</span>";
return false;
}
break;
default:
document.getElementById('nunber_re').innerHTML='<img src=check_error.gif>';
document.getElementById('nunber_re_m').innerHTML="<span class=msg>"+Errors[1]+"</span>";
return false;
}
}
//全表单提交验证
function tijiao(){
if (isName()==false){
alert("名字不能为空");
return false;
}
if (name_use==true){
alert("名字已存在，重新输入");
return false;
}
if (sex()==false){
alert("请选择你的性别");
return false;
}
if (password()==false){
alert("密码必须填写");
return false;
}
if (pass_re()==false){
alert("确认密码错误");
return false;
}
if (answer()==false){
alert("安全问题答案必须填写");
return false;
}
if (isEmail()==false){
alert("邮箱地址为空或者错误");
return false;
}
if (mail_use==true){
alert("邮箱已经存在，重新输入一个");
return false;
}
if(document.getElementById('u_name_zs').value !=""){
if(name_zs()==false){
alert("真实姓名填写错误");
return false;
}
}
if(document.getElementById('u_qq').value !=""){
if(qq()==false){
alert("qq号码填写错误");
return false;
}
}
if (document.getElementById('u_alipay').value !=""){
if(alipay()==false){
alert("支付宝帐号填写错误");
return false;
}
}
if (document.getElementById('u_nunber').value !=""){
if(nunber()==false){
alert("身份证号码填写错误");
return false;
}
}
document.form2.submit();
return true;
} 相关文章
- ASP多级联动菜单效果代码 2012/05/10
- ASP提高页面执行效率的方法 2012/05/10
- ASP删除数据并同时删除图片的代码 2012/05/10
- ASP的Err.Number错误描述 2012/05/10
- ASP实现Ajax跨域 2012/05/10
- ASP实现文件直接下载 2012/05/09
- ASP实现批量插入数据 2012/05/09
- ASP网站生成静态html页 2012/05/09
- ASP正则替换空格和回车符函数 2012/05/09
- FSO文件处理函数详解 2012/05/09