ASP+ajax注册即时提示程序代码

2018-09-06 12:37

阅读:461

  1、注册时验证数据库用户名是否存在。
2、输入密码时提示密码强度和验证2次密码输入是否一样。
3、注册时验证数据库联系邮箱是否存在。
4、注册时验证用户输入的验证码和系统产生的验证码是否一致。
5、对输入中文验证
6、QQ号码验证
7、身份证号码验证
复制代码 代码如下:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
<html xmlns=
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312 />
<title>—会员注册</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>取回密码和修改密码时使用,请您正确填写。格式 </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_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}((01030507081012)(0[1-9][1-2][0-9]3[0-1])(04060911)(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}((01030507081012)(0[1-9][1-2][0-9]3[0-1])(04060911)(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}((01030507081012)(0[1-9][1-2][0-9]3[0-1])(04060911)(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}((01030507081012)(0[1-9][1-2][0-9]3[0-1])(04060911)(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;
}


评论


亲,登录后才可以留言!