您好,登錄后才能下訂單哦!
使用ajax實現(xiàn)一個用戶注冊模塊?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
check.php
<?php header("Content-Type:text/html;charset=gb2312"); @mysql_connect('localhost','root','ebaeba') or die("數(shù)據(jù)庫服務(wù)器連接失敗"); @mysql_select_db("test") or die("數(shù)據(jù)庫不存在或不可用"); $uname = $_GET['userName']; //下面進(jìn)行數(shù)據(jù)庫查詢 查找是不是有這一個用戶 //如果沒有查找到這個用戶名 $sql="select * from t1 where name='".$uname."'"; $query=mysql_query($sql); $row=mysql_fetch_object($query); if(strlen($uname)<6||strlen($uname)>20) { $msg="用戶名必須是6至20個字符."; } else { if($row==false) { $msg="該用戶名有效,可以使用!"; } else { $msg="對不起,此用戶名已經(jīng)存在,請更換用戶名注冊!"; } } echo $msg ; ?>
reg.php
<%@page language="java" contentType="text/html;charset=gb2312"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>AJAX用戶注冊演示程序</title> <script language="javascript" type="text/javascript"> <!-- //創(chuàng)建函數(shù) function createXMLHTTP() { var request; var browser = navigator.appName; //使用IE,則使用XMLHttp對象 if(browser == "Microsoft Internet Explorer") { var arrVersions = ["Microsoft.XMLHttp", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"]; for (var i=0; i < arrVersions.length; i++) { try { //從中找到一個支持的版本并建立XMLHttp對象 request = new ActiveXObject(arrVersions[i]); return request; } catch (exception) { //忽略,繼續(xù) } } } else { //否則返回一個XMLHttpRequest對象 request = new XMLHttpRequest(); if(request.overrideMimeType) { request.overrideMimeType('text/xml'); } return request; } } //全局XMLHTTP對象實例變量 var http = createXMLHTTP(); //發(fā)送請求 function chkUser() { var url = "check.php"; //請求"CheckUserName" ServLet var name = document.getElementById("userName").value; url += ("?userName="+escape(name)+"&oprate=chkUser"); http.open("GET",url,true); http.onreadystatechange = ProcessHttpResponse; http.send(null); return ; } //處理響應(yīng) function ProcessHttpResponse() { if(http.readyState == 4) { if(http.status == 200) { var xmlDocument = http.responseXML; if(http.responseText!="該用戶名有效,可以使用!") { //返回的信息動態(tài)顯示 document.getElementById("showStr").style.display = ""; document.getElementById("userName").style.background= "#FF0000"; document.getElementById("showStr").innerText = http.responseText; } else { document.getElementById("userName").style.background= "#FFFFFF"; document.getElementById("showStr").style.display = ""; document.getElementById("showStr").innerText = http.responseText; } } else { alert("你所請求的頁面發(fā)生異常,可能會影響你瀏覽該頁的信息!"); alert(http.status); } } } //檢驗輸入密碼 function chkpassword() { var m=document.form1; if(m.password.value.length>20 || m.password.value.length<6 ) { document.getElementById("passwordStr").style.display = ""; document.getElementById("password").style.background= "#FF0000"; document.getElementById("passwordStr").innerText = "對不起,密碼必須為英文字母、數(shù)字或下劃線,長度為6~20!"; } else { document.getElementById("password").style.background= "#FFFFFF"; document.getElementById("passwordStr").style.display = "none"; } } //驗證兩次密碼是否一致 function chkconfirmPassword() { var m=document.form1; if (m.password.value != m.confirmPassword.value) { document.getElementById("confirmPasswordStr").style.display = ""; document.getElementById("confirmPassword").style.background= "#FF0000"; document.getElementById("confirmPasswordStr").innerText = "對不起,密碼與重復(fù)密碼不一致!"; } else { document.getElementById("confirmPassword").style.background= "#FFFFFF"; document.getElementById("confirmPasswordStr").style.display = "none"; } } //驗證Email是否有效 function chkEmail() { var m=document.form1; var email = m.email.value; //正則表達(dá)式 var regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; var flag = regex.test(email); if(!flag) { document.getElementById("emailStr").style.display = ""; document.getElementById("email").style.background= "#FF0000"; document.getElementById("emailStr").innerText = "對不起,郵箱地址無效!"; } else { document.getElementById("email").style.background= "#FFFFFF"; document.getElementById("emailStr").style.display = "none"; } } //提交檢查函數(shù) function SubmitCheck() { var m=document.form1; if(m.userName.value.length==0) { alert("對不起,用戶名必須為英文字母、數(shù)字或下劃線,長度為5~20。"); m.userName.focus(); return false; } if(m.password.value.length==0) { alert("對不起,密碼必須為英文字母、數(shù)字或下劃線,長度為5~20。"); m.password.focus(); return false; } if (m.password.value != m.confirmPassword.value) { alert("對不起,密碼與重復(fù)密碼不一致!"); m.confirmPassword.focus(); return false; } if(m.email.value.length==0) { alert("對不起,郵箱地址不能為空!!"); m.email.focus(); return false; } m.submit(); } //--> </script> <body > <form name="form1" method="post" action="register.php"> <h4 align="center">Ajax用戶注冊程序</h4> <table align="center" width="500" border="1" > <tr> <td><font color="red">*</font></td> <td width="100">用戶帳號:</td> <td><input type="text" name="userName" maxlength="20" onBlur="chkUser()"></td> <td><div id="showStr" ></div></td> </tr> <tr> <td><font color="red">*</font></td> <td>用戶密碼:</td> <td align="left"><input type="password" name="password" maxlength="22" onBlur="chkpassword()"/> </td> <td><div id="passwordStr" ></div></td> </tr> <tr> <td><font color="red">*</font></td> <td>確認(rèn)密碼:</td> <td><input type="password" name="confirmPassword" maxlength="20" onBlur="chkconfirmPassword()"/></td> <td><div id="confirmPasswordStr" ></div></td> </tr> <tr> <td><font color="red">*</font></td> <td>Email:</td> <td><input type="text" name="email" maxlength="100" onBlur="chkEmail()"></td> <td><div id="emailStr" ></div></td> </tr> </table> <div align="center"> <input type="button" name="ok" value=" 確定 " onClick="SubmitCheck()"> <input type="reset" name="reset" value=" 取消 "> </form> </div> </body> </html>
看完上述內(nèi)容,你們掌握使用ajax實現(xiàn)一個用戶注冊模塊的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。