用户注册界面（带js特效）

2018-06-24 01:41:30来源：未知阅读 ()

用户注册页面以及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">*姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
 89             <td><input id="name" type="text"></td>
 90             <td class="ex">请输入姓名拼音，最多10个字符</td>
 91         </tr>
 92         <tr>
 93             <td class="label">*昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</td>
 94             <td><input type="text"></td>
 95         </tr>
 96         <tr>
 97             <td class="label">*性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</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">*所&nbsp;&nbsp;在&nbsp;&nbsp;地：</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">传&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;真：</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">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</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[i+1][j]));
24                 }
25             }
26         }
27     }
28 }

用正则表达式进行判断，如果不符合，则在鼠标焦点移开的时候将Input输入框背景改为红色。

 1 //正则表达式
 2 var regTel = /\d{11}/,
 3     regMail = /^\w+@\w+\.com|cn$/,
 4     regCode = /^\w{6,20}$/,
 5     regName = /^\w{1,10}$/;
 6 
 7 
 8 function ifReged(reg,dom){
 9     if(!reg.test(dom.value)){
10         dom.style.background = "red";
11     }else{
12         dom.style.background = "none";
13     }
14 }
15 tel.onblur = function(){
16     ifReged(regTel,this);
17 }
18 mail.onblur = function(){
19     ifReged(regMail,this);
20 }
21 code.onblur = function(){
22     ifReged(regCode,this);
23 }
24 recode.onblur = function(){
25     if(this.value != code.value){
26         this.style.background = "red";
27     }else{
28         this.style.background = "none";
29     }
30 }
31 userName.onblur = function(){
32     ifReged(regName,this);
33 }