用戶註冊頁面以及js特效：1、表單聯動；2、正則表達式驗證。 一、html和css代碼（用table進行佈局，div也可以達到一樣的效果） 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <style> 5 table{ 6 border-collapse: ...
用戶註冊頁面以及js特效：1、表單聯動；2、正則表達式驗證。
一、html和css代碼（用table進行佈局，div也可以達到一樣的效果）
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <style> 5 table{ 6 border-collapse:collapse; 7 margin-left:auto; 8 margin-right:auto; 9 } 10 11 .header{ 12 width:800px; 13 height:100px; 14 15 } 16 input{ 17 width:250px; 18 } 19 .gender{ 20 width:20px; 21 } 22 .content{ 23 width:800px; 24 height:800px; 25 border:1px solid #808080; 26 padding:10px; 27 } 28 .label{ 29 width:100px; 30 text-align:right; 31 font-size:12px; 32 } 33 .ex{ 34 font-size:12px; 35 color:#808080; 36 width:360px; 37 } 38 td{ 39 border:0px solid; 40 } 41 42 43 </style> 44 </head> 45 <body> 46 <table class="header"> 47 <tr> 48 <td align="center"><strong style="color:#ff0000; font-size:12px;">新用戶註冊</strong></td> 49 <td></td> 50 <td align="right" style="font-size:12px;color:#808080;">“Tee台線上”會員能享受：超級積分 超級便捷 個性化的服務</td> 51 </tr> 52 </table> 53 <table class="content" border="5"> 54 <tr><td> 55 <table class="title" style="width:800px;"> 56 <tr> 57 <td align="center" class="label" style="width:200px; font-width:10px;"><strong>個人資料:</strong></td> 58 <td></td> 59 <td align="left" style="font-size:12px;color:#808080;">*為必填項</td> 60 </tr> 61 <tr> 62 <td colspan="3" style="padding:5px 50px;"><hr /></td> 63 </tr> 64 </table> 65 <table class="form"style="width:800px; margin-top:10px;"> 66 <form action="target" method="post" enctype="multipart/form-data"> 67 <tr> 68 <td class="label">*手機號碼：</td> 69 <td><input id="tel" type="text"></td> 70 <td class="ex">11個數字字元，例如：138123456789</td> 71 </tr> 72 <tr> 73 <td class="label" >*電子郵箱：</td> 74 <td><input id="mail" type="text"></td> 75 <td class="ex">此郵箱用來確認您的身份。</td> 76 </tr> 77 <tr> 78 <td class="label">*設定密碼：</td> 79 <td><input id="code" type="password"></td> 80 <td class="ex">長度必須在6-20個字元之間</td> 81 </tr> 82 <tr> 83 <td class="label">*重覆密碼：</td> 84 <td><input id="recode" type="password"></td> 85 <td class="ex"></td> 86 </tr> 87 <tr> 88 <td class="label">*姓 名：</td> 89 <td><input id="name" type="text"></td> 90 <td class="ex">請輸入姓名拼音，最多10個字元</td> 91 </tr> 92 <tr> 93 <td class="label">*昵 稱：</td> 94 <td><input type="text"></td> 95 </tr> 96 <tr> 97 <td class="label">*性 別：</td> 98 <td colspan="2"><input class="gender" type="radio" name="gender" checked>男<input class="gender" type="radio" name="gender" >女</td> 99 100 </tr> 101 <tr> 102 <td class="label">*所 在 地：</td> 103 <td colspan="2"> 104 <select id="pro" style="width:140px"> 105 <option selected="selected" >請選擇（省）</option> 106 </select> 107 <select id="city"> 108 <option selected="selected">請選擇（市）</option> 109 110 </select> 111 </td> 112 113 </tr> 114 <tr> 115 <td class="label">固定電話：</td> 116 <td><input type="text" name="phone"></td> 117 <td class="ex">最多12個字元，例如：0123456789</td> 118 </tr> 119 <tr> 120 <td class="label">傳 真：</td> 121 <td><input type="text" name="fax"></td> 122 <td class="ex">最多12個字元，例如：0123456789</td> 123 </tr> 124 <tr> 125 <td class="label"> 126 <select> 127 <option selected="selected">差點</option> 128 <option>成績</option> 129 </select> 130 </td> 131 <td><input type="text" name="grade"></td> 132 <td class="ex"></td> 133 </tr> 134 <tr> 135 <td class="label">地 址：</td> 136 <td><input type="text" name="address"></td> 137 <td class="ex">最多255個字元</td> 138 </tr> 139 <tr> 140 <td class="label">郵政編碼：</td> 141 <td><input type="text" name="num"></td> 142 <td class="ex">最多6個字元，例如：102030</td> 143 </tr> 144 <tr> 145 <td class="label">服務條款：</td> 146 <td colspan="2"><textarea cols="75" rows="10">《尚唐旗下網路服務條款》 147 148 149 1、服務條款的確認 150 151 高爾夫旅行網、“TEE台線上”各項服務的所有權與運作權歸北京尚唐高爾夫文化傳播有限公司（以下簡稱"尚唐"）所有。本服務條款具有法律約束力。一旦您點選"註冊"並通過註冊程式，即表示您自願接受本協議之所有條款，並已成為尚唐旗下網路（包括但不限於高爾夫旅行網、TEE台線上）的註冊會員。 152 153 2、服務內容 154 2.1 “TEE台線上”服務的具體內容由尚唐根據實際情況提供，尚唐對其所提供之服務擁有最終解釋權。 155 2.2 尚唐在旗下網路上向其會員提供相關網路服務，與相關網路服務有關的設備（如個人電腦、手機、及其他與接入互聯網或移動網有關的裝置）及所需的費用（如為接入互聯網而支付的電話費及上網費、為使用移動網而支付的手機費）均由會員自行負擔。 156 157 3、會員帳號及密碼 158 您註冊會員成功後，將得到一個帳號和密碼。您應妥善保管該帳號及密碼，並對以該帳號進行的所有活動及事件負法律責任。因黑客行為或會員保管疏忽致使帳號、密碼被他人非法使用的，尚唐不承擔任何責任。如您發現任何非法使用會員帳號或安全漏洞的情況，請立即與尚唐聯繫。 159 160 4、會員權責 161 4.1 會員有權按照尚唐規定的程式和要求使用尚唐向會員提供的各項網路服務，如果會員對該服務有異議，可以與尚唐聯繫以便得到及時解決。 162 4.2 用戶在申請使用尚唐旗下網路服務時，必須向尚唐提供準確的個人資料，如個人資料有任何變動，必須及時更新。 163 4.3 會員須同意接受尚唐旗下網路通過電子郵件或其他方式向會員發送促銷或其他相關商業信息。 164 4.4 會員在尚唐旗下網路的網頁上發佈信息或者利用尚唐網路的服務時必須符合國家的法律法規以及國際法的有關規定。 165 4.5 對於會員通過尚唐旗下網路網上消息平臺（包括但不限於BBS、評論）上傳到尚唐旗下網路網站上可公開獲取區域的任何內容，會員同意授予尚唐在全世界範圍內享有完全的、免費的、永久性的、不可撤銷的、非獨家的權利，以及再許可第三方的權利，以使用、複製、修改、改編、出版、翻譯、據以創作衍生作品、傳播、表演和展示此等內容（整體或部分），和/或將此等內容編入當前已知的或以後開發的其他任何形式的作品、媒體或技術中。 166 4.6 會員承諾不會在尚唐旗下網路的消息平臺（包括但不限於BBS、評論）發佈如下信息： 167 (1)反對憲法所確定的基本原則的； 168 (2)危害國家安全，泄露國家秘密，顛覆國家政權，破壞國家統一的； 169 (3)損害國家榮譽和利益的； 170 (4)煽動民族仇恨、民族歧視，破壞民族團結的； 171 (5)破壞國家宗教政策，宣揚邪教和封建迷信的； 172 (6)散佈謠言，擾亂社會秩序，破壞社會穩定的； 173 (7)散佈淫穢、色情、賭博、暴力、凶殺、恐怖或者教唆犯罪的； 174 (8)侮辱或者誹謗他人，侵害他人合法權益的； 175 (9)含有法律、行政法規禁止的其他內容的。 176 4.7 會員單獨為其發佈在尚唐旗下網路上信息承擔責任。會員若在尚唐旗下網路散佈和傳播違法信息，網路會員服務的系統記錄有可能作為會員違法之證據。 177 4.8 會員不得利用尚唐的服務從事以下活動： 178 (1)未經允許，進入電腦信息網路或者使用電腦信息網路資源； 179 (2)未經允許，對電腦信息網路功能進行刪除、修改或者增加； 180 (3)未經允許，對進入電腦信息網路中存儲、處理或者傳輸的數據和應用程式進行刪除、修改或者增加； 181 (4)故意製作、傳播電腦病毒等破壞性程式； 182 (5)其他危害電腦信息網路安全的行為。 183 4.9 會員不得以任何方式干擾尚唐的服務。 184 4.10 會員承諾遵守本站的所有其他規定和程式。 185 4.11 如果會員違反上述規定，尚唐有權要求其改正或直接採取一切必要措施（包括但不限於更改或刪除會員發佈的信息、中斷或終止會員使用網路的權利等），以減輕會員不當行為所造成的影響。 186 187 5、服務條款的修改 188 尚唐有權在必要時修改本服務條款，服務條款的內容一旦發生變動，尚唐將會通過適當方式向會員提示修改內容。 189 會員如不同意修改，可以主動選擇取消會員資格；如果會員繼續使用尚唐旗下網路服務，將被視為接受修改後的服務條款。 190 191 6、服務內容的修改或中斷 192 鑒於網路服務的特殊性，尚唐保留隨時修改或中斷其部分或全部網路服務的權利，並無需通知會員或為此對會員及任何第三方負責。 193 194 7、會員隱私保護 195 尚唐尊重會員的隱私權，不會公開、編輯或泄露任何有關會員的個人資料以及會員在使用網路服務時存儲在尚唐旗下網路上的非公開內容，但以下情況除外： 196 （1）事先獲得會員的明確授權； 197 （2）遵守法律規定或尚唐旗下網路合法服務程式； 198 （3）按照相關政府主管部門的合理要求； 199 （4）維護社會公眾利益； 200 （5）維護尚唐的合法權益； 201 （6）符合其他合法要求。 202 203 8、中斷或終止服務 204 如發生下列任何一種情形，尚唐旗下網路有權隨時中斷或終止向會員提供本協議項下的網路服務，而無需對會員或任何第三方承擔任何責任。 205 （1）會員向尚唐旗下網路提供的個人資料不真實。 206 （2）會員違反本協議的規則或不履行其所承擔的義務。 207 除此之外，會員可隨時根據需要通知尚唐終止向該會員提供服務，會員服務終止後，會員使用服務的權利同時終止。自會員服務終止之時起，尚唐旗下網路不再對該會員承擔任何責任。 208 209 9、知識產權 210 9.1尚唐旗下網路在網路服務中提供的任何文本、圖片、圖形、音頻和視頻資料均受版權、商標權以及其他相關法律法規的保護。未經尚唐事先同意，任何人不能擅自複製、傳播這些內容，或用於其他任何商業目的，所有這些資料或資料的任何部分僅可作為個人或非商業用途而保存在某台電腦內。 211 9.2尚唐為提供網路服務而使用的任何軟體（包括但不限於軟體中的任何文字、圖形、音頻、視頻資料及其輔助資料）的一切權利屬於該軟體的著作權人，未經該著作權人同意，任何人不得對該軟體進行反向工程、反向編譯或反彙編。 212 213 10、免責聲明 214 10.1尚唐旗下網路對任何因會員不正當或非法使用服務、在網上進行交易、或會員傳送信息變動而產生的直接、間接、偶然、特殊及後續的損害不承擔責任。 215 10.2尚唐對任何他人的威脅性的、誹謗性的、淫穢的、令人反感的或非法的內容或行為或對他人權利的侵犯（包括知識產權）不承擔責任；並對任何第三方通過服務發送或在服務中包含的任何內容不承擔責任。 216 10.3會員明確同意其使用尚唐旗下網路服務所存在的風險以及使用尚唐網路服務產生的一切後果由其自己承擔。 217 10.4對於因不可抗力或尚唐網路不能控制的原因造成的網路服務中斷或其它缺陷，尚唐網路不承擔任何責任，但將儘力減少因此而給用戶造成的損失和影響。 218 10.5尚唐不對所提供之網路服務做任何類型之擔保，包括但不限於： 219 （1）網路服務一定能滿足會員要求； 220 （2）網路服務不會中斷； 221 （3）網路服務的及時性、安全性、準確性。 222 但是尚唐對不違反規定的特定目的擔保不作限制。 223 224 11、賠償 225 因會員對本服務之使用而導致尚唐遭受任何來自第三方之糾紛、訴訟及索賠要求，會員同意向尚唐及其關聯企業、職員賠償相應損失（包括合理的律師費），並儘力使之免受損害。 226 227 12、關於退款 228 關於使用高爾夫旅行網“tee台線上”預訂成功後涉及到的退款情況，按照本網站公佈的“關於退款”內的規定為準。 229 230 13、通告 231 所有發給會員的通告都可以通過重要頁面的公告、電子郵件以及常規信件的形式傳送。 232 233 14、法律 234 尚唐服務條款之效力、解釋、執行均適用中華人民共和國法律。如發生爭議，應提交至有管轄權之人民法院。 235 236 15、其他規定 237 本服務條款中的標題僅為方便而設，在解釋本服務條款時應被忽略。</textarea> 238 </td> 239 </tr> 240 <tr> 241 <td class="label"></td> 242 <td colspan="2" style="font-size:12px;color:#ff0000;">點擊下麵的“我接受”，即表示您同意接受上面的服務條款及隱私政策。</td> 243 </tr> 244 <tr> 245 <td class="label"></td> 246 <td colspan="2" style="font-size:12px;color:#ff0000;"> 提醒：您是否已詳細閱讀並同意“關於退訂及退款”？同意，請點擊下麵：我接受，創建我的帳戶</td> 247 </tr> 248 <tr> 249 <td align="center" colspan="3"><input type="button" value="我接受，創建我的賬戶"></td> 250 </tr> 251 </form> 252 </table> 253 </td></tr> 254 </table>View Code
二、js代碼
用一個數組封裝表單數據，之後先將數據插入一級表單；
當一級表單數據發生改變的時候，進行判斷插入二級表單，在插入前先清空cities中的數據。
1 var arr = [ 2 "上海",["靜安","徐匯"], 3 "浙江",["杭州","寧波"], 4 "江蘇",["南京","蘇州"] 5 ] 6 7 for(var i=0; i<arr.length; i++){ 8 if(typeof arr[i]=="string"){ 9 pros.appendChild(new Option(arr[i],arr[i])); 10 } 11 } 12 //聯動表單的製作 13 pro.onchange = function(){ 14 //在添加新的內容前先把原來的清空 15 cities.innerHTML = ""; 16 cities.appendChild(new Option("請選擇（市）","請選擇（市）")); 17 18 for(var i=0; i<arr.length; i++){ 19 //選單的值用value來獲取 20 if(this.value == arr[i]){ 21 for(var j=0; j<arr[i+1].length; j++){ 22 if(typeof arr[i+1][j] == "string"){ 23 cities.appendChild(new Option(arr[i+1][j],arr[
