程式師世界 >> 編程語言 >> 網頁編程 >> ASP編程 >> 關於ASP編程 >> ASP+ajax注冊即時提示程序代碼

ASP+ajax注冊即時提示程序代碼

編輯：關於ASP編程

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>http://www.51weidi.com—會員注冊</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">取回密碼和修改密碼時使用，請您正確填寫。格式:[email protected] </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>請輸入正確的郵箱地址，格式為：[email protected]</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;
}