是我正则写错了吗？为什么用户名里输入什么都提示输入正确
来源：3-10 作业题
慕后端5428016
2019-11-19 19:49:23
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/zuoye.css">
</head>
<body>
<header>
<div id="header_wrap">
<div id="header_wrap_left">
<a href="javascript:;" id="logo"></a>
<h1>慕课高铁客户服务中心 | <a href="javascript:;">客户服务</a></h1>
</div>
<div id="header_wrap_right">
<p>意见反馈 <a href="javascript:;">imooc@com</a> 您好，请 <a href="javascript:;">登陆</a> <a href="javascript:;">注册</a></p>
<div id="menu_box">
<b id="my_imooc">我的IMOOC ▼</b>
<div id="menu_list">
<div class="content content_1">
<a href="javascript:;">未完成订单</a><br>
<a href="javascript:;">已完成订单(改/退)</a>
</div>
<div class="content content_2">
<a href="javascript:;">我的保险</a>
</div>
<div class="content content_3">
<a href="javascript:;">查看个人信息</a><br>
<a href="javascript:;">账户安全</a>
</div>
<div class="content content_4">
<a href="javascript:;">常用联系人</a>
</div>
<div class="content content_5">
<a href="javascript:;">重点旅客预约</a><br>
<a href="javascript:;">
遗失物品查找
</a>
</div>
<div class="content content_6">
<a href="javascript:;">服务查询</a>
</div>
<div class="content content_7">
<a href="javascript:;">投诉</a><br>
<a href="javascript:;">建议</a>
</div>
</div>
</div>
<div id="phone">手机版</div>
</div>
</div>
</header>
<!--主体-->
<div id="main">
<p id="main_header">您现在的位置：<span>客运首页 > 注册</span></p>
<div id="user_information">
<div id="user_information_header">账户信息</div>
<form>
<div class="item">
<span class="important">*</span>
<label for="username">用 户 名:</label>
<input type="text" id="username" name="" placeholder="用户设置成功后不可修改">
<p class="itemtip"></p>
</div>
<div class="item">
<span class="important">*</span>
<label for="password">登陆密码:</label>
<input type="password" id="password" name="" placeholder="6-20位字母、数字或符号">
<span class="password_line"></span>
<span class="password_line"></span>
<span class="password_line"></span>
<p class="itemtip"></p>
</div>
<div class="item">
<span class="important">*</span>
<label for="password_">确认密码:</label>
<input type="password" id="password_" name="" placeholder="再次输入你的登陆密码">
<p class="itemtip"></p>
</div>
<div class="item">
<span class="important">*</span>
<label for="yourname">姓 名:</label>
<input type="text" id="yourname" name="" placeholder="请输入姓名">
<p class="itemtip"></p>
</div>
<div class="item">
<span class="important">*</span>
<label for="idtype">证件类型:</label>
<select id="idtype">
<option value="二代身份证">二代身份证</option>
<option value="护照">护照</option>
<option value="港澳台通行证">港澳台通行证</option>
</select>
</div>
<div class="item">
<span class="important">*</span>
<label for="idnum">证件号码:</label>
<input type="text" id="idnum" name="" placeholder="请输入您的证件号码">
<p class="itemtip"></p>
</div>
<div class="item">
<span class="important">*</span>
<label for="email">邮 箱:</label>
<input type="text" id="email" name="" placeholder="请正确填写邮箱地址">
<p class="itemtip"></p>
</div>
<div class="item">
<span class="important">*</span>
<label for="phonenum">手机号码:</label>
<input type="text" id="phonenum" name="" placeholder="请输入您的手机号码">
<p class="itemtip"></p>
</div>
<div class="item">
<span class="important">*</span>
<label for="usertype">旅客类型:</label>
<select id="usertype">
<option value="成人">成人</option>
<option value="学生">学生</option>
<option value="残疾人">残疾人</option>
<option value="军人">军人</option>
</select>
</div>
<div id="end">
<input type="checkbox" id="choose" name="">
<label for="choose">我已阅读并同意遵守<a href="javascript:;">《中国铁路客户服务中心网站服务条款》</a></label>
</div>
<div class="submit">
<input type="submit" id="submit" name="" value="下一步">
</div>
</form>
</div>
</div>
<footer>
<p id="footer_1">关于我们 | 网站声明</p>
<p id="footer_2">Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</footer>
<script type="text/javascript" src="js/zuoye.js"></script>
</body>
</html>
*{
margin: 0;
padding:0;
}
a{
text-decoration: none;
}
/*头部*/
header{
background: #eee;
height: 125px;
background-size:cover;
border-bottom:2px solid rgb(36,135,201);
}
#header_wrap{
width: 1260px;
height: 125px;
margin: 0 auto;
}
#header_wrap_left{
float: left;
height: 110px;
margin-top:7px;
}
#header_wrap_left #logo{
display: block;
float: left;
width: 110px;
height: 110px;
background:url(../素材/logo.png);
}
#header_wrap_left h1{
float: left;
margin-top: 40px;
margin-left: 24px;
line-height: 24px;
font-size: 24px;
font-weight: normal;
}
#header_wrap_left h1 a{
color: grey;
font-size: 16px;
line-height:16px;
}
#header_wrap_right{
float: right;
height: 24px;
margin-top: 50px;
font-size: 16px;
line-height: 24px;
}
#header_wrap_right p,#header_wrap_right #my_imooc,#header_wrap_right #phone{
float: left;
}
#header_wrap_right a{
color: orange;
}
#header_wrap_right #menu_box{
float: left;
margin-left: 22px;
position: relative;
}
#header_wrap_right #my_imooc:hover{
color: rgb(251,116,3);
cursor: pointer;
}
#header_wrap_right #menu_list{
position: absolute;
width: 155px;
left: 0;
top: 24px;
font-size: 14px;
line-height: 28px;
padding: 16px 16px 0;
border:1px solid rgb(251,116,3);
background: #fff;
display: none;
}
#menu_list .content{
padding: 0 16px 0;
border-bottom:1px dotted grey;
}
#menu_list .content:last-child{
border:none;
}
#menu_list .content a{
color: grey;
}
#header_wrap_right #phone{
margin-left: 48px;
padding-left: 24px;
background: url(../素材/未标题-1.png) no-repeat;
background-size: 18px 24px;
}
/*主体*/
#main{
width: 1260px;
margin: 0 auto;
}
#main_header{
font-size: 20px;
margin: 18px 0;
}
#main_header span{
color: grey;
}
#user_information{
width: 1260px;
border:1px solid rgb(251,116,3);
}
#user_information_header{
width: 1260px;
height: 44px;
font-size: 20px;
line-height: 44px;
text-indent: 10px;
color: #fff;
background: rgb(251,116,3);
}
form{
margin: 100px 0 300px 300px;
}
#main #user_information .item{
margin-bottom:16px;
}
#main #user_information .item .important{
color: rgb(251,116,3);
}
#main #user_information .item input,select{
margin-left: 16px;
}
#main #user_information .item .password_line{
display: inline-block;
width: 42px;
height: 8px;
background:rgb(221,221,221);
}
#main #user_information .item .itemtip{
display: inline-block;
margin-left: 15px;
font-size: 14px;
}
#main #user_information #end{
margin-left: 50px;
font-size: 18px;
line-height: 18px;
}
#main #user_information #submit{
width: 200px;
height: 40px;
border-radius:5px;
border:none;
background: rgb(251,116,3);
margin-left: 129px;
margin-top: 66px;
font-size: 18px;
color: #fff;
line-height: 18px;
}
footer{
background: #eee;
height: 125px;
background-size:cover;
border-top:2px solid rgb(36,135,201);
margin-top: 70px;
text-align: center;
font-size: 16px;
line-height: 16px;
color: rgb(165,165,165);
}
footer #footer_1,footer #footer_2{
margin-top: 30px;
}
var ele={
'myImooc':document.getElementById("menu_box"),
'menuList':document.getElementById("menu_list"),
'userName':document.getElementById("username"),
'psaaWord':document.getElementById("password"),
'passWordLines':document.getElementsByClassName("password_line"),
'passWord1':document.getElementById("password_"),
'realName':document.getElementById("yourname"),
'idType':document.getElementById("idtype"),
'idNum':document.getElementById("idnum"),
'eMail':document.getElementById("email"),
'phoneNum':document.getElementById("phonenum"),
'userType':document.getElementById('usertype'),
'choose':document.getElementById("choose"),
'submit':document.getElementById("submit"),
'items':document.getElementsByClassName("itemtip")
};
var input1=false;
ele.myImooc.onmouseover=function(){
ele.menuList.style.display="block";
}
ele.myImooc.onmouseout=function(){
ele.menuList.style.display="none";
}
//
ele.userName.onfocus=function(){
ele.items[0].innerHTML="请输入6-30位字母、数字或下划线，字母开头";
ele.items[0].style.color="red";
}
ele.userName.onblur=function(){
var reg=/^[a-z]\w{5,30}/i;
if (this.value=="") {
ele.items[0].innerHTML="用户名不能为空";
ele.items[0].style.color="red";
}else{
if(!reg.exec(ele.userName.vale)){
ele.items[0].innerHTML="请输入6-30位字母、数字或下划线，字母开头";
ele.items[0].style.color="red";
}else{
ele.items[0].innerHTML="用户名输入正确";
input1=true;
}
}
};
1回答
-
好帮手慕慕子
2019-11-20
同学你好， 因为获取输入框的内容value单词拼写错误，导致代码出现问题， 建议修改：
另，正则表达式添加结尾限制符$，保证只能输入5-30位字符
如果帮助到了你， 欢迎采纳，祝学习愉快~
0
相似问题