2021.05.11 杨传伟
任务：注册验证优化
js代码：
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 //跳转功能
45
46 function gologin(){
47 window.open("http://192.168.43.241:5000/","_self")
48 }
49 function goindex(){
50 // alert("请先登录！");
51 window.open("http://192.168.43.241:5000/show","_self")
52 }
53 //
54 function showTips(id,info){
55 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
56 }
57
58 function check(id,info){
59 var uValue = document.getElementById(id).value;
60 if(uValue==""){
61 document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
62 }else{
63 document.getElementById(id+"span").innerHTML="";
64 }
65 }
66
67 function showTips_pass(id,info){
68 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
69 }
70
71 function check_pass(id,info){
72 var one_pass=document.getElementById("password").value
73 var two_pass = document.getElementById(id).value;
74 if(one_pass!=two_pass||(two_pass=="")){
75 document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
76 }else{
77 document.getElementById(id+"span").innerHTML="";
78 }
79 }
80 //检测第二步信息
81
82 //检测中文字符
83 function checkCN(str){
84 if (escape(str).indexOf("%u")<0){ //indexOf()方法查找字符串是否包含"\u"
85 return true; //没有
86 } else {
87 return false; //有
88 }
89 }
90 function check_name(){
91 // alert("!")
92 //检测昵称合法性 2-16个字符
93 var username=document.getElementById("username").value
94 part_name=username.split(" ")
95 if(part_name.length!=1){
96 alert("昵称不可以包含空格！")
97 document.getElementById("username").focus();
98 return false
99 }
100 // alert(username.length)
101 if(! (username.length>=2) && (username.length<=16))
102 {
103 alert("昵称长度为2-16个字符！")
104 document.getElementById("username").focus();
105 return false
106 }
107 return true
108 }
109
110 // function check_id(){
111 // var idcode= document.getElementById("IDNumber").value
112 // // alert(idcode)
113 // //检测身份证号码合法性---全部数字或数字+X/x 18位
114 // // 加权因子
115 // var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
116 // // 校验码
117 // var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
118
119 // var code = idcode + "";
120 // var last = idcode[17];//最后一位
121
122 // var seventeen = code.substring(0,17);
123
124 // // ISO 7064:1983.MOD 11-2
125 // // 判断最后一位校验码是否正确
126 // var arr = seventeen.split("");
127 // var len = arr.length;
128 // var num = 0;
129 // for(var i = 0; i < len; i++){
130 // num = num + arr[i] * weight_factor[i];
131 // }
132
133 // // 获取余数
134 // var resisue = num%11;
135 // var last_no = check_code[resisue];
136
137 // // 格式的正则
138 // // 正则思路
139 // /*
140 // 第一位不可能是0
141 // 第二位到第六位可以是0-9
142 // 第七位到第十位是年份，所以七八位为19或者20
143 // 十一位和十二位是月份，这两位是01-12之间的数值
144 // 十三位和十四位是日期，是从01-31之间的数值
145 // 十五，十六，十七都是数字0-9
146 // 十八位可能是数字0-9，也可能是X
147 // */
148 // 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])$/;
149
150 // // 判断格式是否正确
151 // var format = idcard_patter.test(idcode);
152 // // alert(format)
153 // // 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
154 // // return last === last_no && format ? true : false;
155 // if(!(format==true && (last_no===last))){
156 // alert("身份证号码格式输入有误！")
157 // document.getElementById("IDNumber").focus();
158 // }
159 // }
160
161 function check_email(){
162 /* 1.由大小写字母，数字，"_ - @" 组成；
163 2.必须要有@，@两边都有内容，且两边的内容头尾均不为: " - _"
164 3. " - _ ." 不允许连续使用
165 4. 发现一般域名后缀 “.com”、".cn" 、".shop" ,新域名甚至会出现 “.cloud”、".fashion",至少2位 */
166
167 //检测邮箱合法性
168 var reg = new RegExp("^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$"); //正则表达式
169 var obj = document.getElementById("email"); //要验证的对象
170 if(obj.value === ""){ //输入不能为空
171 // alert("邮箱不能为空!");
172 return false;
173 }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
174 alert("您输入的邮箱格式不正确！");
175 document.getElementById("email").focus();
176 return false;
177 }else{
178 // alert("通过！");
179 return true;
180 }
181
182 }
183 function check_phone(){
184 var phone = document.getElementById("phoneNumber").value
185 if(phone.length!=11){
186 alert("手机号码应为11位！")
187 document.getElementById("phoneNumber").focus();
188 return false;
189 }
190 var regu = /^1[3456789]\d{9}$/
191 if(!(regu.test(phone)) ){
192 alert("手机号码格式有误！")
193 document.getElementById("phoneNumber").focus();
194 return false
195 }
196 return true
197 //检测手机号码合法性 11位 全数字
198 }
199 //第二步整体验证
200 function check_step2(){
201 var name= document.getElementById("username").value
202 // var id= document.getElementById("IDNumber").value
203 var email= document.getElementById("email").value
204 var phoneNumber= document.getElementById("phoneNumber").value
205 if(name.length==0 || email.length==0 || phoneNumber.length==0)
206 {
207 alert("请把信息填写完整！")
208 return false
209 }
210 else{
211 flag1=check_name();
212 // flag2=check_id();
213 flag3=check_email();
214 flag4=check_phone();
215 if(flag1&&flag3&&flag4)
216 return true
217 else{
218 return false
219 }
220 }
221 }
222
223 //第三步两次密码验证
224 function check_step3(){
225 var first_pass=document.getElementById("password").value
226 var second_pass=document.getElementById("confirmPassword").value
227 var res = checkCN(first_pass)
228 if(res== false){
229 alert("密码不可以包含中文！")
230 return false
231 }
232 //限制密码6-16位
233 // alert(first_pass.length )
234 if(!((first_pass.length>=6)&&first_pass.length<=18))
235 {
236 alert("密码长度应该为6-16位!")
237 document.getElementById("password").focus();
238 return false
239 }
240 var regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,18}');
241 part_pass=first_pass.split(" ")
242 if((!(regex.test(first_pass))) || part_pass.length!=1)
243 {
244 alert("密码为数字+英文字母 且不可以包含空格！")
245 document.getElementById("password").focus();
246 return false
247 }
248 return true
249 } 2021.05.12 李楠
任务：完成手机端页面后台交互，手机访问flask项目，使用同一个ip地址。
2021.5.12 章英杰
今天任务：对电影首页页面进行优化，主要完成了添加搜索查询按钮和增加下滑式分页功能（在同伴的功能基础上进行CSS美化）
遇到的问题：在进行“添加搜索查询按钮”时，出现了搜索按钮与表单不关联以及背景图片无法显示的情况。
出现问题的原因：在添加按钮的代码中，虽将type类型设为了“button”，但是并没有給button添加点击事件，所以造成了按钮与表单无法关联的情况。
解决办法：将type类型更改为submit
下滑式分页（加载更多按钮）CSS代码：
1 /*加载更多*/
2 .btn_local {
3 /*position:fixed;*/
4 bottom:0px;
5 z-index:99999;
6 width: 300px;
7 height: 35px;
8 text-align:center;
9 margin-left: 630px;
10 /**/
11 }
12 .btn_div { /* 按钮美化 */
13 width: 180px; /* 宽度 */
14 height: 30px; /* 高度 */
15 border-width: 0px; /* 边框宽度 */
16 border-radius: 3px; /* 边框半径 */
17 background: #999999; /* 背景颜色 */
18 cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
19 outline: none; /* 不显示轮廓线 */
20 font-family: Microsoft YaHei; /* 设置字体 */
21 color: white; /* 字体颜色 */
22 font-size: 14px; /* 字体大小 */
23 }
24 .btn_div:hover { /* 鼠标移入按钮范围时改变颜色 */
25 background: #808080;
26 } 任务看板
每日照片