HTML代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="css/register.css">
8 <script src="js/jquery-2.2.3.min.js"></script>
9 <script src="js/register.js"></script>
10 <title>树懒电影注册</title>
11 <script>
12
13 </script>
14 </head>
15 <body>
16 <div id="head">
17 <span id="logo-text">树懒电影</span>
18 <span style="font-size: 28px;color: #ece8e8dc;"> | </span>
19 <span style="font-size: 20px;font-weight: bold;">用户注册</span>
20 <span style="float: right; margin-top: 5px;"><a href="login.html">已有账号登录</a></span>
21 </div>
22 <div class="line"></div>
23 <div id="body">
24 <div class="boby-step">
25 <div class="step-div">
26 <div id="step-1" class="step-checkd">01</div>
27 <div class="step-text-checkd">用户协议</div>
28 <div id="step-01-line" class="step-line"></div>
29 </div>
30 <div class="step-div">
31 <div id="step-2" class="step-uncheckd">02</div>
32 <div id="step-2-text" class="step-text-uncheckd">账户信息</div>
33 <div id="step-02-line" class="step-line"></div>
34 </div>
35 <div class="step-div">
36 <div id="step-3" class="step-uncheckd">03</div>
37 <div id="step-3-text" class="step-text-uncheckd">密码设置</div>
38 <div id="step-03-line" class="step-line"></div>
39 </div>
40 <div class="step-div">
41 <div id="step-4" class="step-uncheckd">04</div>
42 <div id="step-4-text" class="step-text-uncheckd">注册成功</div>
43 </div>
44 </div>
45 <div style="clear:both;"></div>
46 <div id="step-01">
47 <div style="margin-top: 50px;">
48 <div style="font-size: 20px;font-weight: bold;">用户协议</div>
49 <div class="line1"></div>
50 </div>
51 <div style="clear: both;"></div>
52 <div>
53 <pre>
54 <h2>《用户协议》条款与隐私协议的接受 </h2>
55 请您认真阅读本协议，尤其是免除或者限制本平台责任的条款及其它限制您权利的条款，一旦您注册即表示您已经阅读并且同意与本平台达成协议，
56 完全理解并接受所有的《用户协议》条款。阅读本协议过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序。
57 <h3>用户账号名称安全 </h3>
58 任何注册和使用的本平台账号名称，不得有下列情形：
59 （一）违反宪法或法律法规规定的；
60 （二）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
61 （三）损害国家荣誉和利益的，损害公共利益的；
62 （四）煽动民族仇恨、民族歧视，破坏民族团结的；
63 （五）破坏国家宗教政策，宣扬邪教和封建迷信的；
64 （六）散布谣言，扰乱社会秩序，破坏社会稳定的；
65 （七）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
66 （八）侮辱或者诽谤他人，侵害他人合法权益的；
67 （九）含有法律、行政法规禁止的其他内容的。
68 <h3>用户个人信息保护</h3>
69 1、本平台非常重视您的个人信息保护，保证在合法、正当与必要的原则下收集、使用或者公开您的个人信息且不会收集与提供和本产品服务无关的个人信息。
70 2、您在注册账号或使用本服务的过程中，为了更好地向您提供相关服务，本平台可能需要您填写或提交一些必要的基础个人信息，如法律法规、
71 规章规范性文件（以下称“法律法规”）规定的需要填写的身份信息。如您提交的信息不完整或不符合法律法规的规定，则您可能无法使用本服务或在使用本服务的过程中受到限制。
72 </pre>
73 </div>
74
75 <div>
76 <form name="userobjectform" id="userobjectform">
77 <div style="clear: both;"></div>
78 <div>
79 <button type="button" onclick="next(1)" class="next-step">下一步</button>
80 </div>
81 </form>
82 </div>
83 </div>
84 <div id="step-02" style="display: none;">
85 <div style="margin-top: 50px;">
86 <div style="font-size: 20px;font-weight: bold;">账户信息</div>
87 <div class="line1"></div>
88 </div>
89 <div style="clear: both;"></div>
90 <div style="margin-top: 50px;">
91 <form name="userinfoform" id="userinfoform">
92 <div class="accountinfo">
93 <label for="username">用户姓名</label>
94 <input type="text" name="username" id="username" placeholder="请输入您的姓名"
95 onfocus="showTips('username','姓名必填！')"
96 onblur="check('username','姓名不能为空！');check_name()"/>
97 <span id="usernamespan"></span>
98 </div>
99 <div class="accountinfo">
100 <label for="IDNumber">证件号码</label>
101 <input type="text" name="IDNumber" id="IDNumber" placeholder="请输入您的身份证号码"
102 onfocus="showTips('IDNumber','证件号码必填！')"
103 onblur="check('IDNumber','证件号码不能为空！');check_id()"/>
104 <span id="IDNumberspan"></span>
105 </div>
106 <div class="accountinfo">
107 <label for="email">用户邮箱</label>
108 <input type="text" name="email" id="email" placeholder="请输入您的邮箱"
109 onfocus="showTips('email','用户邮箱必填！')"
110 onblur="check('email','用户邮箱不能为空！');check_email()"/>
111 <span id="emailspan"></span>
112 </div>
113 <div class="accountinfo">
114 <label for="phoneNumber">手机号码</label>
115 <input type="text" name="phoneNumber" id="phoneNumber" placeholder="请输入您的手机号码"
116 onfocus="showTips('phoneNumber','手机号码必填！')"
117 onblur="check('phoneNumber','手机号码不能为空！');check_phone()"/>
118 <span id="phoneNumberspan"></span>
119 </div>
120 <div>
121 <button type="button" onclick="previous(2)" class="previous-step">上一步</button>
122 <button type="button" onclick="if(check_step2()) next(2)" class="next-step">下一步</button>
123 </div>
124 </form>
125 </div>
126 </div>
127
128 <div id="step-03" style="display: none;">
129 <div style="margin-top: 50px;">
130 <div style="font-size: 20px;font-weight: bold;">密码设置</div>
131 <div class="line1"></div>
132 </div>
133 <div style="clear: both;"></div>
134 <div style="margin-top: 50px;">
135 <form name="passwordform" id="passwordform">
136 <div class="accountinfo">
137 <label for="password">登录密码</label>
138 <input type="password" name="password" id="password" placeholder="请输入您设置登录密码"
139 onfocus="showTips('password','登录密码必填！')"
140 onblur="check('password','登录密码不能为空！')"/>
141 <span id="passwordspan"></span>
142 </div>
143 <div class="accountinfo">
144 <label for="confirmPassword">确认密码</label>
145 <input type="password" name="confirmPassword" id="confirmPassword" placeholder="请输入您再次确认密码"
146 onfocus="showTips_pass('confirmPassword','登录密码为必填！')"
147 onblur="check_pass('confirmPassword','两次密码输入不一致！') ;
148 "/>
149 <span id="confirmPasswordspan"></span>
150 </div>
151 <div>
152 <button type="button" onclick="previous(3)" class="previous-step">上一步</button>
153 <button type="button" onclick="if(check_step3()) next(3)" class="next-step">下一步</button>
154 </div>
155 </form>
156 </div>
157 </div>
158 <div id="step-04" style="display: none;">
159 <div>
160 <div class="img">
161 <img src="images/suss.png" alt="注册成功">
162 </div>
163 <div class="img-text">恭喜您注册成功</div>
164 <div class="step-04-button">
165 <button type="button" onclick="gologin()" class="next-step">登 录</button>
166 <button type="button" onclick="goindex()" class="previous-step">首 页</button>
167 </div>
168 </div>
169 </div>
170 </div>
171 <div style="clear: both;"></div>
172
173 <div id="footer">
174 <div>
175 <div id="footer-img">
176 <img src="./images/reg-footer.jpg">
177 </div>
178 <div style="margin-left: 50px;">
179 <table>
180 <tr>
181 <th class="text">我们</th>
182 <th class="text">案例</th>
183 <th class="text">方案</th>
184 <th class="text">发现</th>
185 <th class="text1">联系我们</th>
186 </tr>
187 <tr>
188 <td>XXXX</td>
189 <td>XXXX</td>
190 <td>XXXX</td>
191 <td>XXXX</td>
192 <td>XXXX</td>
193 </tr>
194 <tr>
195 <td>XXXX</td>
196 <td>XXXX</td>
197 <td>XXXX</td>
198 <td>XXXX</td>
199 <td>XXXX</td>
200 </tr>
201 <tr>
202 <td>XXXX</td>
203 <td>XXXX</td>
204 <td>XXXX</td>
205 <td>XXXX</td>
206 <td>XXXX</td>
207 </tr>
208 <tr>
209 <td>XXXX</td>
210 <td>XXXX</td>
211 <td>XXXX</td>
212 <td>XXXX</td>
213 <td>XXXX</td>
214 </tr>
215 </table>
216 </div>
217 </div>
218
219 </div>
220 </body>
221 </html>
JavaScript代码：
1 function next(i){
2 if(i==1){
3 $("#step-01").css("display","none");
4 $("#step-02").css("display","block");
5 $("#step-01-line").css("backgroundColor","#0C75BB");
6 $("#step-2").css("backgroundColor","#0C75BB");
7 $("#step-2-text").css("color","#0C75BB");
8 }else if(i==2){
9 $("#step-02").css("display","none");
10 $("#step-03").css("display","block");
11 $("#step-3").css("backgroundColor","#0C75BB");
12 $("#step-02-line").css("backgroundColor","#0C75BB");
13 $("#step-3-text").css("color","#0C75BB");
14 }else if(i==3){
15 $("#step-03").css("display","none");
16 $("#step-04").css("display","block");
17 $("#step-4").css("backgroundColor","#0C75BB");
18 $("#step-03-line").css("backgroundColor","#0C75BB");
19 $("#step-4-text").css("color","#0C75BB");
20 console.log($("#userobjectform").serialize());
21 console.log($("#userinfoform").serialize());
22 console.log($("#passwordform").serialize());
23 //serializeObject()
24 }else{
25 console.log(225)
26 }
27 }
28
29 function previous(i){
30 if(i==2){
31 $("#step-01").css("display","block");
32 $("#step-02").css("display","none");
33 $("#step-01-line").css("backgroundColor","#cccccc");
34 $("#step-2").css("backgroundColor","#cccccc");
35 $("#step-2-text").css("color","#cccccc");
36 }else if(i==3){
37 $("#step-02").css("display","block");
38 $("#step-03").css("display","none");
39 $("#step-02-line").css("backgroundColor","#cccccc");
40 $("#step-3").css("backgroundColor","#cccccc");
41 $("#step-3-text").css("color","#cccccc");
42 }
43 }
44 function gologin(){
45 window.document.location.href="login.html"
46 }
47 function goindex(){
48 alert("请先登录！");
49 window.document.location.href="login.html"
50 }
51 //
52 function showTips(id,info){
53 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
54 }
55
56 function check(id,info){
57 var uValue = document.getElementById(id).value;
58 if(uValue==""){
59 document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
60 }else{
61 document.getElementById(id+"span").innerHTML="";
62 }
63 }
64
65 function showTips_pass(id,info){
66 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
67 }
68
69 function check_pass(id,info){
70 var one_pass=document.getElementById("password").value
71 var two_pass = document.getElementById(id).value;
72 if(one_pass!=two_pass||(two_pass=="")){
73 document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
74 }else{
75 document.getElementById(id+"span").innerHTML="";
76 }
77 }
78 //检测第二步信息
79
80 //检测中文字符
81 function checkCN(str){
82 if (escape(str).indexOf("%u")<0){ //indexOf()方法查找字符串是否包含"u"
83 return true; //没有
84 } else {
85 return false; //有
86 }
87 }
88 function check_name(){
89 // alert("!")
90 //检测姓名合法性 2-16个字符
91 var username=document.getElementById("username").value
92 if(username.trim()==0){
93 alert("姓名不可以全是空格！")
94 }
95 // alert(username.length)
96 if(! (username.length>=2) && (username.length<=16))
97 {
98 alert("姓名输入长度应该为2到16个字符！")
99 // document.getElementById("username").focus();
100 }
101 }
102
103 function check_id(){
104 var idcode= document.getElementById("IDNumber").value
105 // alert(idcode)
106 //检测身份证号码合法性---全部数字或数字+X/x 18位
107 // 加权因子
108 var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
109 // 校验码
110 var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
111
112 var code = idcode + "";
113 var last = idcode[17];//最后一位
114
115 var seventeen = code.substring(0,17);
116
117 // ISO 7064:1983.MOD 11-2
118 // 判断最后一位校验码是否正确
119 var arr = seventeen.split("");
120 var len = arr.length;
121 var num = 0;
122 for(var i = 0; i < len; i++){
123 num = num + arr[i] * weight_factor[i];
124 }
125
126 // 获取余数
127 var resisue = num%11;
128 var last_no = check_code[resisue];
129
130 // 格式的正则
131 // 正则思路
132 /*
133 第一位不可能是0
134 第二位到第六位可以是0-9
135 第七位到第十位是年份，所以七八位为19或者20
136 十一位和十二位是月份，这两位是01-12之间的数值
137 十三位和十四位是日期，是从01-31之间的数值
138 十五，十六，十七都是数字0-9
139 十八位可能是数字0-9，也可能是X
140 */
141 var idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
142
143 // 判断格式是否正确
144 var format = idcard_patter.test(idcode);
145 // alert(format)
146 // 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
147 // return last === last_no && format ? true : false;
148 if(!(format==true && (last_no===last))){
149 alert("身份证号码格式输入有误！")
150 // document.getElementById("IDNumber").focus();
151 }
152 }
153
154 function check_email(){
155 /* 1.由大小写字母，数字，"_ - @" 组成；
156 2.必须要有@，@两边都有内容，且两边的内容头尾均不为: " - _"
157 3. " - _ ." 不允许连续使用
158 4. 发现一般域名后缀 “.com”、".cn" 、".shop" ,新域名甚至会出现 “.cloud”、".fashion",至少2位 */
159
160 //检测邮箱合法性
161 var reg = new RegExp("^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*.[a-z]{2,}$"); //正则表达式
162 var obj = document.getElementById("email"); //要验证的对象
163 if(obj.value === ""){ //输入不能为空
164 // alert("邮箱不能为空!");
165 return false;
166 }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
167 alert("您输入的邮箱格式不正确！");
168 return false;
169 }else{
170 // alert("通过！");
171 return true;
172 }
173
174 }
175 function check_phone(){
176 var phone = document.getElementById("phoneNumber").value
177 if(phone.length!=11){
178 alert("手机号码不为11位，请重新输入！")
179 return false;
180 }
181 var regu = /^1[3456789]d{9}$/
182 if(!(regu.test(phone)) ){
183 alert("手机号码格式有误！")
184 return false
185 }
186 return true
187 //检测手机号码合法性 11位 全数字
188 }
189 //第二步验证
190 function check_step2(){
191 var name= document.getElementById("username").value
192 var id= document.getElementById("IDNumber").value
193 var email= document.getElementById("email").value
194 var phoneNumber= document.getElementById("phoneNumber").value
195 if(name.length==0 || id.length==0 || email.length==0 || phoneNumber.length==0)
196 {
197 alert("请把信息填写完整！")
198 return false
199 }
200 else{
201 // document.getElementById("userinfoform").submit()
202 return true
203 }
204 }
205
206 //第三步两次密码验证
207 function check_step3(){
208 var first_pass=document.getElementById("password").value
209 var second_pass=document.getElementById("confirmPassword").value
210 var res = checkCN(first_pass)
211 if(res== false){
212 alert("密码不可以包含中文！")
213 return false
214 }
215 //限制密码6-16位
216 // alert(first_pass.length )
217 if(!((first_pass.length>=6)&&first_pass.length<=16))
218 {
219 alert("密码长度应该为6-16位!")
220 return false
221 }
222 part_pass=first_pass.split(" ")
223 var all_c= /^[A-Za-z]*$/
224 var all_e= /^[d]*$/
225 // alert("空格："+part_pass.length)
226 if(part_pass.length!=1 || !(all_c.test(first_pass)) || !(all_e.test(first_pass)))
227 {
228 alert("密码为数字+英文字母且不可以包含空格！")
229 return false
230 }
231 return true
232 }
心得体会：
①判断输入框是否全是空格，调用字符串方法trim( )，判断长度是否为0
②判断数据格式使用re正则表达式
③html绑定多个js方法：
使用 return fun1( ); fun2( ) 这种情况两个方法没有逻辑关联，不管fun1是true还是false fun2都会被调用！
使用 if ( fun1( ) ) fun2( ) 当fun1 为true 继续执行fun2 为false 不执行fun2！
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
