姓名填写规则

姓名填写规则

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "microsoft yahei";
list-style: none;
text-decoration: none;

}

.body: {
min-width: 1200px;

}
.header{
width: 100%;
background-color:#EBEBEB;
height: 120px;
border-bottom: rgb(36,135,201) solid 2px;
}
.header__wrap{
width: 80%;
margin: 0 auto;
height: 120px;
position: relative;
}
.header__wrap a{
color: rgb(251,116,3);
}
.header__wrap-left{
width: 40%;
height: 120px;
position: relative;
}
.header__wrap-left .logo{
position: absolute;
top: 5px;
}
.header__wrap-left .mainTitle{
position: absolute;
top: 48px;
font-size: 24px;
display: inline-block;
height: 24px;
line-height: 24px;
left: 110px;
border-right: 2px black solid; 
padding-right: 3px;
}

.header__wrap-left .subTitle{
position: absolute;
font-size: 14px;
display: inline-block;
height: 20px;
top: 50px;
left: 360px;
font-weight: lighter;

}

.header__wrap-right{
width: 60%;
position: absolute;
right: 20px;
top:50px;
height: 20px;
font-size: 14px;
}
.header__wrap-right span{
text-indent: 10px;
display: inline-block;
}
.header__wrap-right .header__login {
padding-right: 5px;
border-right: 2px black solid;
margin-right: 5px;
}
.header__wrap-right .menu{
position: relative;
}
.header__wrap-right .menu ul{
display: none;
}
.header__wrap-right .menu ul li{
height: 30px;
line-height: 30px;
font-size: 11px;
color:  #808080;
margin: 0 10px;
}
.header__wrap-right .menu ul .line{
border-bottom: 1px dotted #808080;
}
.header__wrap-right .menu:hover ul{
display: block;
position: absolute;
width: 150px;
z-index: 2;
background-color: white;
border: 1px solid rgb(251,116,3);
}
.header__wrap-right .menu::after{
content: "";
width: 0;
height: 0;
position: absolute;
left: 90px;
top: 50%;
margin-top: -4px;
border-top:solid 8px black;
   border-left:solid 8px transparent;
   border-right:solid 8px transparent;
   /*text-indent: 999;*/
}
.header__wrap-right .phoneVer{
margin-left: 60px;
position: relative;
}
.header__wrap-right .phoneVer img{
width: 13px;
height: 20px;
position: absolute;
top:50%;
margin-top: -10px;
left: 2px;
}
.header__wrap-right .phoneVer span{
text-indent: 20px;
}


.main{
width: 80%;
margin: 0 auto;
}
.main .main__guide{
margin: 10px 0;
height: 20px;
display: inline-block;

}
.main .main__wrap{
border: 1px rgb(251,116,3) solid;
border-radius: 5px;
position: relative;
}
.main .main__wrap .main__wrap__title{
height: 30px;
background-color: rgb(251,116,3);
border-radius: 5px;
text-indent: 5px;
line-height: 30px;
color: white;
}

.main .main__wrap .main__wrap__form{
padding-top:100px;
padding-bottom: 100px;
padding-left: 250px;

}

.main .main__wrap .main__wrap__form .content-input .title{
    display: inline-block;
    width: 120px;
    text-align-last: justify;
    /*margin-bottom: 20px;*/
    margin-right: 10px;
    margin-left: 10px;
    line-height: 50px;
 
}
.main .main__wrap .main__wrap__form .content-input input,
.main .main__wrap .main__wrap__form .content-input select{
width: 150px;
margin-right: 10px;
margin-left: 10px;
}
.main .main__wrap .main__wrap__form .content-input{
position: relative;
}

.main .main__wrap .main__wrap__form .content-input .tips{
color: rgb(251,116,3);
}

.main .main__wrap .main__wrap__form .content-input .tips .nameRule{
text-decoration: underline;
}
.main .main__wrap .main__wrap__form .content-input .rules{
display: none;

}
.main .main__wrap .main__wrap__form .content-input .tips .nameRule:hover+.rules{
display: block;
width: 200px;
height: 400px;
}

.main .main__wrap .main__wrap__form .content-input .bar{
display: inline-block;
background-color: #ccc;
height: 10px;
width: 50px;
margin-right: 10px;
}

.main .main__wrap .main__wrap__form .content-input .red{
background-color: red;
}

.main .main__wrap .main__wrap__form .content-input .aster{
color: rgb(251,116,3);

}


.main .main__wrap .main__wrap__form .agreement{
text-indent: 165px;
}
.main .main__wrap .main__wrap__form .agreement a{
color:  #4169E1;
}

.main .main__wrap .main__wrap__form .btnBox{
margin-top: 80px;
margin-left: 258px;
/*text-align: center;*/

}
.main .main__wrap .main__wrap__form .nextBtn{
/*position: absolute;*/
width: 150px;
height: 30px;
background-color: rgb(251,116,3);
color: white;
border-radius: 5px;
top: 50%;
margin-top: -15px;
/*display: inline-block;*/

}







/*------------------------------------------------底部------------------------------*/
footer{
text-align: center;
background-color: #D3D3D3;
width: 100%;
color:#808080;
height: 80px;
margin-top: 200px;
border-top: 2px rgb(36,135,201) solid;
}
footer p{
height: 16px;
padding-top: 16px;
line-height: 16px;
}
footer .divider{
display: inline-block;
border-right: 2px solid #808080;
padding-right: 3px;
margin-right: 3px;
}

</style>

</head>
<body>
<div class="box">
<!-- 头部 -->
<header class="header">
<div class="header__wrap">
<div class="header__wrap-left">
<img class="logo" src="./pics/logo.png">
<span class="mainTitle">慕课高铁客户服务中心</span>
<span class="subTitle"> 客户服务</span>
</div>
<div class="header__wrap-right">
<span>意见反馈&nbsp;&nbsp;<a href="">imooc@com</a></span>
<span>&nbsp;&nbsp;&nbsp;&nbsp;您好 , 请&nbsp;<a class="header__login" href="">登录</a><a href="">注册</a></span>
<span class="menu">
我的IMOOC
<ul>
<li><a href=""></a>未完成订单</li>
<li class="line"><a href=""></a>已完成订单（改/退）</li>
<li class="line"><a href=""></a>我的保险</li>
<li><a href=""></a>查看个人信息</li>
<li class="line"><a href=""></a>账户安全</li>
<li class="line"><a href=""></a>常用联系人</li>
<li><a href=""></a>重点旅客预约</li>
<li class="line"><a href=""></a>遗失物品查找</li>
<li class="line"><a href=""></a>物品查询</li>
<li><a href=""></a>投诉</li>
<li><a href=""></a>建议</li>
</ul>
</span>
<span class="phoneVer"><img src="./pics/phone.png"><span>手机版</span></span>
</div>
</div>
</header>

<!-- 账户信息 -->
<div class="main">
<span class="main__guide">您现在的位置: <a href="">客运首页</a> > <a href="">注册</a></span>
<div class="main__wrap">
<div class="main__wrap__title">账户信息</div>
<form class="main__wrap__form">
                    <p class="content-input"><span class="aster">*</span><span class="title">用户名</span>:<input type="text" id="username"><span class="tips">6-30位字母、数字或'_'，字母开头</span></p>

                    <p class="content-input "><span class="aster">*</span><span class="title">登录密码</span>:<input type="text" id="loginPw"/><span class="bar red"></span><span class="bar orange"></span><span class="bar green"></span><div class="tips pwTips"></div></p>

                    <p class="content-input"><span class="aster">*</span><span class="title">确认密码</span>:<input type="text" id=pwConfirmed><span class="tips"></span></p>    

                    <p class="content-input"><span class="aster">*</span><span class="title">姓名</span>:<input type="text" id="surName"><span class="tips"> <a class="nameRule">姓名填写规则</a></span><div class="rules"><p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代</p><p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存</p><p>3.姓名中有繁体字无法输入时，可用简体替代</p><p>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</p></div></p>

                    <p class="content-input"><span class="aster">*</span><span class="title">证件类型</span>:<select id="idType"><option>二代身份证</option><option>护照</option><option>证件三</option></select></p>

                    <p class="content-input"><span class="aster">*</span><span class="title">证件号码</span>:<input type="text" id="idNum"><span class="tips"></span></p>

                    <p class="content-input"><span class="aster">*</span><span class="title">邮箱</span>:<input type="text" id="email"><span class="tips"></span></p>

                    <p class="content-input"><span class="aster">*</span><span class="title">手机号码</span>:<input type="text" id="phone"><span class="tips">请填写正确手机号码，稍后将向改手机号码发送短信验证码</span></p>

                    <p class="content-input"><span class="aster">*</span><span class="title">旅客类型</span>:<select id="passengerType"><option>成人</option><option>儿童</option></select></p>

                    <div class="agreement"><input type="checkbox" name=""> 我已阅读并同意遵守<a href="">《中国铁路客户服务中心网站服务条款》</a></div>
                    <div class="btnBox"><input class="nextBtn" type="button" value="下一步"></div>
                </form>
</div>
</div>
<!-- 页脚 -->
<footer>
<div class="footer_wrap">
<p><span class="divider">关于我们</span>网站声明</p>
<p><span class="divider">Copyright &copy; 2017 imooc.com All Rights Reserved&nbsp;</span>京ICP备 13046642号-2</p>
</div>
</footer>
</div>

<script type="text/javascript">
// 获取节点
var username=document.getElementById("username"),
loginPw=document.getElementById("loginPw"),
pwConfirmed=document.getElementById("pwConfirmed"),
surName=document.getElementById("surName"),
idType=document.getElementById("idType"),
idNum=document.getElementById("idNum"),
email=document.getElementById("email"),
phone=document.getElementById("phone"),
passengerType=document.getElementById("passengerType");
tips=document.getElementsByClassName("tips");


// 定义信息格式
var usernamePattern=/^\w{5,29}$/,
loginPwPattern=/^\S{6,20}$/,
surNamePattern=/^[\u4e00-\u9fa5]{2,15}|[a-zA-Z]{3,30}$/,

idNumPattern=/^\d{17}(\d|x|X)$/,
emailPattern=/^[a-zA-Z0-9-_]+@[0-9a-zA-Z-_\.]+[a-zA-Z0-9-_]+$/,
phonePattern=/^1[03456789][\d]{9}$/;


// 信号
var input1=false,
input2=false,
input3=false,
input4=false,
input5=false,
input6=false,
input7=false;


username.onblur=function(){
if(usernamePattern.exec(username.value)){
tips[0].innerHTML="用户名输入正确";
tips[0].style.color="green";
input1=true;
console.log(usernamePattern.exec(username.value))

}else{
tips[0].innerHTML="6-30位字母、数字或'_'，字母开头";
tips[0].style.color="red";

}

}

loginPw.onblur=function(){
if(loginPwPattern.exec(loginPw.value)){
tips[1].style.color="green";
input2=true;

}else{
tips[1].innerHTML="请输入6-20位字母、数字或符号";
tips[1].style.color="red";
tips[1].style.marginLeft="160px";

}

}

pwConfirmed.onblur=function(){
if(pwConfirmed.value==""){
tips[2].innerHTML="输入框不能为空" ;
tips[2].style.color="red";
}
else if(pwConfirmed.value==loginPw.value){
tips[2].innerHTML="两次输入一致";
tips[2].style.color="green";
input3=true;

}else{
tips[2].innerHTML="两次密码输入不一致，请重新输入";
tips[2].style.color="red";

}

}

surName.onblur=function(){
if(surNamePattern.exec(surName.value)){
tips[3].innerHTML="名字输入正确";
tips[3].style.color="green";
input4=true;

}else{
tips[3].innerHTML="姓名只能包含中文或者英文,且字符在3-30个之间";
tips[3].style.color="red";

}

}


idNum.onblur=function(){
if(idNumPattern.exec(idNum.value)){
tips[4].innerHTML="号码输入正确";
tips[4].style.color="green";
input5=true;

}else{
tips[4].innerHTML="请输入18位身份证号码";
tips[4].style.color="red";

}

}

email.onblur=function(){
if(emailPattern.exec(email.value)){
tips[5].innerHTML="邮箱格式正确";
tips[5].style.color="green";
input6=true;

}else{
tips[5].innerHTML="请输入正确的邮箱";
tips[5].style.color="red";

}

}


phone.onblur=function(){
if(phonePattern.exec(phone.value)){
tips[6].innerHTML="手机格式正确";
tips[6].style.color="green";
input7=true;

}else{
tips[6].innerHTML="您输入的手机号码不是有效的格式！";
tips[6].style.color="red";

}

}








</script>
</body>
</html>

姓名填写规则不知道为什么隐藏不了，用display:none,再用伪类不知道为什么不生效...
saltymelon 2019-08-01
源自：项目：JS表单验证案例   3-10 作业题
5
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕嘟嘟 2019-08-01 15:45:58

同学你好，display：none不生效的原因是没有找到.rules哦。

打开检查工具，发现 .rules只是.main_wrp_form的子类，所以通过.main_wrp_form .rules 就可以直接找到姓名填写规则啦。

http://img1.sycdn.imooc.com//climg/5d42988a0001ee0410980326.jpg

http://img1.sycdn.imooc.com//climg/5d4298a0000105c808680170.jpg

如果还有疑惑,可以在问答区再次提问,我们会继续为你解答的.

如果我的回答帮助了你欢迎采纳,祝学习愉快~


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于作业姓名填写规则的问题
7 0 1
为什么‘姓名填写规则’不会变化
18 0 1
为什么不直接用中文起名字呢
4 1 3
spring-jdbc如何使用以及定义驼峰命名规则的？
27 0 5
老师，为什么鼠标放在姓名填写规则上，不出现隐藏的部分？？
0 0 1

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师