ajax驗證使用者名稱

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

當使用者名稱框的資料改變時執行ajax方法

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>添加使用者</title>
     <script type="text/javascript">
    //表單為空白的驗證
     function check()
     {

        var a=document.getElementById("account");

       if(a.value.length==0)
       {
         alert("使用者名稱不可以為空白！");
         a.focus();
         return false;
       }
       var b=document.getElementById("neckname");
       if(b.value.length==0)
       {
         alert("暱稱不可以為空白！");
         b.focus();
         return false;
       }
       var c=document.getElementById("pwd");
       if(c.value.length==0)
       {
         alert("密碼不可以為空白！");
         c.focus();
         return false;
       }
       var d=document.getElementById("pwd0");
       if(d.value.length==0)
       {
         alert("確認不可以為空白！");
         d.focus();
         return false;
       }
       return true;
     }
     //驗證使用者名稱是否存在
     var xmlHttp;
     function isExist()
     {


       var account=document.getElementById("account");

       if(window.ActiveXObject)
       {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
       else
       {
        xmlHttp=new XMLHttpRequest();
       }

       var s="checkUser.aspx?id="+document.getElementById("account").value.toString();

       xmlHttp.onreadystatechange=handlStateChage;
       xmlHttp.open("GET",s,true);

       xmlHttp.send(null);

     }
     function handlStateChage()
     {

      if(xmlHttp.readyState==4) //代表請求完成，0=未初始化；1=正在載入；2=載入完成;3=互動中；4=完成
        {
          if(xmlHttp.status==200) //請求狀態，200表示正常返回
          {
            document.getElementById("result").innerHTML=xmlHttp.responseText;
          }
        }
     }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <table style=" margin:0 auto">
          <tr>
            <td colspan="3" align="center"><h1>添加使用者</h1></td>
          </tr>
          <tr>
            <td>使用者名稱：</td>
            <td><input type="text" id="account" name="account" onchange="isExist();" /></td>
            <td><div id="result" style="color: #FF0000"></div></td>
          </tr>
          <tr>
            <td>暱稱：</td>
            <td colspan="2"><input type="text" id="neckname" name="neckname" /></td>

          </tr>
          <tr>
            <td>密碼：</td>
            <td colspan="2"><input type="password" id="pwd" name="pwd" /></td>

          </tr>
          <tr>
            <td>確認密碼：</td>
            <td colspan="2"><input type="password" id="pwd0" name="pwd0" /></td>

          </tr>
          <tr>
            <td colspan="3" align="center">
                <asp:Button ID="okbtn" runat="server" Text="添加" Height="24px" Width="62px"
                    OnClientClick="return check();" onclick="okbtn_Click" /></td>

          </tr>
      </table>
    </div>
    </form>
</body>
</html>

驗證頁，去掉其他指令碼，只留下面的指令碼頁面狀態的錯誤

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="checkUser.aspx.cs" Inherits="Web.checkUser" %>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More