ajax驗證使用者名稱

ajax驗證文章我以前寫過很多哦,下面我再來寫一個ajax檢查使用者名稱的教程吧,全部貼上來.

這裡是介面效果圖片,我們主要有三個文章一個reg.php裡面幾乎是html 代碼,一個是register.php註冊檔案,一個是否chech.js檔案,還有最後一個ajax_check.php檔案,要完成這次ajax 使用者檢測就要用到上面四個文章下面我們就先來看看介面代碼吧.

css 與js代碼.匯入

<style type="text/css">
<!--
body,td,th {
 font-size: 12px;
}
#error{color:#FF0000; background-image:url(images/1.jpg); height:26px; padding-top:10px;padding-left:50px;width:277px;}
.defult{color:#333333; background-image:url(images/3.jpg); height:26px; padding-top:10px;padding-left:50px;width:277px;}
#success{
 background-image:url(images/0.jpg) ;
 background-repeat:no-repeat;
 
 height:26px;
 }
.input{height:18px; width:221px;}
.STYLE1 {color: #FF0000}
.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001;
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=50); 
} 
.white_content {
 display: none;
 position: absolute;
 top: 25%;
 left: 25%;
 width: 50%;
 height: 50%;
 border:1px solid #000000;
 background-color: white;
 z-index:1002;
 overflow: auto;
 padding: 5px;
}
.close{height:15px; text-align:right; margin-bottom:10px;}
a {
 font-size: 12px;
 color: #000000;
}
a:visited {
 color: #000000;
}
a:active {
 color: #000000;
}
-->
</style>
<script language="javascript" src="js/check.js"></script>

這裡是html表現代碼

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<form id="form1" name="form1" method="post" action="register.php">
  <tr>
    <td width="137">&nbsp;</td>
    <td width="17" height="27">&nbsp;</td>
    <td width="229">&nbsp;</td>
    <td width="417">&nbsp;</td>
  </tr>
  <tr>
    <td align="right">昵&nbsp;&nbsp;稱：</td>
    <td height="34" align="center"><span class="STYLE1">*</span></td>
    <td><input name="uid" type="text" class="input" id="uid"  onblur="return ajax();"  onfocus="return c();"size="20" /></td>
    <td align="left" id="u_info"><div class="defult">使用者暱稱長度3-12個字元</div></td>
  </tr>
  <tr>
    <td align="right">性&nbsp;&nbsp;別：</td>
    <td height="34" align="center"><span class="STYLE1">*</span></td>
    <td>
      <label></label>    <label>
      <select name="sex" id="sex">
        <option value="1">男</option>
        <option value="0">女</option>
      </select>
      </label></td>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="right">密&nbsp;&nbsp;碼：</td>
    <td height="34" align="center"><span class="STYLE1">*</span></td>
    <td><input name="password2" type="password" class="input" id="password2" onblur="c();" size="20" /></td>
    <td align="left" id="p_info"><div class="defult">長度6-12位</div></td>
  </tr>
  <tr>
    <td align="right">確認密碼：</td>
    <td height="34" align="center"><span class="STYLE1">*</span></td>
    <td><input name="password" type="password" class="input" id="password" onblur="c();" size="20" /></td>
    <td align="left" id="p_info1"><div class="defult">確認密碼</div></td>
  </tr>
  <tr>
    <td align="right">手&nbsp;&nbsp;機：</td>
    <td height="34" align="center"><span class="STYLE1">*</span></td>
    <td><input name="mo" type="text" class="input" id="mo" onblur="c();" size="20" /></td>
    <td align="left" id="m_info"><div class="defult">手機13875888888與有線電話（0731-888888）</div></td>
  </tr>
  <tr>
    <td align="right">真實姓名：</td>
    <td height="34" align="center"><span class="STYLE1">*</span></td>
    <td><input name="name" type="text" class="input" id="name" onblur="c();" size="20" /></td>
    <td align="left" id="n_info"><div class="defult">真實姓名：小明</div></td>
  </tr>
  <tr>
    <td height="34">&nbsp;</td>
    <td height="27">&nbsp;</td>
    <td><label>
      <input name="check_name" type="checkbox" id="check_name"   value="1" checked="checked"  />
      <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
      我接受服務條款
      </a>
    </label></td>
    <td id=t_info>
    <div id="light" class="white_content">
    <div class="close">
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
    關閉</a>
    </div>
    <div style="margin:10px;">
    為裡是條款內容！
    </div>
    </div> </td>
  </tr>
  <tr>
    <td height="60">&nbsp;</td>
    <td height="27">&nbsp;</td>
    <td><label>
      <input type="image" name="imageField" id="imageField" src="images/btn.jpg" onclick="javascript:return c();"/>
    </label></td>
    <td>&nbsp;</td>
  </tr>
  </form>
</table>

本站原創:  www.111cn.net/phper/php.html