1、步驟分析
第一步：確定事件(onsubmit)並為其綁定一個函數
第二步：書寫這個函數(獲取用戶輸入的數據<獲取數據時需要在指定位置定義一個 id>)
第三步：對用戶輸入的數據進行判斷
第四步：數據合法(讓表單提交)
第五步：數據非法(給出錯誤提示信息，不讓表單提交)
問題：如何控制表單提交？
關於事件 onsubmit：一般用於表單提交的位置，那么需要在定義函數的時候給出一個 返回值。
onsubmit = return checkForm()
2、完成注冊頁面表單校驗（此案例注冊頁面表單校驗效果基於HTML&CSS——網站注冊頁面）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注冊頁面</title> 6 <script> 7 function checkForm(){ 8 //alert("aa"); 9 10 /**校驗用戶名*/ 11 //1.獲取用戶輸入的數據 12 var uValue=document.getElementById("user").value; 13 //alert(uValue); 14 if(uValue==""){ 15 //2.給出錯誤提示信息 16 alert("用戶名不能為空"); 17 return false; 18 } 19 20 /**校驗密碼*/ 21 var pValue=document.getElementById("password").value; 22 if(pValue==""){ //注意空的表示方法 23 alert("密碼不能為空"); 24 return false; 25 } 26 27 /** 校驗確認密碼*/ 28 var rpValue=document.getElementById("repassword").value; 29 if(rpValue!=pValue){ 30 alert("兩次密碼輸入不一致！"); 31 return false; 32 } 33 34 /**校驗郵箱*/ 35 var eValue=document.getElementById("email").value; 36 if(！/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ 37 alert("郵箱格式不正確！"); 38 } 39 } 40 </script> 41 </head> 42 <body> 43 <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> 44 45 <!--1.logo部分--> 46 <tr> 47 <td> 48 <!--嵌套一個一行三列的表格--> 49 <table border="1px" width="100%"> 50 <tr height="50px"> 51 <td width="33.3%"> 52 <img src="../img/logo2.png" height="47px" /> 53 </td> 54 <td width="33.3%"> 55 <img src="../img/header.png" height="47px"/> 56 </td> 57 <td width="33.3%"> 58 <a href="#">登錄</a> 59 <a href="#">注冊</a> 60 <a href="#">購物車</a> 61 </td> 62 </tr> 63 </table> 64 </td> 65 </tr> 66 67 <!--2.導航欄部分--> 68 <tr height="50px" > 69 <td bgcolor="black"> 70 <a href="#"><font size="3" color="white">首頁</font></a> 71 <a href="#"><font color="white">手機數碼</font></a> 72 <a href="#"><font color="white">電腦辦公</font></a> 73 <a href="#"><font color="white">鞋靴箱包</font></a> 74 <a href="#"><font color="white">家用電器</font></a> 75 </td> 76 </tr> 77 78 <!--3.注冊表單--> 79 <tr> 80 <td height="600px" background="../img/regist_bg.jpg"> 81 <!--嵌套一個十行二列的表格--> 82 <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> 83 <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> 84 <tr height="40px"> 85 <td colspan="2"> 86 <font size="4">會員注冊</font> USER REGISTER 87 </td> 88 </tr> 89 <tr> 90 <td>用戶名</td> 91 <td> 92 <input type="text" name="user" size="35px" id="user"/> 93 </td> 94 </tr> 95 <tr> 96 <td>密碼</td> 97 <td> 98 <input type="password" name="password" size="35px" id="password"/> 99 </td> 100 </tr> 101 <tr> 102 <td>確認密碼</td> 103 <td> 104 <input type="password" name="repassword" size="35px" id="repassword"/> 105 </td> 106 </tr> 107 <tr> 108 <td>E-mail</td> 109 <td> 110 <input type="text" name="e-mail" size="35px" id="email"/> 111 </td> 112 </tr> 113 <tr> 114 <td>姓名</td> 115 <td> 116 <input type="text" name="username" size="35px"/> 117 </td> 118 </tr> 119 <tr> 120 <td>性別</td> 121 <td> 122 <input type="radio" name="sex" value="男"/>男 123 <input type="radio" name="sex" value="女"/>女 124 </td> 125 </tr> 126 <tr> 127 <td>出生日期</td> 128 <td> 129 <input type="text" name="birthday" size="35px"/> 130 </td> 131 </tr> 132 <tr> 133 <td>驗證碼</td> 134 <td> 135 <input type="text" name="yzm" /> 136 <img src="../img/yanzhengma.png" /> 137 </td> 138 </tr> 139 <tr align="center"> 140 <td colspan="2"> 141 <input type="submit" value="注冊" /> 142 </td> 143 </tr> 144 </table> 145 </form> 146 </td> 147 </tr> 148 149 <!--4.廣告圖片--> 150 <tr> 151 <td> 152 <img src="../img/footer.jpg" width="100%"/> 153 </td> 154 </tr> 155 156 <!--5.友情鏈接和版權信息--> 157 <tr> 158 <td align="center"> 159 <a href="#"><font>關於我們</font></a> 160 <a href="#"><font>聯系我們</font></a> 161 <a href="#"><font>招賢納士</font></a> 162 <a href="#"><font>法律聲明</font></a> 163 <a href="#"><font>友情鏈接</font></a> 164 <a href="#"><font>支付方式</font></a> 165 <a href="#"><font>配送方式</font></a> 166 <a href="#"><font>服務聲明</font></a> 167 <a href="#"><font>廣告聲明</font></a> 168 <p> 169 Copyright © 2005-2016 hh商城 版權所有 170 </p> 171 </td> 172 </tr> 173 </table> 174 </body> 175 </html>
在校驗確認密碼這部分使用了正則表達式（不需要記憶，需要時查找文檔）
正則式.test(校驗對象)為真表示符合條件，為假則不符合。