为什么‘姓名填写规则’不会变化
HTML:
<!DOCTYPE html>
<html>
<head>
<title>慕课高铁服务中心</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="header">
<div class="banner">
<div class="logo"><p>慕课高铁客户服务中心 | <span>客户服务</span></p></div>
<div class="text">意见反馈 <span>imooc@com</span> 您好，请 <span>登录</span> | <span>注册</span>
<span class="myImooc">我的IMOOC ▼
<ul class="list">
<li><a href="javascript:;">未完成订单</a></li>
<li><a href="javascript:;">已完成订单（改/退）</a></li>
<li class="li"></li>
<li><a href="javascript:;">我的保险</a></li>
<li class="li"></li>
<li><a href="javascript:;">查看个人信息</a></li>
<li><a href="javascript:;">账户安全</a></li>
<li class="li"></li>
<li><a href="javascript:;">常用联系人</a></li>
<li class="li"></li>
<li><a href="javascript:;">重点旅客预约</a></li>
<li><a href="javascript:;">遗失物品查找</a></li>
<li class="li"></li>
<li><a href="javascript:;">服务查询</a></li>
<li class="li"></li>
<li><a href="javascript:;">投诉</a></li>
<li><a href="javascript:;">建议</a></li>
</ul>
</span>
</div>
<div class="phone"><img src="素材/未标题-1.png"><p>手机版</p></div>
</div><!-- 内容显示部分 -->
</div><!-- header -->
<div class="main">
<div class="section"><!-- 表格输入部分 -->
<div class="section_text">您现在的位置：<span>客运首页 > 注册</span></div>
<div class="table">
<div class="section_table-title">账户信息</div>
<div class="section_table-text">
<div><!-- 用户名板块 -->
<span style="color:red">* </span>
<span>用 户 名：</span>
<input type="text" placeholder="用户名设置成功后不可修改" id="num">
<span class="section_span" id="numoutput"> <!-- 6-30位字母、数字或"_"，字母开头 --></span>
</div>
<div><!-- 登录密码 -->
<span style='color:red'>* </span>
<span>登录密码</span>：
<input type="password" placeholder="6-20位字母、数字或符号" id="password">
<span id="one"></span> <span id="two"></span> <span id="three"></span>
<p id="passwordoutput"></p>
</div>
<div><!-- 确认密码 -->
<span style='color:red'>* </span>
<span>确认密码</span>：
<input type="password" placeholder="再次输入您的登录密码" id="password_">
<span class="section_span" id="password_output"></span>
</div>
<div><!-- 姓名 -->
<span style='color:red'>* </span>
<span>姓名</span>：
<input type="text" placeholder="请输入姓名" id="name">
<!-- <span class="section_span"> -->
<span class="section_span nameRule" id="nameoutput">姓名填写规则</span>
<span class="rule" id="rule">
1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br/>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br/>3.姓名中有繁体字无法输入时，可用简体替代。<br/>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写。
</span>
<!-- </span> -->
</div>
<div><!-- 证件类型 -->
<span style='color:red'>* </span>
<span>证件类型</span>：
<select class="id_type">
<option value="二代身份证" selected>二代身份证</option>
<option value="港澳通行证">港澳通行证</option>
<option value="台湾通行证">台湾通行证</option>
<option value="护照">护照</option>
</select>
<span class="section_span"></span>
</div>
<div><!-- 证件号码 -->
<span style='color:red'>* </span>
<span>证件号码</span>：
<input type="text" placeholder="请输入您的证件号码" id="idnum">
<span class="section_span" id="idnumoutput"></span>
</div>
<div><!-- 邮箱 -->
<span></span>
<span>邮箱</span>：
<input type="text" placeholder="请正确填写邮箱地址" id="email">
<span class="section_span" id="emailoutput"></span>
</div>
<div><!-- 手机号码 -->
<span style='color:red'>* </span>
<span>手机号码</span>：
<input type="text" placeholder="请输入您的手机号码" id="telnum">
<span class="section_span" id="telnumoutput"><!-- 请正确填写手机号码，稍后将向该号码发送短信验证码 -->
</span>
</div>
<div><!-- 旅客类型 -->
<span style='color:red'>* </span>
<span>旅客类型</span>：
<select class="travellerType">
<option value="成人" selected>成人</option>
<option value="儿童">儿童</option>
<option value="学生">学生</option>
<option value="残疾军人">残疾军人</option>
<option value="伤残人民警察">伤残人民警察</option>
</select>
<!-- <span class="section_span"></span> -->
</div>
<div><!-- 我已阅读 -->
<input type="checkbox" id="choose"> 我已阅读并同意遵守规定<a href="javascript:;">《中国铁路客户服务中心网站条款》</a>
<button id="handup">下一步</button>
</div>
</div>
</div>
</div>
</div><!-- 中间主体 -->
<div class="footer">
<p>关于我们 | 网站声明</p>
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</div><!-- footer -->
<script type="text/javascript" src="js.js"></script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
a{
text-decoration:none;
list-style: none;
}
/*header部分*/
.header{
width: 100%;
height: 110px;
background-color: #eee;
border-bottom: 2px solid rgb(36,135,201);
}
.banner{
margin: 0 auto;
width: 1200px;
height: auto;
overflow: hidden;
}
.logo{
width: 120px;
height: 110px;
float: left;
background: url('素材/logo.png') no-repeat center center;
cursor: pointer;
/*margin-left: 120px;*/
}
.logo p{
height: 110px;
width: 300px;
margin-left: 120px;
font-size: 18px;
font-weight: bold;
margin-top: 43px;
}
.logo p span{
font-size: 15px;
color: gray;
font-weight: normal;
}
.text{
float: left;
margin-left: 380px;
margin-top: 43px;
}
.text .myImooc,
.text span:nth-child(1),
.text span:nth-child(2),
.text span:nth-child(3){
cursor: pointer;
color: #000;
}
.text .myImooc:hover,
.text span:nth-child(1):hover,
.text span:nth-child(2):hover,
.text span:nth-child(3):hover,
.phone:hover{
color: rgb(251,116,3);
}
.list{
width: 172px;
border: 1px solid rgb(251,116,3);
background: #ffffff;
position: absolute;
top: 76px;
right: 520px;
display:none;
z-index: 3;
font-size: 14px;
list-style: none;
}
.list > li > a{
color: gray;
padding-left: 15px;
}
.list > li > a:hover{
color: red;
cursor: pointer;
}
/* 虚线 */
.list > .li{
border: 0.5px dashed #999;
margin: 4px 10px;
width: 146px;
height: 1px;
text-align: center;
}
/* 每个选项 */
.list > li{
line-height: 25px;
margin: 0px 10px;
}
.myImooc:hover > .list {
display: block;
}
.text span{
color: rgb(251,116,3);
}
.phone{
float: left;
margin-left: 900px;
margin-top: -19px;
cursor: pointer;
color: #000;
}
.phone img{
width: 12px;
height: 20px;
}
.phone p{
margin-top: -25px;
margin-left: 17px;
}
/*中间表格部分*/
.section{
margin: 0 auto;
width: 1200px;
height: auto;
overflow: hidden;
}
.section_text{
margin: 8px 0;
}
.section_text span{
color: gray;
}/*您现在的位置部分*/
.section_table-title{
background-color: rgb(251,116,3);
border-radius: 8px;
color: #fff;
line-height: 35px;
height: 35px;
text-indent: 1em;
}/*账户信息部分*/
.table{
border:1px solid rgb(251,116,3);
border-radius: 10px;
}
.section_table-text div span:nth-child(4){
color: rgb(251,116,3);
}
/*#nameoutput{
width: 250px;
height: 16px;
padding-left: 17px;
padding-top: 11px;
position: absolute;
left: 978px;
top: 358px;
}*/
.nameRule{
text-decoration-line: underline;
}
.rule{
width: 500px;
height: 300px;
background: #fff;
position: absolute;
top: 385px;
right: 400px;
border: 1px solid #006ee1;
z-index: 3;
font-size: 12px;
text-align:left;
line-height: 40px;
padding-left: 12px;
color: gray;
display: none;
}
.nameRule:hover{
cursor: pointer;
}
.nameRule:hover > .rule{
display: block;
}
.section_table-text p:nth-child(1) span:nth-child(4){
width: auto;
height: 9px;
}
#one{
background-color:red;
display: inline-block;
width:40px;
height:6px;
margin-bottom:3px;
}
#two{
background-color:#eee;
display: inline-block;
width:40px;
height:6px;
margin-bottom:3px;
}
#three{
background-color:#eee;
display: inline-block;
width:40px;
height:6px;
margin-bottom:3px;
}
#passwordoutput{
width: 250px;
height: 16px;
padding-left: 116px;
padding-top: 11px;
display: none;
}
/*后缀部分*/
.section_table-text div span:nth-child(2){
display: inline-block;
width: 80px;
text-align-last: justify;
}
.section_table-text div{
width: 750px;
margin: 20px auto;
}/*用户名等字体*/
.section_table-text div:nth-child(1){
padding-top: 35px;
}/*修改用户名的对齐*/
.section_table-text div:nth-child(7){
padding-left: 33px;
}/*修改邮箱的对齐*/
.section_table-text input:nth-child(3){
width: 175px;
}/*设置每个输入格的宽度*/
.section_table-text div:nth-child(1) input{
margin-left: 15px;
}/*修改用户名输入的对齐*/
.section_table-text div:last-child{
margin-left:370px
}
.section_table-text button{
display: block;
margin-left: 40px;
width: 200px;
height: 35px;
border-radius: 8px;
background-color: rgb(251,116,3);
color: #fff;
margin-top: 50px;
margin-bottom: 60px;
font-size: 18px;
border:none;
}
.section_table-text button:hover{
cursor: pointer;
background-color: rgb(251,16,0);
}
/*协议和按钮*/
.id_type{
width: 179px;
}
.travellerType{
width: 179px;
}
/*页脚部分*/
.footer{
margin-top: 40px;
width: 100%;
height: 97px;
background-color: #eee;
border-top: 2px solid rgb(36,135,201);
}
.footer p{
text-align: center;
color: gray;
}
.footer p:nth-child(1){
margin-top: 30px;
}
.footer p:nth-child(2){
margin-top: 10px;
}
JS:
// alert(1)
var num = document.getElementById('num'),
password = document.getElementById('password'),
password_ = document.getElementById('password_'),
name = document.getElementById('name'),
idnum = document.getElementById('idnum'),
email = document.getElementById('email'),
telnum = document.getElementById('telnum'),
one = document.getElementById('one'),
two = document.getElementById('two'),
three = document.getElementById('three')
handup = document.getElementById('handup');
var numoutput = document.getElementById('numoutput'),
passwordoutput = document.getElementById('passwordoutput'),
password_output = document.getElementById('password_output'),
nameoutput = document.getElementById('nameoutput'),
idnumoutput = document.getElementById('idnumoutput'),
emailoutput = document.getElementById('emailoutput'),
telnumoutput = document.getElementById('telnumoutput'),
rule = document.getElementById('rule');
var yhm = false,
mm = false,
qrmm = false,
xm = false,
sfz = false,
yx = false,
dh = false;
num.onfocus = function(){
numoutput.innerHTML = "6-30位字母、数字或'_'，字母开头";
numoutput.style.color = "red";
}
num.onblur = function(){
var numreg = /^[a-zA-Z][a-zA-Z0-9_]{5,29}$/;
if(this.value==""){
numoutput.innerHTML = "用户名称不能为空";
numoutput.style.color = "red";
}else{
if(!numreg.exec(num.value)){
numoutput.innerHTML = "6-30位字母、数字或'_'，字母开头";
numoutput.style.color = "red";
}else{
numoutput.innerHTML = "用户名输入正确";
numoutput.style.color = "green";
yhm = true;
}
}
}
password.onfocus = function(){
passwordoutput.innerHTML = "请输入6-20位字母、数字或符号";
passwordoutput.style.color = "red";
passwordoutput.style.display = "blcok";
}
password.onblur = function(){
if(this.value==""){
passwordoutput.style.display = "block";
passwordoutput.innerHTML = "密码不能为空";
passwordoutput.style.color = "red";
}else{
// var passwordreg = /^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/;
if(/^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/.exec(password.value)){
passwordoutput.style.display = "none";
mm = true;
}else if(/^[1-9|a-z]{6,20}$|^[\W|a-z]{6,20}$|^[\W|1-9]{6,20}$/.exec(password.value)){
passwordoutput.style.display = "none";
two.style.backgroundColor = 'yellow';
mm = true;
}else if(/\W[0-9a-zA-Z]*/.exec(password.value)){
passwordoutput.style.display = "none";
two.style.backgroundColor = 'yellow';
three.style.backgroundColor = 'green';
mm = true;
}
}
}
password_.onfocus = function(){
password_output.innerHTML = "6-30位字母、数字或'_'，字母开头";
password_output.style.color = "red";
}
password_.onblur = function(){
// var numreg = /^[a-zA-Z][a-zA-Z0-9_]{5,29}$/;
if(this.value==""){
password_output.innerHTML = "输入框不能为空";
password_output.style.color = "red";
}else{
if(password_.value != password.value){
password_output.innerHTML = "两次密码输入不一致，请重新输入";
password_output.style.color = "red";
}else{
password_output.innerHTML = "两次输入一致";
password_output.style.color = "green";
qrmm = true;
}
}
}
name.onfocus = function(){
nameoutput.innerHTML = "姓名只能包含中文或者英文,且中文字符在2-15之间，英文字符在3-30个之间";
nameoutput.style.color = "red";
nameoutput.style.textDecoration="none";
}
name.onblur = function(){
var namereg = /^[\u4e00-\u9fa5]{2,5}$|^[a-zA-Z]{3,30}$/;
if(this.value==""){
nameoutput.innerHTML = "姓名不能为空";
nameoutput.style.color = "red";
nameoutput.style.textDecoration="none";
}else{
if(!namereg.exec(name.value)){
nameoutput.innerHTML = "姓名只能包含中文或者英文,且字符在3-30个之间！";
nameoutput.style.color = "red";
nameoutput.style.textDecoration="none";
}else{
nameoutput.innerHTML = "姓名输入正确";
nameoutput.style.color = "green";
nameoutput.style.textDecoration="none";
xm = true;
}
}
}
nameoutput.onmouseover = function(){
rule.style.display = 'block';
}
nameoutput.onmouseout = function(){
rule.style.display = 'none';
}
idnum.onfocus = function(){
idnumoutput.innerHTML = "请输入18位身份证号码";
idnumoutput.style.color = "red";
}
idnum.onblur = function(){
var idnumreg = /^\d{17}[0-9Xx]$/;
if(this.value==""){
idnumoutput.innerHTML = "请输入18位身份证号码";
idnumoutput.style.color = "red";
}else{
if(!idnumreg.exec(idnum.value)){
idnumoutput.innerHTML = "请输入18位身份证号码";
idnumoutput.style.color = "red";
}else{
idnumoutput.innerHTML = "号码输入正确";
idnumoutput.style.color = "green";
sfz = true;
}
}
}
email.onfocus = function(){
emailoutput.innerHTML = "请输入邮箱地址";
emailoutput.style.color = "red";
}
email.onblur = function(){
var emailreg = /^\w+@\w+\.[a-zA-Z_]{2,}$/;
if(this.value==""){
emailoutput.innerHTML = "请输入正确的邮箱";
emailoutput.style.color = "red";
}else{
if(!emailreg.exec(email.value)){
emailoutput.innerHTML = "请输入正确的邮箱";
emailoutput.style.color = "red";
}else{
emailoutput.innerHTML = "邮箱格式正确";
emailoutput.style.color = "green";
yx = true;
}
}
}
telnum.onfocus = function(){
telnumoutput.innerHTML = "请输入手机号码";
telnumoutput.style.color = "red";
}
telnum.onblur = function(){
var telnumreg = /^[1][^12]\d{9}$/;
if(this.value==""){
telnumoutput.innerHTML = "手机号码不能为空！";
telnumoutput.style.color = "red";
}else{
if(!telnumreg.exec(telnum.value)){
telnumoutput.innerHTML = "您输入的手机号码不是有效的格式！";
telnumoutput.style.color = "red";
}else{
telnumoutput.innerHTML = "手机格式正确";
telnumoutput.style.color = "green";
dh = true;
}
}
}
handup.onclick = function(){
if (yhm && mm && qrmm && xm && sfz && yx && dh ) {
alert("提交成功");
handup.href = "http://www.imooc.com";
}else{
alert("您填写的信息有误");
}
}
提问：姓名输入板块后面的‘姓名填写规则’几个字为什么不会随着JS的变化而变化
正在回答
同学你好，这是因为变量name的问题，name本身是window的属性，不能作为变量名。建议把name修改为其他的就可以了：
（后面使用到name的地方都改一下，这里就不一一截图了）
另外，当文字改变之后，鼠标移入时，文本框还是会显示。
所以建议姓名规则不要直接放在nameoutput中，需要再添加一个新的span标签。当验证信息显示时，把姓名规则span直接隐藏更好。可以先尝试改一改，如果有不会的，可以在问答区提问，老师会针对你的代码为你辅导。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星