请老师解答
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >注册平台</ title > < link rel = "stylesheet" href = "css/register.css" > </ head > < body > <!-- 头部 --> < header class = "header" > < div class = "header-box" > <!-- logo区 --> < div class = "logo" > < span > < a class = "logo-picture" href = "#" ></ a > </ span > < div class = "nav-left" > < a href = "#" class = "title" >慕课高铁客户服务中心 </ a > < span class = "line" >|</ span > < a href = "#" class = "service" >客户服务</ a > </ div > </ div > <!-- 导航区 --> < nav class = "nav" > < a href = "#" class = "nav-opinion" >意见反馈</ a > < span class = "nav-adress len" >imooc@com</ span > < span class = "" >您好,请</ span > < a href = "#" class = "nav-land" >登陆 </ a >| < a href = "#" class = "nav-register len" >注册</ a > <!-- 留出空间给下拉菜单消失 --> < span class = "space" ></ span > <!-- 下拉菜单 --> < a href = "#" class = "nav-my" >我的IMOOC</ a > < a href = "#" class = "triangle" ></ a > <!-- 留出空间给下拉菜单消失 --> < span class = "space" ></ span > < div class = "dropdown-content" > < a href = "#" >未完成订单</ a > < a href = "#" class = "dotted" >已完成订单(改/退)</ a > < a href = "#" class = "dotted" >我的保险</ a > < a href = "" >查看个人信息</ a > < a href = "" class = "dotted" >账户安全</ a > < a href = "" class = "dotted" >常用联系人</ a > < a href = "" >重点旅客预约</ a > < a href = "" class = "dotted" >遗失物品查找</ a > < a href = "" class = "dotted" >服务查询</ a > < a href = "" >投诉</ a > < a href = "" >建议</ a > </ div > < span class = "mobileVersion" > < span href = "#" class = "phone" ></ span > < a href = "#" class = "mobile" >手机版</ a > </ span > </ nav > </ div > </ header > <!-- 内容区 --> < div class = "content" > < div class = "middlebox" > <!-- 当前位置 --> < div class = "position" > < span class = "word1" >您当前的位置 :</ span > < span class = "word2" >客运首页 > 注册</ span > </ div > < div class = "inputbox" > <!-- 账户信息 --> < div class = "userInfor" >账户信息</ div > <!-- 注册部分 --> < div class = "total" > <!-- 用户名 --> < div class = "item" > < span class = "important" >*</ span > < label for = "userAccount" class = "sameLen" >用户名</ label >: < input type = "text" id = "userAccount" class = "frame" placeholder = "用户名设置成功后不可修改" > </ div > < span class = "item_" >6-30位字母、数字或'_',字母开头</ span > < br > <!-- 登陆密码 --> < div class = "item" > < span class = "important" >*</ span > < label for = "userPass" class = "sameLen" >登陆密码</ label >: < input type = "text" id = "userPass" class = "frame" placeholder = "6-20位字母、数字或符号" > </ div > < span class = "item_" > < span class = "safe safe1" ></ span > < span class = "safe safe2" ></ span > < span class = "safe safe3" ></ span > </ span > < br > <!-- 确认密码 --> < div class = "item" > < span class = "important" >*</ span > < label for = "confirmPass" class = "sameLen" >确认密码</ label >: < input type = "text" id = "confirmPass" class = "frame" placeholder = "再次输入您的登陆密码" > </ div > < span class = "item_" ></ span > < br > <!-- 姓名 --> < div class = "item" > < span class = "important" >*</ span > < label for = "userName" class = "sameLen" >姓名</ label >: < input type = "text" id = "userName" class = "frame" placeholder = "请输入姓名" > </ div > < span class = "item_" > < a href = "" class = "nameRule" >姓名填写规则</ a > < div class = "nameExplain" > < p >1.确认姓名中生僻字无法输入时,可用生僻字拼音或同音字替代;</ p > < p >2.输入姓名保存后,遇有系统无法正确显示的汉字,可用该汉字的拼音或同音字重新修改后保</ p > < p >存;</ p > < p >3.姓名中有繁体字无法输入时,可用简体替代;</ p > < p >4.姓名较长,汉字与英文字符合计超过30个(1个汉子算2个字符)的,需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符(空格字符不输入),其中英文字符输入时不区别大小写。</ p > </ div > </ span > < br > <!-- 证件类型 --> < div class = "item" > < span class = "important" >*</ span > < span class = "idType sameLen" >证件类型</ span >: < span > < select name = "" id = "typeSelect" > < option value = "ID" selected = "selected" >二代身份证</ option > < option value = "HKpass" >港澳通行证</ option > < option value = "TWpass" >台湾通行证</ option > < option value = "PassportOptions" >护照选项</ option > </ select > </ span > < span class = "item_" ></ span > < br > < br > <!-- 证件号码 --> < div class = "item" > < span class = "important" >*</ span > < label for = "" class = "sameLen" >证件号码</ label >: < input type = "text" id = "idNum" class = "frame" placeholder = "请输入您的证件号码" > </ div > < span class = "item_" ></ span > < br > <!-- 邮箱 --> < div class = "item" > < span class = "important" >*</ span > < label for = "" class = "sameLen" >邮箱</ label >: < input type = "text" id = "email" class = "frame" placeholder = "请正确填写邮箱地址" > </ div > < span class = "item_" ></ span > < br > <!-- 手机号码 --> < div class = "item" > < span class = "important" >*</ span > < label for = "" class = "sameLen" >手机号码</ label >: < input type = "text" id = "phoneNum" class = "frame" placeholder = "请输入您的手机号码" > </ div > < span class = "item_" >请正确填写手机号码,稍后将向该手机号码发送短息验证码</ span > < br > <!-- 旅客类型 --> < div class = "item" > < span class = "important" >*</ span > < label for = "" class = "sameLen" >旅客类型</ label >: < span > < select name = "" id = "passSelect" > < option value = "adiut" selected = "selected" >成人</ option > < option value = "child" >儿童</ option > < option value = "student" >学生</ option > < option value = "soldier" >军人</ option > < option value = "disabledSol" >残疾军人</ option > < option value = "disabledPol" >伤残人民警察</ option > </ select > </ span > </ div > < span class = "item_" ></ span > < br > </ div > <!-- 条款项 --> < div id = "rule" > < input type = "checkbox" name = "rule" value = "check" id = "check" checked = "checked" > 我已阅读并同意遵守 < a href = "" class = "ruleName" >《中国铁路用户服务中心网站服务条款》</ a > </ div > <!-- 下一步按钮 --> < a href = "" > < div id = "nextStep" > 下一步 </ div ></ a > </ div > </ div > </ div > <!-- 尾部 --> < footer class = "footer" > < p class = "footertext1" > < a href = "" >关于我们</ a > < span >|</ span > < a href = "" >网站声明</ a > </ p > < p class = "footertext2" >Copyright © 2017 imooc.com All Rights Reserved | 京ICP备1304664号-2</ p > </ footer > < script type = "text/javascript" src = "js/register.js" ></ script > </ body > </ html > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 | //获取ID元素方法 function getEle (ele){ var result = document.getElementById(ele); return result; } // 获取元素 var item = document.querySelectorAll( '.item' ), userAccount = getEle( "userAccount" ), userPass = getEle( "userPass" ), confirmPass = getEle( "confirmPass" ), userName = getEle( "userName" ), typeSelect = getEle( "typeSelect" ), idNum = getEle( "idNum" ), email = getEle( "email" ), phoneNum = getEle( "phoneNum" ), passSelect = getEle( "passSelect" ), nextStep = getEle( 'nextStep' ) check = getEle( 'check' ); var triangle = document.querySelector( '.triangle' ), dropdownContent = document.querySelector( '.dropdown-content' ), navMy = document.querySelector( '.nav-my' ), logo = document.querySelector( '.logo' ), navRegister = document.querySelector( '.nav-register' ), space = document.querySelectorAll( '.space' ), item_ = document.querySelectorAll( '.item_' ), safe = document.querySelectorAll( '.safe' ); // 正则表达式 var reg = { userAccount : /^[a-zA-Z]\w{5,29}$/, userPass1 : /^[a-zA-Z]{6,20}$|\d{6,20}|^\W{6,20}$/, userPass2 : /^[1-9|a-z]{6,20}$|^[\W|a-z]{6,20}$|^[\W|1-9]{6,20}$/, userPass3 : /\W[a-zA-Z0-9]{6,20}/, userName : /[a-zA-Z]{3,30}|[\u4e00-\u9fa5]{2,15}/, idNum : /\d{17,18}X?/, email : /^\S+@\w+\.[a-zA-Z_]{2,4}$/, phoneNum : /^1[03-9]\d{9}$/ } var input =[]; for ( var i = 0; i < item.length + 1; i++) { input.push( 'false' ); } //导航下拉菜单 console.log(dropdownContent); triangle.onmouseover = function (){ dropdownContent.style.display = 'block' ; } navMy.onmouseover = function (){ dropdownContent.style.display = 'block' ; } dropdownContent.onmouseover = function (){ dropdownContent.style.display = 'block' ; } dropdownContent.onmouseout = function (){ dropdownContent.style.display = 'none' ; } logo.onmouseover = function (){ dropdownContent.style.display = 'none' ; } navRegister.onmouseover = function (){ dropdownContent.style.display = 'none' ; } space[0].onmouseover = function (){ dropdownContent.style.display = 'none' ; } space[1].onmouseover = function (){ dropdownContent.style.display = 'none' ; } // 用户名 userAccount.onblur = function (){ if (!userAccount.value){ item_[0].innerHTML = '用户名不能为空' ; item_[0].style.color = "red" ; } else if (!reg.userAccount.test( this .value)){ item_[0].innerHTML = "6-30位字母、数字或'_',字母开头" ; item_[0].style.color = "red" ; } else { item_[0].innerHTML = '用户名输入正确' ; item_[0].style.color = "green" ; input[0] = true ; } } //密码区 userPass.onblur = function (){ if (!userPass.value){ item_[1].innerHTML = '密码不能为空' ; item_[1].style.color = "red" ; } else if (!/^\S{6,20}$/.test( this .value)){ item_[1].innerHTML = "6-20位字母、数字或符号" ; item_[1].style.color = "red" ; } else if (reg.userPass1.test( this .value)){ safe[0].style.background = "red" ; input[1] = true ; } else if (reg.userPass2.test( this .value)){ safe[0].style.background = "red" ; safe[1].style.background = "rgb(251,116,3)" ; input[1] = true ; } else if (reg.userPass3.test( this .value)){ safe[0].style.background = "red" ; safe[1].style.background = "rgb(251,116,3)" ; safe[2].style.background = "green" ; input[1] = true ; } } //确认密码 confirmPass.onblur = function (){ if (!confirmPass.value){ item_[2].innerHTML = '输入框不能为空' ; item_[2].style.color = "red" ; } else if (confirmPass.value != userPass.value){ item_[2].innerHTML = "两次密码输入不一致,请重新输入" ; item_[2].style.color = "red" ; } else { item_[2].innerHTML = '两次输入一致' ; item_[2].style.color = "green" ; input[2] = true ; } } //姓名 userName.onblur = function (){ if (!userName.value){ item_[3].innerHTML = '姓名不能为空' ; item_[3].style.color = "red" ; } else if (!reg.userName.test( this .value)){ item_[3].innerHTML = "姓名只能包含中文或者英文,且字符在3-30个之间" ; item_[3].style.color = "red" ; } else { item_[3].innerHTML = '姓名输入正确' ; item_[3].style.color = "green" ; input[3] = true ; } } //类型是否选择 if (typeSelect.value){ input[4] = true ; } //身份证号 idNum.onblur = function (){ if (!idNum.value){ item_[5].innerHTML = '身份证号码不能为空' ; item_[5].style.color = "red" ; } else if (!reg.idNum.test( this .value)){ item_[5].innerHTML = "请输入18位身份证号码" ; item_[5].style.color = "red" ; } else { item_[5].innerHTML = '号码输入正确' ; item_[5].style.color = "green" ; input[5] = true ; } } //邮箱验证 email.onblur = function (){ if (!email.value){ item_[6].innerHTML = '邮箱不能为空' ; item_[6].style.color = "red" ; } else if (!reg.email.test( this .value)){ item_[6].innerHTML = "请输入正确的邮箱" ; item_[6].style.color = "red" ; } else { item_[6].innerHTML = '邮箱格式正确' ; item_[6].style.color = "green" ; input[6] = true ; } } //手机号 phoneNum.onblur = function (){ if (!phoneNum.value){ item_[7].innerHTML = '手机号码不能为空' ; item_[7].style.color = "red" ; } else if (!reg.phoneNum.test( this .value)){ item_[7].innerHTML = "您输入的手机号码不是有效的格式" ; item_[7].style.color = "red" ; } else { item_[7].innerHTML = '手机格式正确' ; item_[7].style.color = "green" ; input[7] = true ; } } //旅客类型选择 if (passSelect.value){ input[8] = true ; } //勾选阅读条例 var checkList = check.getAttribute( 'checked' ); if (checkList){ input[9] = true ; } //下一步按钮 nextStep.onclick = function (){ console.log(input); if (input.indexOf( 'false' ) == -1){ window.location.href = 'www.imooc.com' ; } else { alert( '提交失败,请重新检查信息' ); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 | *{ margin : 0 ; border : 0 ; font-family : 'Microsoft YaHei' ; } a{ text-decoration : none ; color : #333333 ; display : inline- block ; } span{ display : inline- block ; } /*头部*/ .header{ background : #efefef ; height : 120px ; border-bottom : 2px solid rgb ( 36 , 135 , 201 ); } .header-box{ width : 1200px ; height : 120px ; position : relative ; left : 50% ; margin-left : -600px ; } /*logo区*/ .logo{ height : 120px ; } .logo-picture{ display : inline- block ; width : 100px ; height : 100px ; background : url ( '../素材/logo.png' ) center center no-repeat ; margin-top : 10px ; } .nav- left { position : absolute ; top : 50% ; margin-top : -22px ; left : 120px ; } .title{ font-size : 30px ; } .line{ font-size : 35px ; font-weight : 500 ; } .service{ color : #a9a9a9 ; position : absolute ; top : 15px ; right : -75px ; } /*右侧导航栏*/ .nav{ position : absolute ; top : 53px ; right : 0 ; float : left ; } .phone{ width : 16px ; height : 16px ; background : url ( '../素材/phone.png' ) center center no-repeat ; } .len{ margin-right : 20px ; } .mobileVersion{ margin-left : 20px ; } .nav-land,.nav-adress{ color : rgb ( 251 , 116 , 3 ); } .nav-opinion:hover,.nav-land:hover,.nav-register:hover,.nav-my:hover,.mobile:hover{ color : red ; } .dropdown-content{ display : none ; z-index : 1 ; font-size : 9px ; border : 1px solid rgb ( 251 , 116 , 3 ); position : absolute ; left : 360px ; background : #ffffff ; } .triangle{ border-top : 7px solid #333333 ; border-right : 7px solid transparent ; border-bottom : 7px solid transparent ; border-left : 7px solid transparent ; position : relative ; top : 5px ; } .dropdown-content a{ display : block ; width : 120px ; height : 25px ; line-height : 25px ; color : #a9a9a9 ; margin-top : 5px ; margin-left : 10px ; margin-right : 10px ; } . dotted { border-bottom : 1px dotted #a9a9a9 ; } .space{ width : 1px ; height : 20px ; } /*内容区*/ .content{ background : #ffffff ; } .middlebox{ width : 1200px ; height : 700px ; position : relative ; left : 50% ; margin-left : -600px ; } /*内容区第一行*/ .position{ margin : 10px 0 10px 0 ; } .word 1 { height : 25px ; line-height : 25px ; font-size : 20px ; } .word 2 { vertical-align : baseline ; color : #a9a9a9 ; } /*框和里面内容*/ .inputbox{ width : 1200px ; height : 600px ; border : 1px solid rgb ( 251 , 116 , 3 ); position : absolute ; top : 45px ; left : 50% ; margin-left : -600px ; border-radius: 5px ; } /*账户信息*/ .userInfor{ color : #ffffff ; font-size : 20px ; width : 1200px ; height : 40px ; line-height : 40px ; background : rgb ( 251 , 116 , 3 ); border-radius: 5px ; border : 1px solid rgb ( 251 , 116 , 3 ); text-indent : 20px ; position : absolute ; top : -1px ; } .sameLen{ display : inline- block ; width : 65px ; text-align : justify ; } .sameLen:after{ display : inline- block ; content : '' ; overflow : hidden ; width : 100% ; height : 0 ; } .total{ position : absolute ; top : 100px ; left : 300px ; } .frame,#typeSelect,#passSelect{ width : 200px ; border : 1px solid #a9a9a9 ; } /*密码强度三个等级颜色框*/ .safe{ width : 40px ; height : 10px ; background : #a9a9a9 ; } .safe 1 { background : red ; } .important{ color : rgb ( 251 , 116 , 3 ); } .rule{ position : relative ; left : 100px ; } .ruleName{ color : rgb ( 36 , 135 , 201 ); } #nextStep{ color : #ffffff ; font-size : 15px ; text-align : center ; width : 230px ; height : 35px ; line-height : 35px ; background : rgb ( 251 , 116 , 3 ); border-radius: 3px ; position : relative ; top : 30px ; left : 150px ; } .item{ display : inline- block ; margin-bottom : 20px ; } .item_{ margin-left : 10px ; color : rgb ( 251 , 116 , 3 ); } .nameRule{ color : rgb ( 36 , 135 , 201 ); text-decoration : underline ; } .nameExplain{ display : none ; font-size : 10px ; background : #ffffff ; border : 1px solid rgb ( 36 , 135 , 201 ); width : 498px ; height : 280px ; color : #333333 ; padding : 10px 10px 10px 10px ; position : absolute ; left : 415px ; z-index : 1 ; } .nameRule:hover+.nameExplain{ display : block ; } .nameExplain p{ line-height : 30px ; height : 30px ; } /*尾部*/ .footer{ height : 100px ; background : #dcdcdc ; border-top : 2px solid rgb ( 36 , 135 , 201 ); position : relative ; } .footertext 1 { position : absolute ; left : 50% ; top : 30px ; margin-left : -50px ; } .footertext 2 { position : absolute ; left : 50% ; top : 60px ; margin-left : -237px ; } .footertext 1 a,.footertext 1 span,.footertext 2 { color : #a9a9a9 ; font-size : 15px ; text-align : center ; } |
1导航栏销售及图片引如图片错误,怎么设置显示?
2密码不能正确显示强度
3信息正确后点击下一步不能正确跳转
4表单文字两端对齐实现了,但是往上偏了一行是怎么回事?
0
收起
正在回答
3回答
同学你好,
1、意思是这两张图片不能正确显示吗?
建议将文件夹关系截图粘贴上来,老师看一下,是不是引入路径的问题。
2、密码的问题:
html结构:
提示信息不要包裹着小短线,否则使用innerHTML替换内容的时候,小短线就没有了。
正则:
提示信息和样式设置:
3、按钮外层用了a标签包裹,点击有默认跳转功能,而href属性没有值,就会刷新页面。可以阻止一下:
跳转的地址也需要修改:
4、是给label标签添加了伪类的元素,去掉就好了:
效果:
自己可以再测试下,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧