js仿網(wǎng)易表單及時(shí)驗(yàn)證功能

更新時(shí)間：2017年03月07日 14:10:18 作者：水山奇

這篇文章主要為大家詳細(xì)介紹了一個(gè)網(wǎng)易表單以及及時(shí)驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天研究了網(wǎng)易“用戶(hù)注冊(cè)表單”與“及時(shí)驗(yàn)證功能”，不得不說(shuō)，無(wú)論是它的布局結(jié)構(gòu)，還是驗(yàn)證功能，都是刷新了本真人的眼界，居然可以這樣！

來(lái)圖鎮(zhèn)樓！

html代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>網(wǎng)易新用戶(hù)注冊(cè)頁(yè)面</title>
 <script type="text/javascript" src="js/js1.js"></script>
 <link href="css/style1.css" rel="external nofollow" rel="stylesheet" />
 <script type="text/javascript">
  function aa(){
   var reg = /[\u4e00-\u9fa5]/g;/*這里本真人，已做修改*/
   var name = document.getElementById("realName").value;
   if(reg.test(name)==false){
    alert("只能為漢字");
   }else{
    alert("正確");
   }
  }
 </script>
</head>
<body>
 <!--logo位置-->
 <div id="header"><img src="img/register_logo.png" alt="logo"/></div>
 <div id="main">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <!--看不見(jiàn)的第一行-->
   <tr>
    <td class="bg bg_top_left"></td>
    <td class="bg_top"></td>
    <td class="bg bg_top_right"></td>
   </tr>
   <!--看得見(jiàn)的第二行-->
   <tr>
    <td class="bg_left"></td>
    <td class="content">
    <!--表單提交，因本真人是解析來(lái)著，算不出網(wǎng)易服務(wù)器地址，就不詳細(xì)介紹了-->
    <form action="" method="post" name="myform" onsubmit="return checkForm()">
     <!--居然采用自定義列表，嘿嘿-->
     <dl>
      <dt>通行證用戶(hù)名：</dt>
      <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()"/>@163.com</dd>
      <div id="userNameId"></div><!--這里當(dāng)做提示框！-->
     </dl>

     <dl>
      <dt>登錄密碼：</dt>
      <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
      <div id="pwdId"></div>
     </dl>

     <dl>
      <dt>重復(fù)登錄密碼：</dt><!--這里只有onblur:用戶(hù)使用邏輯使然-->
      <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
      <div id="repwdId"></div>
     </dl>

     <dl>
      <dt>性別：</dt><!--性別這里居然不給設(shè)置驗(yàn)證，就一個(gè)默認(rèn)，本真人有點(diǎn)不服-->
      <dd><input type="radio" name="sex" value="男" checked="checked"/>男
       <input type="radio" name="sex" value="女" />女
      </dd>       
     </dl>

     <dl>
      <dt>真實(shí)姓名：</dt><!--aa():這名字,本真人有點(diǎn)醉...-->
      <dd><input type="text" id="realName" class="inputs" onblur="aa()"/></dd>
      <div id="userNameId"></div>
     </dl>

     <dl>
      <dt>昵稱(chēng)：</dt><!--解析到這里本真人終于明白了為什么有些input沒(méi)有onfocus:有onfocus的是為了讓表單上彈出，本真人一直認(rèn)為很風(fēng)騷的提示！-->
      <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
      <div id="nickNameId"></div>
     </dl>

     <dl>
      <dt>關(guān)聯(lián)手機(jī)號(hào)：</dt>
      <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()"/></dd>
      <div id="telId"></div>
     </dl>

     <dl>
      <dt>保密郵箱：</dt>
      <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()"/></dd>
      <div id="emailId"></div>
     </dl>

     <dl>
      <dt></dt><!--輸入框?yàn)閕mage類(lèi)型的還真不常見(jiàn)-->
      <dd><input name=" " type="image" src="img/button.png"/></dd>
     </dl>

    </form>
    </td>

    <td class="bg_right"></td>
   </tr>
   <!--看不見(jiàn)的第三行-->
   <tr>
    <td class="bg bg_end_left"></td>
    <td class="bg bg_end"></td>
    <td class="bg bg_end_right"></td>
   </tr>
  </table>
 </div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: