行業網站使用者註冊ajax驗證html+js片段

來源:互聯網
上載者:User

註冊效果頁面

 


html代碼如下

 代碼如下 複製代碼

<form action="reg.php" method="post" name="regForm" id="regForm" onSubmit="return checkRegForm()">
<table>
    <tr>
        <th>使用者名稱:</th>
        <td><input name="username" type="text" id="username" maxlength="30" onBlur="checkUser(this.value)" value="" />
        <div id="html_username">4-20位字元或數字,無特殊字元,不分大小寫</div></td>
    </tr>
    <tr>
        <th>唯一郵箱:</th>
        <td><input name="email" type="text" id="email" maxlength="50" onBlur="checkUserEmail(this.value)" value="" /><div id="html_email">郵箱可用於找回密碼,一個郵箱只能註冊一個使用者</div></td>
    </tr>
    <tr>
        <th>密碼:</th>
        <td><input name="u_password" type="password" id="u_password" maxlength="20" onBlur="checkPassword(this.value)" /><div id="html_password">請使用6-20位英文字母、數字、減號或底線的組合,區分大小寫</div></td>
    </tr>
    <tr>
        <th>確認密碼:</th>
        <td><input name="nextpassword" type="password" id="nextpassword" maxlength="20" onBlur="checkNextPassword(this.value)" /><div id="html_nextpassword">請再輸入一次上面的密碼</div></td>
    </tr>
    <tr>
        <th>驗證碼:</th>
        <td><input name="u_code" type="text" maxlength="10" id="u_code" class="yzm" onBlur="checkCode(this.value)" /><div id="html_code">輸入下面圖片中的字元</div></td>
    </tr>
</table>


上面我們細心的朋友會發現很多表單都帶有了onBlur事件了,這個事件就是告訴我們離開時驗證表單輸入的內容是否正確了並在<div id="html_xxx">顯示了, 注意每一個<div id="html_xxx">都是頁面唯一的,大家可看上面代碼,下面核心代碼是js

 代碼如下 複製代碼

// ajax檢測使用者名稱是否已經註冊了
function createXMLHttpRequest () {//建立XMLHttpRequest對象
    if (window.ActiveXObject) {//IE
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            return;
        }
    } else if (window.XMLHttpRequest) {//Mozilla,firefox
        try {
            return new XMLHttpRequest();
        } catch (e) {
            return;
        }
    }
}

function checkUser (username) {//主調函數
    var xmlHttp = createXMLHttpRequest();

    if (username == "") {
        getId("html_username").innerHTML = "<b>您輸入失敗,請重新輸入</b>";
        return false ;
    }
    else if (!isUserName(username)) {
        getId("html_username").innerHTML = "<b>請用4-20位英文字母、數字、減號或底線的組合,不區分大小寫</b>";
        return false ;
    }

    if (xmlHttp) {
        username = username.toLowerCase();
        var url = "/user/check_reg.php?act=check_username&username=" + escape(username);

        callback = getReadyStateHandler(xmlHttp,username);
        xmlHttp.onreadystatechange = callback;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
}

function getReadyStateHandler(xmlHttp) {//伺服器返回後處理函數
    return function () {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {   
                if (xmlHttp.responseText == "1") {
                    getId("html_username").innerHTML = "<b>√恭喜您,使用者名稱可用</b>";
                }
                else if (xmlHttp.responseText == "0") {
                    getId("html_username").innerHTML = "<b>使用者名稱已被註冊,請重新輸入</b>";
                }
                else {
                    getId("html_username").innerHTML = "<b>您輸入失敗,請重新輸入</b>";
                }
            }
        }
    }
}

//檢測密碼
function checkPassword(str) {
 var str_html = getId("html_password");

 if (str.length <= 5 || str.length >= 21) {
  str_html.innerHTML = "<b>請使用6-20位英文字母、數字、減號或底線的組合,區分大小寫</b>";
  return false;
 }
 else if (!isPassword(str)) {
  str_html.innerHTML = "<b>請使用6-20位英文字母、數字、減號或底線的組合,區分大小寫</b>";
  return false;
 }
 else {
  str_html.innerHTML = "<b>√</b>";
 }
}
function checkNextPassword(str) {
    var str_html = getId("html_nextpassword");
    var password = getId("u_password").value;
    var html_password = getId("html_password");

    if (password.length <= 5 || password.length >= 21) {
        html_password.innerHTML = "<b>請使用6-20位英文字母、數字、減號或底線的組合,區分大小寫</b>";
        return false;
    }
    else if (!isPassword(password)) {
        html_password.innerHTML = "<b>請使用6-20位英文字母、數字、減號或底線的組合,區分大小寫</b>";
        return false;
    }
    else if (str.length <= 5|| str.length >= 21) {
        str_html.innerHTML = "<b>請再輸入一遍上面輸入的密碼</b>";
        return false;
    }
    else if (password != str) {
        str_html.innerHTML = "<b>兩次輸入的密碼不一樣,請新輸入</b>";
        return false;
    }
    else{
        str_html.innerHTML = "<b>√</b>";
    }
}

//檢測郵箱
function checkUserEmail(str) {//主函數
    var xmlHttp = createXMLHttpRequest();
    var str_html = getId("html_email");

    if (str.length <= 0) {
        str_html.innerHTML = "<b>請輸入電子郵箱</b>";
        return false;
    }
    else if (!isEmail(str)) {
        str_html.innerHTML = "<b>電子郵箱格式不正正確</b>";
        return false;
    }

    if (xmlHttp) {
        var email = str.toLowerCase();
        var url = "/user/check_reg.php?act=check_email&email=" + escape(email);

        callback = getReadyStateHandlerEmail(xmlHttp, email);
        xmlHttp.onreadystatechange = callback;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
}

function getReadyStateHandlerEmail(xmlHttp) {//伺服器返回後處理函數
    return function () {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {   
                if (xmlHttp.responseText == "1") {
                    getId("html_email").innerHTML = "<b>√恭喜您,郵箱可用</b>";
                }
                else if (xmlHttp.responseText == "0") {
                    getId("html_email").innerHTML = "<b>郵箱已經被註冊,一個郵箱只能註冊一個使用者</b>";
                }
                else {
                    getId("html_email").innerHTML = "<b>請輸入電子郵箱</b>";
                }
            }
        }
    }
}

//判斷是否是正確的郵箱
function isEmail(imail) {  
 var emailPattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

 if (emailPattern.test(imail) == false) {
  return false;
 }  
 else {
  return true; 
 }
}

//判斷是否是正確的使用者名稱,使用4-20個字母,數字,底線,杠(-)的組合
function isUserName(str) {  
 var strPattern = /^[\w-]{4,20}$/;

 if (strPattern.test(str) == false) {
  return false;
 }  
 else {
  return true; 
 }
}

//判斷是否是正確的密碼,使用6-20個字母,數字,底線,杠(-)的組合
function isPassword(str) {  
 var strPattern = /^[\w-]{6,20}$/;

 if (strPattern.test(str) == false) {
  return false;
 }  
 else {
  return true; 
 }
}

// 檢測驗證碼
function checkCode(str) {
    var str_html = getId("html_code");
    var str_len = strLen(str);
 if (str_len <= 3 || str_len >= 13) {
  str_html.innerHTML = "<b>您輸入的字元數不對</b>";
  return false;
 }
 else {
  str_html.innerHTML = "輸入下面圖片中的字元";
 }
}

//檢測真實姓名
function checkTruename(str) {
    var truename = getId(str);
    var html_truename = getId("html_" + str);

    if (strLen(truename.value) <= 2)
 {
  html_truename.innerHTML = "<b>請輸入您的稱呼</b>";
  return false;
 }
    else
    {
        html_truename.innerHTML = "<b>√</b>";
    }
}

//檢測手機
function checkMobile(str) {
    var mobile = getId(str);
    var html_mobile = getId("html_" + str);

 if (mobile.value.length > 0) {
  if (!/^[0-9]{11,30}$/.exec(mobile.value)){
   html_mobile.innerHTML = "<b>靖輸入正確的手機號碼,格式為:18908476638</b>";
   return false;
  }
  else {
   html_mobile.innerHTML="<b>√</b>";
  }
 }
 else {
  html_mobile.innerHTML = "手機和有線電話必填一項,格式為:18908476638";
 }
}

//檢測電話號碼
function checkTel(str) {
    var tel = getId(str);
    var html_tel = getId("html_" + str);

    var mobile = getId('mobile');

 if (tel.value.length > 0) {
  if (!/^[+]{0,1}[0-9]{0,4}[-]{0,1}[0-9]{3,6}[-]{0,1}[0-9]{7,9}$/.exec(tel.value)){
   html_tel.innerHTML = "<b>電話號碼格式不正常,請重新輸入</b>";
   return false;
  }
  else {
   html_tel.innerHTML = "<b>√</b>";
  }
 }
    else if (mobile.value == '' && tel.value == '')
    {
        html_tel.innerHTML = "<b>手機和有線電話必填一項,格式為:0731-84168716</b>";
    }
    else {
  html_tel.innerHTML = "手機和有線電話必填一項,格式為:0731-84168716";
 }
}

// 檢測QQ
function checkQQ(str)
{
    var qq = getId(str);
    var html_qq = getId("html_" + str);

    if (qq.value.length > 0)
 {
  if (!/^[0-9]{4,15}$/.exec(qq.value))
  {
   html_qq.innerHTML = "<b>QQ號碼不對哦!</b>";
   return false;
  }
        else
        {
            html_qq.innerHTML = "<b>√</b>";
        }
 }
    else
    {
        html_qq.innerHTML = "便於客戶直接在網上聯絡您";
    }
}


好了,我們只需要把這個檔案放在與html中就可以驗證了哦。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.