为什么我为账户信息中的姓名设置的姓名验证无效

为什么我为账户信息中的姓名设置的姓名验证无效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css" href="css.css">
<body>
 <div class="head">
  <div class="head_content">
  <div class="head_logo"></div>
  <div class="head_title">慕课高铁客户服务中心|<span>客户服务</span></div>
  <div class="head_nav">
   <ul>
    <li>意见反馈<a href="#">@imooc.com</a></li>
    <li>您好，请<a href="#">登录</a>|注册</li>
    <li id="nav">我的IMOOC<span class="triangle"></span>
    </li>
    <li>手机版</li>
   </ul>
   <div class="head_nav_form" id="head_nav_form">
       <div class="head-nav-form1"><a href="#">未完成订单</a></div>
     <div class="head-nav-form1"><a href="#">已完成订单(退/改)</a></div>
     <div class="head-nav-form1"><a href="#">我的保险</a></div>
     <div class="head-nav-form1"><a href="#">查看个人信息</a></div>
     <div class="head-nav-form1"><a href="#">账户安全</a></div>
     <div class="head-nav-form1"><a href="#">常用联系人</a></div>
     <div class="head-nav-form1"><a href="#">重点旅客预约</a></div>
     <div class="head-nav-form1"><a href="#">遗失物品查找</a></div>
     <div class="head-nav-form1"><a href="#">服务查询</a></div>
     <div class="head-nav-form1"><a href="#">投诉</a></div>
     <div class="head-nav-form1"><a href="#">建议</a></div>
   </div>
  </div>
  </div>
 </div>
 <div class="body">
  <div class="body_position">您现在的位置:<span>客运首页>注册</span></div>
  <div class="body_form">
   <div class="body_form_title">账户信息</div>
   <div class="body_form_info">
    <div class="body_form_info_question"><span>*</span><span>用户名</span>:<input type="text" placeholder="用户名设置成功后不可修改" id="userName"/><span class="tip">6-30位字母，数字或‘_’，字母开头</span></div>
    <div class="body_form_info_question"><span>*</span><span>登录密码</span>:<input type="text" placeholder="6-20位字母，数字或符号" id="psw"/><span class="tip" id="borderColor"><span class="spanColor"></span><span class="spanColor"></span><span class="spanColor"></span></span></br><span id="mention"></span></div>
    <div class="body_form_info_question"><span>*</span><span>确认密码</span>:<input type="text" placeholder="再次输入您的登录密码" id="repsw"/><span class="tip"></span></div>
    <div class="body_form_info_question"><span>*</span><span>姓名</span>:<input type="text" placeholder="请输入姓名" id="name"/><span class="tip"><a href="#" id="nameRuleTitle">姓名填写规则</a></span></div>
    <div class="body_form_info_question"><span>*</span><span>证件类型</span>:<select><option>二代身份证</option><option>港澳通行证</option><option>国外护照</option></select><span class="tip"></span></div>
    <div class="body_form_info_question"><span>*</span><span>证件号码</span>:<input type="text" placeholder="请输入您的证件号" id="identify"/><span class="tip"></span></div>
    <div class="body_form_info_question"><span>*</span><span>邮箱</span>:<input type="text" placeholder="请输入您的邮箱地址" id="email"/><span class="tip"></span></div>
    <div class="body_form_info_question"><span>*</span><span>手机号码</span>:<input type="text" placeholder="请输入您的手机号码" id="tele"/><span class="tip">请正确填写手机号码，稍后将手机号码发送短信验证码</span></div>
    <div class="body_form_info_question"><span>*</span><span>旅客类型</span>:<select><option>成人</option><option>儿童</option></select><span class="tip"></span></div>
    <div class="body_form_info_question"><input type="checkbox" id="check"/>我已阅读并同意遵守<a href="#" id="item">《中国铁路客户服务中心网站服务条款》</a></div>
   </div>
   <div class="nameRule" id="nameRule">
   1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</br>
   2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改</br>后保存。</br>
   3.姓名中有繁体字无法输入时，可用简体替代。</br>
   4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一</br>个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输</br>入时不区别大小写</div>
   <input type="button" value="下一步" id="btn"/>
  </div>
 </div>
 <div class="footer">
  <div class="footer_content">
  <div class="footer_nav"><a href="#">关于我们 |</a><a href="#"> 网站声明</a></div>
  <p>Copyright  2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
  </div>
 </div>
 <script type="text/javascript" src="js.js">
 
 </script>

</body>
</html>


css.css

@CHARSET "UTF-8";
*{
 margin:0;
 padding:0;
}
a{
 text-decoration:none;
}
.head{
 background-color:#efefef;
 width:1919px;
 height:124px;
 border-bottom:2px solid #2487c9;
}
.head_content{
 width:1261px;
 margin:0 auto;
 position:relative;
}
.head_logo{
 background:url(img/logo.png) no-repeat center center;
 width:116px;
 height:124px;
 float:left;
}
.head_title{
 font-size:30px;
 font-weight:bold;
 float:left;
 line-height:124px;
 text-align:center;
}
.head_title span{
 font-size:18px;
 font-weight:normal;
 
}
.head_nav{
 
}
.head_nav ul{
 float:right;
 width:700px;
}
.head_nav ul li{
 float:left;
 list-style:none;
 font-size:20px;
 text-align:center;
 line-height:124px;
 padding:5px;
}
.head_nav ul li span{
 display:inline-block;
 width:0;
 height:0;
 border-top:10px solid black;
 border-left:10px solid transparent;
 border-right:10px solid transparent;
 border-bottom:10px solid transparent;
 position:absolute;
 top:63px;
 left:1030px;
}
.head_nav ul li:last-of-type{
 background:url(img/phone.png) no-repeat left center;
    background-size:20%;
    text-indent:12px;
    margin-left:30px;
}
.head_nav ul li>a{
 color:rgb(251,116,3);
}
.head_nav_form{
 position:absolute;
 top:82px;
 left:960px;
 border:1px solid rgb(251,116,3);
 width:135px;
 padding:15px;
 background-color:white;
 display:none;
}
.head_nav_form div{
 padding:2px;
}
.head_nav_form a{
 color:gray;
}
.head-nav-form1 a:hover{
 border-bottom:1px solid gray;
}
.body{
 width:1200px;
 margin:10px auto;
 
}
.body_position{
 text-align:left;
 font-size:20px;
 font-weight:bold;
 
 
}
.body_position span{
 font-weight:normal;
 color:gray;
}
.body_form{
 border:2px solid rgb(251,116,3);
 border-radius:5px;
}
.body_form_title{
 background-color:rgb(251,116,3);
 font-size:18px;
 color:white;
 border:1px solid rgb(251,116,3);
 border-radius:5px;
}
.body_form_info{
 padding:38px 227px;
}
.body_form_info_question{
 margin-top:16px;
}
.body_form_info_question input,.body_form_info_question select{
 margin-left:8px;
}
.body_form_info_question span:nth-of-type(2){
 display:inline-block;
 text-align-last:justify;
 width:68px;
 font-weight:bold;
}
.body_form_info_question span:nth-of-type(3){
 color:rgb(251,116,3);
 display:inline-block;
 text-indent:5px;
 font-weight:bold;
}
.body_form_info_question span:nth-of-type(3) a{
 color:rgb(251,116,3);
 text-decoration:underline;
}
.body_form_info_question input,.body_form_info_question select{
 display:inline-block;
 width:210px;
 height:21px;
 border:1px solid gray;
 text-indent:4px;
}
.body_form_info_question #borderColor{
 margin-left:6px;
}
.body_form_info_question #borderColor span.spanColor{
 display:inline_block;
 width:50px;
 height:10px;
 border:1px solid #C0C0C0;
 background-color:#C0C0C0;
 margin:0px 1px;
 float:left;
}
.body_form_info_question #check{
 background-color:#dedede;
 width:15px;
 height:15px;
 margin-left:64px;
}
#item{
 color:rgb(36,135,201);
}
.body_form_info div:last-of-type{
 font-weight:bold;
}
#btn{
 display:inline-block;
 width:231px;
 height:37px;
 background-color:rgb(251,116,3);
 color:white;
 font-size:18px;
 margin-top:20px;
 margin-bottom:81px;
 margin-left:413px;
}
.nameRule{
 border:2px solid rgb(36,135,201);
 width:630px;
 height:250px;
 padding:10px 10px;
 line-height:30px;
 background-color:white;
 position:absolute;
 top:373px;
 left:953px;
 display:none;
}
.footer{
 background-color:#efefef;
 width:1919px;
 height:124px;
 border-top:2px solid #2487c9;
 font-size:18px;
 color:gray;
}
.footer .footer_content{
 width:620px;
 margin:40px auto;
}
.footer .footer_content .footer_nav,.footer .footer_content p{
 text-align:center;
}

js.js

//获取元素
function getId(id){
 return document.getElementById(id);
}

var btn=getId("btn"),
nav=getId("nav"),
head_nav_form=getId("head_nav_form"),
userName=getId("userName"),
psw=getId("psw"),
repsw=getId("repsw"),
name=getId("name"),
identify=getId("identify"),
email=getId("email"),
tele=getId("tele"),
nameRule=getId("nameRule"),
nameRuleTitle=getId("nameRuleTitle"),
tip=document.getElementsByClassName("tip"),
spanColor=document.getElementsByClassName("spanColor"),
mention=getId("mention"),
nameRuleTitle=getId("nameRuleTitle");

//正则验证

var usernameCheck=false;
var pswCheck=false;
var repswCheck=false;
var nameCheck=false;
var identifyCheck=false;
var emailCheck=false;
var teleCheck=false;

//我的IMOOC中的二级菜单
nav.onmouseover=function(){
 head_nav_form.style.display="block";
}
head_nav_form.onmouseover=function(){
 head_nav_form.style.display="block";
}
head_nav_form.onmouseout=function(){
 head_nav_form.style.display="none";
}
nav.onmouseout=function(){
 head_nav_form.style.display="none";
}

//姓名规则
nameRuleTitle.onmouseover=function(){
 nameRule.style.display="block";
}
nameRuleTitle.onmouseout=function(){
 nameRule.style.display="none";
}

//账户信息,正则
//用户名
userName.onblur=function(){
 var pattern1=/[a-zA-Z][\w_]{5,29}/;
 if(pattern1.exec(this.value)){
  tip[0].style.color="green";
  tip[0].innerHTML="用户名输入正确";
  usernameCheck=true;
 }
 else{
  tip[0].style.color="red";
  tip[0].innerHTML="6-30位字母，数字或‘-’，字母开头";
 }
}
//数量判断
function count(content){
 pattern=/^[0-9|a-z|A-Z|\W]{6,20}$/;
 patterni=/^[0-9|a-z|A-Z|\W]{0,5}$/
 if(pattern.exec(content)){
  mention.innerHTML="";
  mention.style.display="none";
  pswCheck=true;
 }
 else if(patterni.exec(content)){
  mention.style.display="block";
  mention.innerHTML="请输入6-20位字母，数字或符号";
  mention.style.color="red";
  mention.style.fontWeight="bold";
  mention.style.marginLeft="80px";
 }
}
//登陆密码
psw.oninput=function(){
 var pattern1=/^\S{1,20}$/;
 if(!pattern1.exec(this.value)){
  mention.innerHTML="请输入6-20位字母，数字或符号";
  mention.style.color="red";
  mention.style.fontWeight="bold";
  mention.style.marginLeft="80px";
 }
 else{
  if(/^\d{1,20}$/.exec(this.value)||/^[a-zA-Z]{1,20}$/.exec(this.value)||/^\W{1,20}$/.exec(this.value)){
    count(this.value);
    spanColor[0].style.backgroundColor="red";
    spanColor[0].style.border="1px solid red";
  }
  else if(/^[0-9|a-zA-Z]{2,20}$/.exec(this.value)||/^[a-zA-Z|\W]{2,20}$/.exec(this.value)||/^[0-9|\W]{2,20}$/.exec(this.value)){
    count(this.value);
    spanColor[0].style.backgroundColor="red";
    spanColor[0].style.border="1px solid red";
    spanColor[1].style.backgroundColor="orange";
    spanColor[1].style.border="1px solid orange";
   }
  else if(/^[\W|a-zA-Z0-9]{3,20}$/.exec(this.value)){
    count(this.value);
    spanColor[0].style.backgroundColor="red";
    spanColor[0].style.border="1px solid red";
    spanColor[1].style.backgroundColor="orange";
    spanColor[1].style.border="1px solid orange";
    spanColor[2].style.backgroundColor="green";
    spanColor[2].style.border="1px solid green";
    
   }
 
 }
}
 
//确认密码
repsw.onblur=function(){
 var pattern11=/^\S{1,20}$/;
 if(!pattern11.exec(this.value)){
  tip[2].style.color="red";
  tip[2].innerHTML="密码不能为空";
 }
 else{
  if(this.value===psw.value){
   tip[2].style.color="green";
   tip[2].innerHTML="再次输入一致";
   repswCheck=true;
   }
 }
}

//姓名验证
name.onblur=function(){
 alert("1");
}

//身份证验证
identify.onblur=function(){
 var pattern21=/^[0-9]{17}[0-9|x]{1}$/;
 if(pattern21.exec(this.value)){
  tip[5].style.color="green";
  tip[5].innerHTML="号码输入正确";
  identifyCheck=true;
 }
 else{
  tip[5].style.color="red";
  tip[5].innerHTML="请输入18位身份证号码";
 }
}
//邮箱验证
email.onblur=function(){
 var pattern31=/^[a-zA-Z|0-9]{1,18}@[a-zA-Z]{1,10}\.com$/;
 if(pattern31.exec(this.value)){
  tip[6].style.color="green";
  tip[6].innerHTML="邮箱格式正确";
  emailCheck=true;
 }
 else{
  tip[6].style.color="red";
  tip[6].innerHTML="邮箱不能为空";
 }
}
tele.onblur=function(){
 var pattern41=/^[0-9]{11}$/;
 if(pattern41.exec(this.value)){
  tip[7].style.color="green";
  tip[7].innerHTML="手机格式正确";
  teleCheck=true;
 }
 else{
  tip[7].style.color="red";
  tip[7].innerHTML="您输入的手机号码不是有效的格式";
 }
}
btn.onclick=function(){
 if(usernameCheck&&pswCheck&&repswCheck&&identifyCheck&&emailCheck&&teleCheck){
  window.location.href="http://www.imooc.com";
 }
慕用7018409 2020-04-29
源自：项目：JS表单验证案例   3-10 作业题
20
收起

正在回答

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

2回答
好帮手慕粉 回答被采纳获得+3积分 2020-04-30 09:55:43

同学你好，因为同学将获取的input元素赋值给了name，它是JavaScript语言内置的属性，在给变量或者函数命名时，不能使用name作为变量名，我们可以举个例子看下：

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

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

所以同学改变量名改个名字即可：

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

祝学习愉快~

0
收起回答
好帮手慕粉 2020-04-29 17:48:42

同学你好，老师这边测试的姓名验证部分是正常的：

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

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

就是正则实现的不正确：

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

如果不是这个问题，建议同学再详细描述一下。

祝学习愉快~

0
收起回答
  • 提问者 慕用7018409 #1
    这个是用户名，底下的用户名没反应
    2020-04-29 19:10:56
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

为什么addEventListener("submit", )返回false不会取消提交表单
6 0 4
表单验证案例课程里面的3-8选择题答案有错误吧，手机号和邮箱那个才是错的吧
12 0 4
SQLite
0 0 3
关于，ssl验证
13 0 9
4.1：侧边导航栏遮盖层menu-box的高显示为0，请老师指点。
0 0 2

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

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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