1. 程式人生 > >JavaScript學習——完善註冊頁面表單校驗

JavaScript學習——完善註冊頁面表單校驗

函數 提示 步驟 表格 ges function img 但是 最終

1、之前我們已經使用彈出框的方式實現了表單校驗的功能,但是此種方式用戶體驗效果很差

我們希望做成把提示信息和校驗結果放在輸入欄的後面。

2、步驟分析 (此案例基於HTML&CSS——網站註冊頁面實現的)

第一步:確定事件(onfocus 聚焦事件)並為其綁定一個函數

第二步:書寫綁定函數(在輸入框的後面給出提示信息)

第三步:確定事件(onblur 離焦事件)並為其綁定一個函數

第四步:書寫函數(對數據進行校驗,分別給出提示)

JS代碼:(傳入參數的目的減少重復代碼,增加通用性)

 1 <script>
 2        function showTips(id,info){
3 document.getElementById(id+"span").innerHTML="<font color=‘gray‘>"+info+"</font>"; 4 } 5 function check(id,info){ 6 //1.獲取用戶輸入的用戶名數據 7 var uValue=document.getElementById(id).value; 8 //2.進行校驗 9 if
(uValue==""){ 10 document.getElementById(id+"span").innerHTML="<font color=‘red‘>"+info+"</font>"; 11 }else{ 12 document.getElementById(id+"span").innerHTML=""; 13 } 14 } 15 </script>

HTML代碼:

<input type="text" name="user" size="35px" id="user" onfocus="showTips(‘user‘,‘用戶名必填!‘)" onblur="check(‘user‘,‘用戶名不能為空!‘)"/><span id="userspan"></span>

最終代碼如下:

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>註冊頁面</title>
  6         <script>
  7             function showTips(id,info){
  8                 document.getElementById(id+"span").innerHTML="<font color=‘gray‘>"+info+"</font>";
  9             }
 10             function check(id,info){
 11                 //1.獲取用戶輸入的用戶名數據
 12                 var uValue=document.getElementById(id).value;
 13                 //2.進行校驗
 14                 if(uValue==""){
 15                     document.getElementById(id+"span").innerHTML="<font color=‘red‘>"+info+"</font>";
 16                 }else{
 17                     document.getElementById(id+"span").innerHTML="";
 18                 }
 19             }
 20         </script>
 21     </head>
 22     <body>
 23         <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
 24             
 25             <!--1.logo部分-->
 26             <tr>
 27                 <td>
 28                     <!--嵌套一個一行三列的表格-->
 29                     <table border="1px" width="100%">
 30                         <tr height="50px">
 31                             <td width="33.3%">
 32                                 <img src="../img/logo2.png" height="47px" />
 33                             </td>
 34                             <td width="33.3%">
 35                                 <img src="../img/header.png" height="47px"/>
 36                             </td>
 37                             <td width="33.3%">
 38                                 <a href="#">登錄</a>
 39                                 <a href="#">註冊</a>
 40                                 <a href="#">購物車</a>
 41                             </td>
 42                         </tr>
 43                     </table>
 44                 </td>
 45             </tr>
 46             
 47             <!--2.導航欄部分-->
 48             <tr height="50px" >
 49                 <td bgcolor="black">
 50                     <a href="#"><font size="3" color="white">首頁</font></a>&nbsp; &nbsp; &nbsp; &nbsp;                
 51                     <a href="#"><font color="white">手機數碼</font></a> &nbsp; &nbsp; &nbsp; &nbsp;
 52                     <a href="#"><font color="white">電腦辦公</font></a>&nbsp; &nbsp; &nbsp; &nbsp;
 53                     <a href="#"><font color="white">鞋靴箱包</font></a>&nbsp; &nbsp; &nbsp; &nbsp;
 54                     <a href="#"><font color="white">家用電器</font></a>
 55                 </td>
 56             </tr>
 57             
 58             <!--3.註冊表單-->
 59             <tr>
 60                 <td height="600px" background="../img/regist_bg.jpg">
 61                     <!--嵌套一個十行二列的表格-->
 62                     <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
 63                     <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
 64                         <tr height="40px">
 65                             <td colspan="2">
 66                                 <font size="4">會員註冊</font>&nbsp;&nbsp;&nbsp;USER REGISTER
 67                             </td>
 68                         </tr>
 69                         <tr>
 70                             <td>用戶名</td>
 71                             <td>
 72                                 <input type="text" name="user" size="35px" id="user" onfocus="showTips(‘user‘,‘用戶名必填!‘)" onblur="check(‘user‘,‘用戶名不能為空!‘)"/><span id="userspan"></span>
 73                             </td>
 74                         </tr>
 75                         <tr>
 76                             <td>密碼</td>
 77                             <td>
 78                                 <input type="password" name="password"  size="35px" id="password" onfocus="showTips(‘password‘,‘密碼必填!‘)" onblur="check(‘password‘,‘密碼不能為空!‘)"/><span id="passwordspan"></span>
 79                             </td>
 80                         </tr>
 81                         <tr>
 82                             <td>確認密碼</td>
 83                             <td>
 84                                 <input type="password" name="repassword" size="35px" id="repassword"/>
 85                             </td>
 86                         </tr>
 87                         <tr>
 88                             <td>E-mail</td>
 89                             <td>
 90                                 <input type="text" name="e-mail" size="35px" id="email"/>
 91                             </td>
 92                         </tr>
 93                         <tr>
 94                             <td>姓名</td>
 95                             <td>
 96                                 <input type="text" name="username" size="35px"/>
 97                             </td>
 98                         </tr>
 99                         <tr>
100                             <td>性別</td>
101                             <td>
102                                 <input type="radio" name="sex" value="男"/>103                                 <input type="radio" name="sex" value="女"/>104                             </td>
105                         </tr>
106                         <tr>
107                             <td>出生日期</td>
108                             <td>
109                                 <input type="text" name="birthday" size="35px"/>
110                             </td>
111                         </tr>
112                         <tr>
113                             <td>驗證碼</td>
114                             <td>
115                                 <input type="text" name="yzm" />
116                                 <img src="../img/yanzhengma.png" />
117                             </td>
118                         </tr>
119                         <tr align="center">
120                             <td colspan="2">
121                                 <input type="submit" value="註冊" />
122                             </td>
123                         </tr>
124                     </table>
125                     </form>
126                 </td>
127             </tr>
128             
129             <!--4.廣告圖片-->
130             <tr>
131                 <td>
132                     <img src="../img/footer.jpg"  width="100%"/>
133                 </td>
134             </tr>
135             
136             <!--5.友情鏈接和版權信息-->
137             <tr>
138                 <td align="center">
139                     <a href="#"><font>關於我們</font></a>
140                     <a href="#"><font>聯系我們</font></a>
141                     <a href="#"><font>招賢納士</font></a>
142                     <a href="#"><font>法律聲明</font></a>
143                     <a href="#"><font>友情鏈接</font></a>
144                     <a href="#"><font>支付方式</font></a>
145                     <a href="#"><font>配送方式</font></a>
146                     <a href="#"><font>服務聲明</font></a>
147                     <a href="#"><font>廣告聲明</font></a>
148                     <p>
149                         Copyright ? 2005-2016 hh商城 版權所有 
150                     </p>
151                 </td>
152             </tr>
153         </table>
154     </body>
155 </html>

在瀏覽器內運行,效果如下:

光標點擊到用戶名輸入框,提示用戶名必填!

技術分享

當用戶名未輸入內容時提示不能為空!

技術分享

當填寫都正確時則不提示。

技術分享

JavaScript學習——完善註冊頁面表單校驗