老师看一下，我的绑定事件有几个出问题了，看不出来问题在哪里
来源：3-10 作业题
var当个程序猿
2019-11-10 19:31:19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./style/style.css"> </head> <body> <div class="header"> <div class="logo">慕课高铁客户服务中心 | <span class="server">客户服务</span></div> <div class="nav"> <a href="#">意见反馈 <span class="web">imooc@com</span></a> <a href="#">您好，请<span class="web">登录</span> | 注册 </a> <a href="#" class="angel">我的IMOOC▼</a> <a href="#" class="phone" >手机版</a> </div> </div> <div class="list"> <div> <p>未完成订单</p> <p>已完成订单（改/退）</p> </div> <div> <p>我的保险</p> </div> <div> <p>查看个人信息</p> <p>账户安全</p> </div> <div> <p>常用联系人</p> </div> <div> <p>重点旅客预约</p> <p>遗失物品查找</p> </div> <div> <p>服务查询</p> </div> <div> <p>投诉</p> <p>建议</p> </div> </div> <div class="content"> <div class="location">您现在的位置 <span class="location-1">客运首页 > 注册</span></div> <div class="userInformation"> <div class="tittle">账户信息</div> <div class="userInput"> <p>*用 户 名： <input type="text" placeholder="用户设置成功后不可修改" id="userName"><b>6-30位数字、字母或"_",字母开头</b></p> <p>*登录密码： <input type="password" placeholder="6-20位数字、字母或符号" id="password"><b class="passwordStr"></b><b class="passwordStr"></b><b class="passwordStr"></b></p> <h6></h6> <p>*确认密码： <input type="password" placeholder="再次输入您的登录密码" id="passwordConfirm"><b></b></p> <p>*姓 名： <input type="text" placeholder="请输入姓名" id="name"><b class="regu"><u>姓名填写规则</u></b></p> <p>*证件类型： <select> <option value="card">二代身份证</option> </select></p> <p>*证件号码： <input type="text" placeholder="请输入您的证件号码" id="idCard"><b></b></p> <p>*邮 箱： <input type="text" placeholder="请正确填写邮箱地址" id="email"><b></b></p> <p>*手机号码： <input type="text" placeholder="请输入您的手机号" id="tel"><b>请正确填写手机号码，稍后将会向该号码发送短信</b></p> <p>*旅客类型： <select> <option value="adult">成人</option> <option value="child">儿童</option> </select></p> </div> <div class="nameTip"> <p class="txt">1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p> <p class="txt">2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改<br/>后保存。</p> <p class="txt">3.姓名中有繁体字无法输入时，可用简体替代。</p> <p class="txt">4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一<br/>个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输<br/>入时不区别大小写></p> </div> <div class="agre"><input type="checkbox" name="agreement"> 我已阅读并同意遵守<span class="agreement">《中国铁路客户服务中心服务条款》</span></div> <div id="btn">下一步</div> </div> </div> <div class="footer"> <div class="footer_word">关于我们 | 网站证明<br/>Copyright © 2017imooc.com All Rights Reserved | 京ICP备13046642号-2</div> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html>
body{
min-width: 1200px;
}
*{
padding:0;
margin:0;
font-family: '微软雅黑';
}
/*header部分*/
.header{
width:100%;
height:125px;
background:#efefef;
line-height: 125px;
border-bottom:2px solid #2487c9;
}
.logo{
height:125px;
line-height:125px;
margin-left:10%;
background:url('../img/logo.png') no-repeat;
text-indent: 120px;
font-size:24px;
float:left;
cursor:pointer;
}
.server{
color:#666;
font-size:17px;
cursor: pointer;
}
.nav{
height:125px;
line-height:125px;
float:right;
margin-right:150px;
}
.nav > a{
color:black;
margin:0 13px;
font-size:16px;
text-decoration: none;
}
.web{
color:#f88703;
}
.phone{
display:inline-block;
background:url('../img/phone.png') no-repeat ;
background-size:15%;
text-indent: 50px;
background-position:18px 50px;
}
.list{
width: 180px;
padding-left: 0px;
background-color:white;
position: absolute;
top:75px;
right:250px;
text-align: center;
border:1px solid #fb7403;
z-index:9;
display:none;
}
.list > div:last-child{
border-bottom:none;
padding-bottom:0px;
}
.list > div{
width:80%;
border-bottom:1px dashed #666;
margin:10px auto;
color:#666;
font-size:12px;
padding-bottom:5px;
}
.list > div > p{
padding-bottom:10px;
}
.list > div > p:hover{
cursor: pointer;
color:red;
}
/*主体部分*/
.content{
width:1100px;
height:630px;
margin:0 auto;
}
.location,.location-1{
font-size:20px;
}
.location{
height:46px;
line-height:46px;
}
.location-1{
color:#666;
}
.userInformation{
height:600px;
width:1100px;
border:1px solid #f88703;
border-radius:5px 5px 0 0;
}
.tittle{
widows: 100%;
height:41px;
line-height:43px;
background-color:#f88703;
border-radius:5px;
text-indent:2em;
}
.userInput{
width:100%;
margin:50px auto;
position: relative;
}
.userInput>p{
padding:10px 200px;
}
.userInput > p > input,select{
display:inline-block;
width:200px;
}
.passwordStr{
display:inline-block;
width:50px;
height:10px;
background:#666;
margin:0 5px;
}
u{
cursor: pointer;
}
h6{
display:'none';
padding-left:300px;
}
.nameTip{
width:500px;
height:300px;
border:1px solid #fb7403;
position: absolute;
top:420px;
right:240px;
background:white;
display:none;
}
.txt{
height:20px;
width:500px;
margin:0px;
padding:0;
font-size:12px;
margin-top:20px;
padding-left:20px;
color:#666;
}
.agre{
width:476px;
margin:0 auto;
margin-top:-40px;
}
.agreement{
color:blue;
}
#btn{
width:200px;
height:38px;
background:#fb7403;
line-height:38px;
text-align:center;
margin:20px auto;
cursor:pointer;
border-radius:5px;
}
.regu{
color:#f88703;
}
b{
color:#f88703;
}
/*底部样式*/
.footer{
width:100%;
height:103px;
background:#dcdcdc;
margin-top:100px;
position: relative;
border-top:2px solid #2487c9;
}
.footer_word{
height:53px;
width:600px;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
text-align:center;
font-size:16px ;
color:#666;
}//获取元素
function getEle(cls){
return document.querySelector(cls);
}
function getAllEle(cls){
return document.querySelectorAll(cls);
}
var b=getAllEle('b');
console.log(b[2]);
var ele={
userName: getEle('#userName'),
password: getEle('#password'),
name:getEle('#name'),
card: getEle('#idCard'),
email:getEle('#email'),
tel:getEle('#tel')
};
//我的imooc和name规则事件
var imooc=getEle(".angel"),
list=getEle('.list');
imooc.onmouseover=function(){
list.style.display='block';
}
imooc.onmouseout=function(){
list.style.display='none';
}
list.onmouseover = function () {
list.style.display = 'block';
}
list.onmouseout = function () {
list.style.display = 'none';
}
var u=getEle('u'),
nameTip=getEle('.nameTip');
u.onmouseover=function(){
nameTip.style.display="block";
}
u.onmouseout = function () {
nameTip.style.display = "none";
}
//正则
var pattern={
userName: /^[a-z]\w{5,29}$/i,//用户名
password:/^\w{6,20}&/,//密码
name:/^[\u4e00-\u9fa5]{2,15}|[a-z]{3,30}&/i,//姓名
card:/^\d{15}$|^\d{18}&|^\d{17}(\d|x|X)$/,//身份证号
email:/^\w+@\w+\.[a-zA-Z]&/,//邮箱
tel:/^\d{11}&/,//手机号码
};
//验证
var test={
userName:function(){
if(!pattern.userName.test(getEle('#userName').value)){
b[0].style.color='red';
return false;
}else{
b[0].innerHTML='用户名输入正确';
b[0].style.color = 'green';
return true;
}
},
password: function () {
if (!pattern.password.test(getEle('#password').value)) {
b[1].style.backgroundColor = 'red';
getEle('h6').innerHTML='请输入6-20位数字、字母或符号';
getEle('h6').style='display:block';
getEle('h6').style = 'color:red';
return false;
} else {
b[1].style.backgroundColor='red';
b[2].style.backgroundColor = 'yellow';
b[3].style.backgroundColor = 'green';
return true;
}
},
passwordConfirm: function () {
if (getEle('#passwordConfirm').value=getEle('#password').value) {
b[4].innerHTML = '两次密码输入一致';
b[4].style.color = 'green';
return true;
} else if (getEle('#passwordConfirm').value==""){
b[4].innerHTML = '密码不能为空';
return falsel;
}
},
name: function () {
if (!pattern.name.test(getEle('#name').value)) {
b[5].innerHTML = '姓名只能包括中文和英文，且字符在3-30个之间';
b[5].style.color = 'red';
return false;
} else {
b[5].innerHTML = '姓名输入正确';
b[5].style.color = 'green';
return true;
}
},
card: function () {
if (!pattern.card.test(getEle('#idCard').value)) {
b[6].innerHTML = '请输入18位身份证号码';
b[6].style.color = 'red';
return false;
} else {
b[6].innerHTML = '号码输入正确';
b[6].style.color = 'green';
return true;
}
},
email: function () {
if (!pattern.email.test(getEle('#email').value)) {
b[7].innerHTML = '邮箱格式不正确';
b[7].style.color = 'red';
return false;
} else {
b[7].innerHTML = '邮箱输入正确';
b[7].style.color = 'green';
return true;
}
},
tel: function () {
if (!pattern.tel.test(getEle('#tel').value)) {
b[8].innerHTML = '手机号码格式不正确';
b[8].style.color = 'red';
return false;
} else {
b[8].innerHTML = '手机号码输入正确';
b[8].style.color = 'green';
return true;
}
}
}
//绑定失去焦点事件
for(var i in ele){
ele[i].onblur=test[i];
}
//判断提交写回答
2回答
-
同学你好，这是因为正则不对哦。&应该为$
另外，根据要求，老师把正则给你完善了一下，整体修改一下哦
像密码中，验证正确，提示信息没有设置：
从同学的代码上看，你是一个基础还可以，但是有一点粗心的孩子哦。所以老师建议你，写代码的时候不要着急，欲速则不达。练习的时候要踏实认真一点，这样才会避免很多粗心导致的问题哦。加油！
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕夭夭
2019-11-11
你好同学，老师这边测试，只有确认密码的事件触发不了。这是因为忘记获取确认密码的dom对象了，并且方法中判断有误，如下修改：
获取确认密码输入框的dom元素
另外，作业完成之后，建议上传作业。批复作业的老师会对作业进行详细的指导，并整理成文档发送给同学，能够更好的帮助你完善作业哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h019-11-11
相似问题