[原創]ajax 實現用戶注冊功能教程一

//

本教程由本站原創,轉載請注明來處

作者:www.111cn.net

郵箱:[email protected]

QQ:271728967

//

第一步我們來創建一個注冊文章reg.php

第二步就是寫js文件

第三步就是在用戶名框使用onblur()調用type.php文件

第四步就是check.php實現文件

下面廢話就不多說了,我們來建立文章reg.php代碼如下[測試頁面http://www.111cn.net/reg.php]

<table width="100%" border="0" cellspacing="0">
                        <form name="form1" id="form1" method="post" action="/boke/blog/check.php">
                          <tr>
                            <td height="28" colspan="5"><div id="reglist">讓你不再為寫博客而寫博客,我們讓你寫的文章變成你想要的東西!</div></td>
                          </tr>
                          <tr>
                            <td height="43" colspan="3" align="left" valign="bottom">&nbsp;<img src="/boke/blog/Pic/st-0136.gif" width="16" height="16" /><span class="style6">[注:帶<span class="style1">*</span>號的為必須填項]</span> </td>
                            <td width="323">&nbsp;</td>
                            <td width="248">&nbsp;</td>
                          </tr>
                          <tr class="tb">
                            <td width="108" height="40" align="right" class="tb">用戶名(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td colspan="2" align="left" class="tb"><input name="xm" type="text" id="xm" size="15" onblur="ajax();" />
                            </td>
                            <td width="323" class="tb"  ><div id="divxm">
                                <div id="bothlist">請填寫你的帳號!</div>
                            </div></td>
                            <td width="248" class="tb"  >&nbsp;</td>
                          </tr>
                          <tr class="tb">
                            <td width="108" height="40" align="right" class="tb">性別(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td colspan="2" align="left" class="tb"><select name="sex" id="sex">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select></td>
                            <td width="323" class="tb" ><div id="bothlist">請選擇你的性別!</div></td>
                            <td width="248" class="tb" >&nbsp;</td>
                          </tr>
                          <tr>
                            <td width="108" height="40" align="right">用戶密碼(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td colspan="2" align="left"><input name="rpwd" type="password" id="rpwd" size="15"  onblur="checkuser();" /></td>
                            <td width="323" rowspan="2" id="divpwd" ><div id="bothlist">請填寫您的密碼,長度在6-10位之間!</div></td>
                            <td width="248" rowspan="2" id="divpwd" >&nbsp;</td>
                          </tr>
                          <tr>
                            <td width="108" height="40" align="right">再輸入一次密碼(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td colspan="2" align="left"><input name="rpwd1" type="password" id="rpwd1" size="15" onblur="checkuser();" /></td>
                          </tr>
                          <tr class="tb">
                            <td width="108" height="40" align="right" class="tb">密碼提示問題(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td colspan="2" align="left" class="tb"><select name="safe" id="safe">
                                <option value="我最喜歡的動物是什麼?">我最喜歡的動物是什麼?</option>
                                <option value="我高中學校叫什麼名字?">我高中學校叫什麼名字?</option>
                                <option value="我女朋友的名字叫什麼?">我女朋友的名字叫什麼?</option>
                                <option value="我最喜歡的人是誰?">我最喜歡的人是誰?</option>
                            </select></td>
                            <td width="323" class="tb">&nbsp;</td>
                            <td width="248" class="tb">&nbsp;</td>
                          </tr>
                          <tr>
                            <td width="108" height="40" align="right">提示問題答案(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td colspan="2" align="left"><input name="safean" type="text" id="safean" size="15"  onblur="checkuser();" /></td>
                            <td width="323" id="divda" ><div id="bothlist">請填寫您的答案,找回密碼需要確認.例如:我叫張三!</div></td>
                            <td width="248" id="divda" >&nbsp;</td>
                          </tr>
                          <tr class="tb">
                            <td width="108" height="40" align="right" class="tb">您的電子郵箱(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td colspan="2" align="left" class="tb"><input name="email" type="text" id="email" size="15" onblur="checkuser();" /></td>
                            <td width="323" class="tb" id="divemail"><div id="bothlist">請正確填寫你的郵箱地址!</div></td>
                            <td width="248" class="tb" id="divemail">&nbsp;</td>
                          </tr>
                          <tr>
                            <td width="108" height="40" align="right">驗證碼(<span class="style3"><span class="style1">*</span></span>):</td>
                            <td width="79" align="left"><input name="rver" type="text" id="rver" size="7"  onblur="checkuser();" /></td>
                            <td width="122" align="left"><img src="/boke/blog/inc/verlog.php" onclick="this.src='/boke/blog/inc/verlog.php';" /><span class="read">點擊圖片刷新</span></td>
                            <td width="323" id="divyz"><div id="bothlist">請按左邊的圖輸入驗證碼,如不清楚可點擊圖片刷新驗證碼!</div></td>
                            <td width="248" id="divyz">&nbsp;</td>
                          </tr>
                          <tr align="left">
                            <td width="108" height="40" class="tb">&nbsp;</td>
                            <td height="40" colspan="4" class="tb"><input name="cbox" type="checkbox" id="cbox" value="1" checked="checked" />
                                <span class="phperblog_photo style4"><a href="#" class="name">&lt;&lt;我同意本站服務條款&gt;&gt;</a></span></td>
                          </tr>
                          <tr>
                            <td width="108" height="40">&nbsp;</td>
                            <td height="40" colspan="2" align="left"><input name="imageField" type="image" src="/boke/blog/Pic/an0159.gif" width="149" height="27" onclick=" return checkuser();" border="0" /></td>
                            <td width="323" height="40" align="left">&nbsp;</td>
                            <td width="248" align="left">&nbsp;</td>
                          </tr>
                                           <tr>
                            <td width="108" height="28">&nbsp;</td>
                            <td height="28" colspan="2">&nbsp;</td>
                            <td width="323" height="28">&nbsp;</td>
                            <td width="248">&nbsp;</td>
                          </tr>
                        </form>
          </table>