先晒图
index.html
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"title>Index</link rel="stylesheet" href="css/style.css"body<!-- 头部 --> headerdiv class="header-wrap"> 左侧 --> ="header-left"> ="logo"> img src="img/logo.png"div="logo-text"span ="strong">XX高铁客户服务中心 | span>客户服务> ="header-right">意见反馈 a href="#">test@coma></>您好，请> 登录 |>注册="show-nav"> 我的XX ="img/arrow.png"="hide_nav"> ul> li ="first-li">未完成订单li>已完成订单（改/退）="line">我的保险>查勘个人信息>账户安全>常用联系人>重点旅客预约>遗失物品寻找>服务查询>投诉>建议="phone"="img/phone.png">手机版> 主体部分 ="content"p ="title">您现在的位置：>客运首页 > 注册pid="Total"="Title">账户信息="item"="important">*label for="userAccount">用 户 名 :labelinput type="text" id="userAccount" placeholder=" 用户设置成功后不可修改"="item_">6-30位字母、数字或“_”，字母开头="item" style="margin-bottom: -28px;"="userPass">登陆密码 :="password"="userPass"=" 6-20位字母、数字或符号"="top: 15px;"="first"="second"="third"="item_"="display: block;margin-top: 39px;margin-left: 161px;"="userPass_">确认密码 :="userPass_"=" 再次输入您的登录密码"="userName">姓 名 :="userName"=" 请输入姓名"="show_div"><="#" class>姓名填写规则="hide_div">1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。br 2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。 3.姓名中有繁体字无法输入时，可用简体替代。 4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写 ="idinfo">身份证号 :select name="idinfo"option value="" selected="selected">二代身份证option="">港澳通行证>台湾通行证>护照select="margin-top: 51px;"="information">证件号码 :="information"=" 请输入您的证件号码"="email">邮 箱 :="email"="请输入正确邮箱格式"="telephone">手机号码 :="tel"="telephone"=" 请输入您的手机号码">请正确填写手机号码，稍后将向该手机号码发送短信验证码="curtomer">旅客类型 :="curtomer">成人>儿童>学生>残疾军人>伤残人民警察="end"="checkBox"="choose">我已阅读并同意遵守>《中国铁路客户服务中心网站服务条款》="btn_Box"button ="handup">下一步button 底部 footer>关于我们 | 网站声明>Copyright © 2019 test.com All rights reserved | 京ICP备 xxxxxxxx号script ="js/index.js"scripthtml>
style.css
label { cursor: pointer; } a{ color:inherit; } * { margin: 0; padding: list-style: none; text-decoration: Box-sizing: border-Box; } /*头部*/ header{ width:100%; height:120px; background-color:rgb(239,239,239); border-bottom:2px solid rgb(36,135,201); } .header-wrap{1200px;0 auto; } .header-wrap span,.header-wrap img{pointer; } .header-wrap a:hover{rgb(251,116,3); } 导航左侧 .header-left{ float:left;500px; } .logo{100px; margin-right:28px; } .logo-text{300px;rgb(110,110,110); 120px; line-height: 120px; } .logo-text .strong{ font-size: 20px; font-weight: bold; color: rgb(80,80,80); } 导航右侧 .header-right{right;700px; padding-left:60px; position: relative; } .header-right img{14px; } .header-right span{30px;left; } .show-nav{pointer; relative; z-index: 5;left; } 隐藏区域 .hide_nav{ display: absolute; 154px; #fff; border: 1px solid rgb(251,3); left: font-size: 14px; top: 86px; } .show-nav:hover .hide_nav{ block; } .hide_nav ul{ 100%; 0 10px; } .hide_nav ul li{ 37px; .hide_nav ul li:hover{ .line{1px dotted rgb(110,110); } .phone{ margin-left:20px; } 图标和文字垂直居中对齐 .phone img,.phone a{ vertical-align:middle; } 主体 .content{ background: white;0 auto; 1115px; } .title{ margin-top:20px;5px; } .title span{ .title span.strong{ #Total { Box-shadow: 2px 2px 10px 1px rgba(0,0.2); width: 1200px; min-height: 800px; margin: 30px auto; border-radius: 10px; overflow: hidden; border-left: 0.5px solid rgba(0,0.32); border-right: border-bottom: #Total #Title { background: rgb(251,1)"> height: 50px; line-height: padding-left: 18px; margin-bottom: 60px; } #Total .item,#Total .item_ { 90%; 10px auto; 16px; position: relative; } #Total .item.item,#Total .item_.item { margin-top: 25px; } #Total .item .important,#Total .item_ .important { margin-left: 62px; } #Total .item input,#Total .item_ input { 300px; 30px; top: 32%; left: 15%; -20px; 15px; outline: border: 1px solid rgba(0,1)"> transition: Box-shadow .5s; } #Total .item input:focus,#Total .item_ input:focus { 1px 1px 10px #6385d1,1px 1px 10px #6385d1; } #Total .item.item_,#Total .item_.item_ { font-size: lighter; display: inline-block; 473px; } #Total .item_.item_{ -21px; } .item_ a{ text-decoration: underline; } select{ 297px; 34px; rgb(110,1)"> #first{ z-index:50px;10px; background-color: red; 320px; } #second{ #ccc; } #third{ #Total #end { text-align: center; 160px; border-top: 100%; } #Total #end #choose { margin-right: 6px; } .btn_Box{20px; } #Total #end #handup { 197px; 3px; cursor: pointer; } #Total #end #handup:hover{ rgb(36,1)"> #end a{rgb(36,201); } 隐藏的姓名规则 .hide_div{ 531px; 13px; 558px; 1px solid rgb(36,201); padding: 35px; 21px; none; } #show_div:hover+.hide_div{ block; } 底部 footer{ 113px; #eee; 40px;//获取元素 var userAccount=document.getElementById('userAccount'); var userPass=document.getElementById('userPass'var userPass_=document.getElementById('userPass_'var userName=document.getElementById('userName'var information=document.getElementById('information'var email=document.getElementById('email'var telephone=document.getElementById('telephone'var handup=document.getElementById('handup'var first=document.getElementById('first'var second=document.getElementById('second'var third=document.getElementById('third'var choose=document.getElementById('choose'var items=document.querySelectorAll(".item_");获取所有提示元素的下标 //当鼠标离开输入框，产生验证格式正确 true var test1=false; var test2=var test3=var test4=var test5=var test6=var test7=; 验证用户名 userAccount.onblur=function(){ var reg=/^[a-zA-Z]{1}\w{5,29}$/; if(this.value==''){ items[0].innerHTML='用户名不能为空'; items[0].style.color='red'; test1=; }else{ if(!reg.exec(userAccount.value)){ items[0].innerHTML='6-30位字母、数字或“_”，字母开头'; items[0].style.color='red'; test1=; }{ items[0].innerHTML='用户输入正确'; items[0].style.color='green'true; } } } 验证密码 userPass.onblur=默认样式 first.style.backgroundColor='red'; second.style.backgroundColor='#ccc'; third.style.backgroundColor='#ccc'匹配6-20位任意字符 var reg=/^\S{6,20}$/){ items[1].innerHTML='密码不能为空'; items[1].style.color='red'; test2=if(!reg.exec(userPass.value)){不符合要求 items[1].innerHTML='请输入6-20位数字、字母或符号'; items[1].style.color='red'; test2={ items[1].innerHTML=''; checkPwd(this.value); } } } 密码强度弱，只匹配数字、字母或符号 var pattern1=/^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,1)">密码强度中，两两组合var pattern2=/^[0-9|a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,1)">密码强度高，数字、字母或符号三种组合 var pattern3=/\W[0-9a-zA-Z]*/验证密码强弱的函数 checkPwd(value){ if(pattern1.test(value)){密码强度弱 first.style.backgroundColor='red'; second.style.backgroundColor='#ccc'; third.style.backgroundColor='#ccc'else if(pattern2.test(value)){密码强度中 first.style.backgroundColor='red'; second.style.backgroundColor='rgb(251,3)'if(pattern3.test(value)){密码强度高 first.style.backgroundColor='red'; third.style.backgroundColor='green'; } } 再次验证密码 userPass_.onblur=){ items[2].innerHTML='密码不能为空'; items[2].style.color='red'; test3=this.value!=userPass.value){ items[2].innerHTML='两次密码输入不一致'; items[2].style.color='red'; test3={ items[2].innerHTML='两次输入一致'; items[2].style.color='green'验证姓名 userName.onblur=var reg=/^[\u4e00-\u9fa5|a-zA-Z]{3,30}$/){ items[3].innerHTML='姓名不能为空'; items[3].style.color='red'; test4=; items[3].id='show_div'if(reg.exec(userName.value)){ items[3].innerHTML='姓名输入正确'; items[3].style.color='green'; test4=; items[3].id='';输入正确时不再提示信息 }{ items[3].innerHTML='姓名只能包含中文或者英文，且字符在3-30个之间！'; items[3].style.color='red'; items[3].id='show_div'验证身份证号 information.onblur=var reg=/^\d{17}[0-9x]$/i; ){ items[4].innerHTML='证件号码不能为空'; items[4].style.color='red'; test5=reg.exec(information.value)){ items[4].innerHTML='请输入18位身份证号码'; items[4].style.color='red'; test5={ items[4].innerHTML='号码输入正确'; items[4].style.color='green'验证邮箱 email.onblur=var reg=/^\w+@\w+.[a-zA-Z_]{2,4}$/){ items[5].innerHTML='邮箱不能为空'; items[5].style.color='red'; test6=reg.exec(email.value)){ items[5].innerHTML='请输入正确的邮箱'; items[5].style.color='red'; test6={ items[5].innerHTML='邮箱格式正确'; items[5].style.color='green'验证手机号 telephone.onblur=var reg=/^1(3|4|5|6|7|8|9)\d{9}$/){ items[6].innerHTML='手机号码不能为空'; items[6].style.color='red'; test7=reg.exec(telephone.value)){ items[6].innerHTML='您输入的手机号码不是有效的格式！'; items[6].style.color='red'; test7={ items[6].innerHTML='手机格式正确'; items[6].style.color='green'点击下一步 handup.onclick=if(test1&&test2&&test3&&test4&&test5&&test6&&test7&&choose.checked){ location.href="http://www.imooc.com"; }{ alert('填写有误！'); } }
再送一个简易版的
放图
index.html
>-- 账户信息 -->用户名 :_____________________________________________________________________________________________--> =" 6-20位字母,数字或符号">姓名 :=" 请输入姓名,中文且最多五位"=" 请输入身份证号">邮箱 :=" 请输入正确邮箱格式"__________________________________________________________________________________________________>我已阅读并同意遵守规定>确认提交="js/test.js" border-Box; } a { inherit; } body { rgba(0,0.1); } Box-shadow: 60%; min-height: 50px auto; border-radius: overflow: border-left: border-right: #Total #Title { #6385d1; letter-spacing: 5px; bold; } #Total .item,1)"> 25px; relative; } #Total .item.item,1)"> margin-top: 20px; } #Total .item .important,1)"> color: #6385d1; } #Total .item input,1)"> position: width: 50%; height: top: left: font-size: outline: border: border-radius: transition: Box-shadow .5s; } #Total .item input:focus,1)"> Box-shadow: #Total .item.item_,1)"> border-bottom: .5px solid #6385d1; 2px; letter-spacing: font-weight: padding-left: margin: margin-left: 5%; } #Total #end { 2px; } #Total #end #choose { margin-right: #Total #end #handup { 130px; background: 10px; }
test.js
var userAccount = document.querySelector("#userAccount"),获取用户名 userPass = document.querySelector("#userPass"),1)">获取密码 userPass_ = document.querySelector("#userPass_"),1)">获取确认密码 userName = document.querySelector("#userName"),1)">获取姓名 information = document.querySelector("#information"),1)">获取身份证号码 email = document.querySelector("#email"),1)">获取邮箱号码 telephone = document.querySelector("#telephone"),1)">获取手机号码 items = document.querySelectorAll(".item_"),1)">获取所有提示文段的下标 aCho = document.querySelector("#choose"),oBtn = document.querySelector("#handup"var test1 = false,test2 = ; userAccount.onfocus = () { items[0].innerHTML = "6-30位字母、数字或'_'"; items[0].style.color = "green"; }; userAccount.onblur = () { var reg = /^\w{6,1)">if (this.value == "") { items[0].innerHTML = "请您务必写入用户名!"; items[0].style.color = "red"; } { if (!reg.exec(userAccount.value)) { items[0].innerHTML = "6-30位字母、数字或'_'"; items[0].style.color = "red"; } { items[0].innerHTML = "格式正确"; items[0].style.color = "green"; test1 = ; } } }; -------------------------------------------------------------账号结束; userPass.onfocus = () { items[1].innerHTML = "6-20位字母,数字或符号"; items[1].style.color = "green"; }; userPass.onblur = ) { items[1].innerHTML = "请您务必写入密码!"; items[1].style.color = "red"reg.exec(userPass.value)) { items[1].innerHTML = "请输入6-20位字母,1)">; items[1].style.color = "red" { items[1].innerHTML = "格式正确"; items[1].style.color = "green"; test2 = ------------------------------------------------------------------密码结束*/ userPass_.onfocus = () { items[2].innerHTML = "请确认两次密码相同"; items[2].style.color = "green"; }; userPass_.onblur = ) { items[2].innerHTML = "请务必再次确认密码"; items[2].style.color = "red"this.value != userPass.value) { items[2].innerHTML = "两次密码不相同"; items[2].style.color = "red" { items[2].innerHTML = "格式正确"; items[2].style.color = "green"; test3 = -----------------------------------------------------------------------确认密码结束 userName.onfocus = () { items[3].innerHTML = "请输入您的中文名字"; items[3].style.color = "green"; }; userName.onblur = var reg = /^[\u4e00-\u9fa5]{2,5}$/) { items[3].innerHTML = "请务必写入您的姓名"; items[3].style.color = "red"reg.exec(userName.value)) { items[3].innerHTML = "请输入中文名并确认是正确格式"; items[3].style.color = "red" { items[3].innerHTML = "格式正确"; items[3].style.color = "green"; test4 = } } }; ---------------------------------------------------------------------------------姓名结束 information.onfocus = () { items[4].innerHTML = "请输入您的身份证号码"; items[4].style.color = "green"; }; information.onblur = var reg = /^\d{17}[0-9x]$/) { items[4].innerHTML = "请您务必写入身份证号码!"; items[4].style.color = "red"reg.exec(information.value)) { items[4].innerHTML = "请输入身份证号码正确格式"; items[4].style.color = "red" { items[4].innerHTML = "格式正确"; items[4].style.color = "green"; test5 = ------------------------------------------------------------------------身份证号码结束 email.onfocus = () { items[5].innerHTML = "请输入您邮箱的正确格式"; items[5].style.color = "green"; }; email.onblur = var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/) { items[5].innerHTML = "请您务必写入邮箱!"; items[5].style.color = "red"reg.exec(email.value)) { items[5].innerHTML = "请输入邮箱正确格式"; items[5].style.color = "red" { items[5].innerHTML = "格式正确"; items[5].style.color = "green"; test6 = ----------------------------------------------------------------------邮箱结束 telephone.onfocus = () { items[6].innerHTML = "请输入您的手机号码"; items[6].style.color = "green"; }; telephone.onblur = var reg = /^\d{11}$/) { items[6].innerHTML = "请输入11位手机号码!"; items[6].style.color = "red"reg.exec(telephone.value)) { items[6].innerHTML = "请输入11位手机号码"; items[6].style.color = "red" { items[6].innerHTML = "格式正确"; items[6].style.color = "green"; test7 = ; } } }; oBtn.onclick = if (aCho.checked == false || test1 == false || test2 == false || test3 == false || test4 == false || test5 == false || test6 == false || test7 == ) { alert(" 您 的 信 息 有 误 ") } { alert(" 登 记 成 功 ! ") } };
