体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师，请问一下

来源：3-10 作业题

Perfect雪儿

2019-08-22 16:37:37

http://img.mukewang.com/climg/5d5e53a700019c0204680312.jpg

老师，当我在预览页输入密码测试的时候：

第一次输入：123456，显示正确

http://img.mukewang.com/climg/5d5e54230001f70f05510099.jpg

第二次输入：123qwe , 显示正确

http://img.mukewang.com/climg/5d5e54020001913705930098.jpg

第三次输入：123456 , 显示成第二类了，是什么原因呢?

http://img.mukewang.com/climg/5d5e54080001913705930098.jpg

userPass.onblur = function () {
var pwd = userPass.value;
//数字，字母或符号其中的一种
var reg1 = /(^[\W]{6,20}$)|(^[a-z]{6,20}$)|(^[1-9]{6,20}$)/i; 
//任意2种组合
var reg2 = /(^[1-9|a-z]{6,20}$)|(^[\W|a-z]{6,20}$)|(^[\W|1-9]{6,20}$)/i;
    if (reg1.exec(pwd)) {
        items[1].innerHTML = "密码强度较低";
        items[1].style.color = "red";
        strengths[0].style["display"] = "inline-block";
        strengths[1].style["display"] = "inline-block";
        strengths[2].style["display"] = "inline-block";
        input[1] = true;
    }else if(reg2.exec(pwd)){
        items[1].innerHTML = "密码强度一般";
        items[1].style.color = "red";
        strengths[0].style["display"] = "inline-block";
        strengths[1].style["display"] = "inline-block";
        strengths[2].style["display"] = "inline-block";
        strengths[0].style["background-color"] = "red";
        strengths[1].style["background-color"] = "red";
        input[1] = true;
    }
};


写回答

5回答

好帮手慕星星

2019-08-23

已采纳

同学你好，代码中的问题：

（1）粘贴的代码没有handup提交按钮，所以js中给按钮绑定的点击事件会报错，老师注释掉进行测试的。

（2）正则处可以再加一层判断，判断输入值的是否为空；并且密码强度较低时，第一个短线颜色为红色，其余为灰色；密码强度一般时，第一个短线颜色为红色，第二个短线颜色为橘色，剩余为灰色；密码强度高时，第一个短线颜色为红色，第二个短线颜色为橘色，第三个短线颜色为灰色。如果只写每个正则对应的短线颜色，不写灰色的话，就会是同学测试的那种效果，重新输入测试的时候，短线颜色不会恢复为原来的灰色。参考修改：

/*密码*/
userPass.onblur = function() {
    var pwd = userPass.value;
    //数字，字母或符号其中的一种
    var reg1 = /(^[\W]{6,20}$)|(^[a-zA-Z]{6,20}$)|(^[0-9]{6,20}$)/;
    //任意2种组合
    var reg2 = /^[0-9a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/;
    //3种组合
    var reg3 = /\w[0-9a-zA-Z]*/;

    if (pwd == '') {
        items[1].innerHTML = "密码不为空";
        items[1].style.color = "red";
        strengths[0].style["display"] = "none";
        strengths[1].style["display"] = "none";
        strengths[2].style["display"] = "none";
    } else {
        if (reg1.exec(pwd)) {
            items[1].innerHTML = "密码强度较低";
            items[1].style.color = "red";
            strengths[0].style["display"] = "inline-block";
            strengths[1].style["display"] = "inline-block";
            strengths[2].style["display"] = "inline-block";
            strengths[0].style["background-color"] = "red";
            strengths[1].style["background-color"] = "#ddd";
            strengths[2].style["background-color"] = "#ddd";
            input[1] = true;
        } else if (reg2.exec(pwd)) {
            items[1].innerHTML = "密码强度一般";
            items[1].style.color = "red";
            strengths[0].style["display"] = "inline-block";
            strengths[1].style["display"] = "inline-block";
            strengths[2].style["display"] = "inline-block";
            strengths[0].style["background-color"] = "red";
            strengths[1].style["background-color"] = "orange";
            strengths[2].style["background-color"] = "#ddd";

            input[1] = true;
        } else if (reg3.exec(pwd)) {
            items[1].innerHTML = "密码强度高";
            items[1].style.color = "green";
            strengths[0].style["display"] = "inline-block";
            strengths[1].style["display"] = "inline-block";
            strengths[2].style["display"] = "inline-block";
            strengths[0].style["background-color"] = "red";
            strengths[1].style["background-color"] = "orange";
            strengths[2].style["background-color"] = "green";
        }
    }

};

测试效果（密码变成了文本text进行测试的，所以看得见输入的内容）：

http://img.mukewang.com/climg/5d5f4a4e0001effb04080037.jpg

http://img.mukewang.com/climg/5d5f49a90001665f05550040.jpg

http://img.mukewang.com/climg/5d5f4a590001f45b05740041.jpg

http://img.mukewang.com/climg/5d5f4a6f0001300605170036.jpg

http://img.mukewang.com/climg/5d5f4a810001919805620043.jpg

http://img.mukewang.com/climg/5d5f4a920001139f05410037.jpg

自己重新测试下，祝学习愉快！

0

Perfect雪儿

提问者

2019-08-22

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
	<!-- 头部 -->
	<header>
		<div class = "header__wrap">
			<div class = "left">
				<div class = "logo"></div>
				<p class="lg">慕课高铁客户服务中心</p>
				<p class="symbol">|</p>
				<p class="lo">客户服务</p>
			</div>
			<div class = "right">
				<ul>
					<li>意见反馈</li>
					<li class="pig">imooc@com</li>
					<li>
						<span>您好，请</span> 
						<span  class="pig">登录</span>
						<span>|</span> 
						<span  class="pig">注册</span>
					</li>
					<li class="pig arrow">我的IMOOC</li>
					<li class="mainphone">
						<p  class="pig one">手机版</p>
						<span  class = "phone"></span>
						
					</li>
				</ul>
				<ul class="box">
					<li>未完成的订单</li>
					<li>已完成的订单（改/退）</li>
					<li>我的保险</li>
					<li>查看个人信息</li>
					<li>账户安全</li>
					<li>常用联系人</li>
					<li>重点旅客预约</li>
					<li>遗失物品查找</li>
					<li>服务查询</li>
					<li>投诉</li>
					<li>建议</li>
				</ul>
			</div>
		</div>
	</header>
	<!-- 主体 -->
	<main>
		<div class="maintain">
			<div class="title">
				<span>您现在的位置：</span>
				<span class="pug">客运首页</span>
				<span class="pug">></span>
				<span class="pug">注册</span>
			</div>
			<div class = "account">
				<p class="accountb">账户信息</p>
				<div class = "information">
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "userAccount" class = "distancea">用户<span class="distance">名</span></label>
				        <span class = "colon"> :</span>
				        <input type = "text" id = "userAccount" placeholder = " 用户设置成功后不可修改">
				    </div>
				    <p class = "item_"></p>
				    <br>
				    <!--_____________________________________________________________________________________________-->
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "userPass"  class = "distanceb">登陆密<span class="distance">码</span></label>
				        <span class = "colon"> :</span>
				        <input type = "password" id = "userPass" placeholder = " 6-20位字母,数字或符号">
				    </div>
				    <p class = "item_"></p>
				    <div id="strength"></div>
				    <div id="strength"></div>
				    <div id="strength"></div>
				    <br>
				    <!--_____________________________________________________________________________________________-->
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "userPass_"  class = "distanceb">确认密<span class="distance">码</span></label>
				        <span class = "colon"> :</span>
				        <input type = "password" id = "userPass_" placeholder = " 再次输入您的登录密码">
				    </div>
				    <p class = "item_"></p>
				    <br>
				    <!--_____________________________________________________________________________________________-->
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "userName"  class = "distancec">姓<span class="distance">名</span></label>
				        <span class = "colon"> :</span>
				        <input type = "text" id = "userName" placeholder = " 请输入姓名,中文且最多五位">
				    </div>
				    <p class = "item_"></p>
				    <br>
				    <!--_____________________________________________________________________________________________-->
				     <div class = "item">
				        <span class = "important">*</span>
				        <label for = "information"  class = "distanceb">证件类<span class="distance">型</span></label>
				        <span class = "colon"> :</span>
				        <select id="documents">
						    <option value = "cardId">二代身份证</option>
						    <option value = "passHm">港澳通行证</option>
						    <option value = "passT">台湾通行证</option>
						    <option value = "passPort">护照</option>
						</select>
				    </div>
				    <br>
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "information"  class = "distanceb">证件号<span class="distance">码</span></label>
				        <span class = "colon"> :</span>
				        <input type = "text" id = "information" placeholder = " 请输入您的证件号码">
				    </div>
				    <p class = "item_"></p>
				    <br>
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "email"  class = "distancec">邮<span class="distance">箱</span></label>
				        <span class = "colon"> :</span>
				        <input type = "email" id = "email" placeholder = " 请输入正确邮箱格式">
				    </div>
				    <p class = "item_"></p>
				    <br>
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "telephone"  class = "distanceb">手机号<span class="distance">码</span></label>
				        <span class = "colon"> :</span>
				        <input type = "tel" id="telephone" placeholder = " 请输入您的手机号码">
				    </div>
				    <p class = "item_"></p>
				    <br>
				    <div class = "item">
				        <span class = "important">*</span>
				        <label for = "information"  class = "distanceb">旅客类<span class="distance">型</span></label>
				        <span class = "colon"> :</span>
				        <select id="visitor">
						    <option value = "adult">成人</option>
						    <option value = "child">儿童</option>
						    <option value = "student">学生</option>
						    <option value = "soldier">残疾军人</option>
						    <option value = "policemen">伤残人民警察</option>
						</select>
				    </div>
				    <p class = "item_"></p>
				    <br>
				</div>
			</div>
		</div>
	</main>
</body>
</html>
<script type="text/javascript" src="js/index.js"></script>


0

Perfect雪儿

提问者

2019-08-22

/* 头部 */
body{
    background-color: #fff; 
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Microsoft Yahei",微软雅黑;
    min-width: 1200px;
}
ul,li{
    list-style: none;
}
p{
    margin: 0;
    padding: 0;
}
header{
    width: 100%;
    height: 120px;
    background-color: #efefef; 
    border-bottom: 2px solid blue;
}
.header__wrap{
    width: 1100px;
    height: 120px;
    margin: 0 auto;
}
.header__wrap .left{
    width: 400px;
    height: 120px;
    float: left;
}
.header__wrap .left .logo{
    background-image: url(../img/logo.png);
    width: 110px;
    height: 110px;
    float: left;
    margin-top: 5px;
}
.header__wrap .left .logo,
.header__wrap .left p{
    cursor: pointer;
}
.header__wrap .left p{
    float: left;
    line-height: 120px;
}
.header__wrap .left .lg{
    font-size: 18px;
}
.header__wrap .left .symbol{
    font-size: 22px;
    padding: 0 5px;
}
.header__wrap .left .lo{
    color: #666;
}
.header__wrap .right{
    width: 690px;
    height: 120px;
    float: right;
    text-align: right;
}
.header__wrap .right ul{
    margin: 0 auto;
    line-height: 120px;
    float: right;
}
.header__wrap .right .pig:hover{
    cursor: pointer;
    color: rgb(251,116,3);
}
.header__wrap .right .one{
    z-index: 3;
}
.header__wrap .right ul li,
.header__wrap .right ul p
{
    float: left;
    padding: 0 7px;
}
.header__wrap .right .arrow{
    position: relative;
}
.header__wrap .right .arrow::after{
    content: "";
    width: 0px;
    height: 0px;
    border-top: 7px solid #000;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: 59px;
    right: -15px;
}
.header__wrap .right .mainphone{
    position: relative;
    margin-left: 60px;
}
.header__wrap .right .phone{
    background-image: url(../img/未标题-1.png);
    background-repeat: no-repeat; 
    width: 59px;
    height: 85px;
    position: absolute;
    background-size: 25%;
    top: 50px;
    left: -5px;
}
.header__wrap .right .box{
    width: 200px;
    background-color: #fcfcfc;
    padding: 0;
    margin: 0;
    border: 1px solid  rgb(251,116,3);
}
.header__wrap .right .box li{
    line-height: 40px;
    color: #7d7e81;
}
  
/* 主体 */
main{
    width: 100%;
    height: 750px;
}
main .maintain{
    width: 1100px;
    margin: 0 auto; 
}
main .title{
    padding: 10px;
}
main .title .pug{ 
    color: #666;
}
main .account{
    border: 1px solid rgb(251,116,3);
    border-radius: 5px;
    height: 620px;
}
main .account .accountb{
    background-color: rgb(251,116,3);
    color: #fff;
    height: 40px;
    border-radius: 5px;
    line-height: 40px;
    text-indent: 10px;
}
main .account .information{
    margin: 50px auto;
    width: 700px;
    position: relative;
}
main .account .information .item .important{
    color: rgb(251,116,3);
}
main .account .information .item .distance{
    letter-spacing:0;
}
main .account .information .item  .colon{
    padding-right: 10px;
    padding-left: 5px;
}
main .account .information .item .distancea{
   letter-spacing:.65em;
} 
main .account .information .item .distanceb{
   letter-spacing:.1em;
} 
main .account .information .item .distancec{
   letter-spacing:2.3em;
}
main .account .information .item label{
    font-size: 13px;
    font-weight: bold;
}
main .account .information .item input{
    width: 210px;
    border: 1px solid #a9a9bb;
    text-indent: 5px;
    height: 25px;
}
main .account .information .item input::-webkit-input-placeholder{
    color:#a9a9bb;
}
main .account .information .item input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#a9a9bb;
}
main .account .information .item input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#a9a9bb;
}
main .account .information .item input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#a9a9bb;
}
main .account .information .item select{
    width: 212px;
    height: 25px;
    border: 1px solid #a9a9bb;
    text-indent: 5px;
}
main .account .information .item{
    display: inline-block;
    margin-bottom: 15px;
}
main .account .information .item_{
    display: inline;
}
#end{
    position: absolute;
    left: 85px;
}
#end #handup{
    width: 150px;
    height: 30px;
    display: block;
    background-color: rgb(251,116,3);
    border: none; 
    border-radius: 5px;
    color: #fff;
    position: absolute;
    top: 70px;
    left: 40px;
}
#end #handup:hover{
    background-color: #ff0000;
    cursor: pointer;
}
#end span{
    color: #006ee1;
}
#strength{
    width: 30px;
    height: 7px;
    margin-left: 3px; 
    background-color: #ddd; 
    display: inline-block;
    display: none;
}
  
/* 尾部 */
.footer{
    background-color: #dcdcdc;
    height: 100px;
    border-top: 2px solid blue;
}
.footer__nav{
    margin: 0;
    padding: 20px;
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
.footer__nav .footer__nav__item{
    color: #a99999;
    display: inline-block;
}
.footer p{
    color: #a99999;
    text-align: center;
}


0

Perfect雪儿

提问者

2019-08-22

var userAccount=document.getElementById("userAccount");
var userPass=document.getElementById("userPass");
var userPass_=document.getElementById("userPass_");
var userName=document.querySelector("#userName");
var documents=document.querySelector("#documents");
var information=document.querySelector("#information");
var email=document.querySelector("#email");
var telephone=document.querySelector("#telephone");
var visitor=document.querySelector("#visitor");
var submit=document.querySelector("#submit");
var choose=document.querySelector("#choose");
var handup=document.querySelector("#handup");
var items=document.querySelectorAll(".item_");
var chooses=document.querySelector("#chooses");
var strengths=document.querySelectorAll("#strength");
var input=[false,false,false,false,false,false,false,];

/*用户名*/
userAccount.onblur = function () {
var reg = /^\w{6,30}$/;
    if (!reg.exec(userAccount.value)) {
        items[0].innerHTML = "6-30位字母、数字或'_'";
        items[0].style.color = "red";
    } else {
        items[0].innerHTML = "用户名输入正确";
        items[0].style.color = "green";
        input[0] = true;
    }
};

/*密码*/
userPass.onblur = function () {
var pwd = userPass.value;
//数字，字母或符号其中的一种
var reg1 = /(^[\W]{6,20}$)|(^[a-zA-Z]{6,20}$)|(^[0-9]{6,20}$)/; 
//任意2种组合
var reg2 = /^[0-9a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/;
//3种组合
var reg3 = /\w[0-9a-zA-Z]*/;
    if (reg1.exec(pwd)) {
        items[1].innerHTML = "密码强度较低";
        items[1].style.color = "red";
        strengths[0].style["display"] = "inline-block";
        strengths[1].style["display"] = "inline-block";
        strengths[2].style["display"] = "inline-block";
        input[1] = true;
    }else if(reg2.exec(pwd)){
        items[1].innerHTML = "密码强度一般";
        items[1].style.color = "red";
        strengths[0].style["display"] = "inline-block";
        strengths[1].style["display"] = "inline-block";
        strengths[2].style["display"] = "inline-block";
        strengths[0].style["background-color"] = "red";
        strengths[1].style["background-color"] = "red";
        input[1] = true;
    }else if (reg3.exec(pwd)) {
        items[1].innerHTML = "密码强度高";
        items[1].style.color = "green";
        strengths[0].style["display"] = "inline-block";
        strengths[1].style["display"] = "inline-block";
        strengths[2].style["display"] = "inline-block";
        strengths[0].style["background-color"] = "green";
        strengths[1].style["background-color"] = "green";
        strengths[2].style["background-color"] = "green";
    }
};

/*确认密码*/
userPass_.onblur = function () {
    if (this.value == "") {
        items[2].innerHTML = "输入框不能为空";
        items[2].style.color = "red";
    } else {
        if (this.value != userPass.value) {
            items[2].innerHTML = "两次密码输入不一致，请重新输入";
            items[2].style.color = "red";
        } else {
            items[2].innerHTML = "两次输入一致";
            items[2].style.color = "green";
            input[2] = true;
        }
    }
};

/*姓名*/
userName.onblur = function () {
var reg = /^[\u4e00-\u9fa5]{2,5}$/;
    if (!reg.exec(userName.value)) {
        items[3].innerHTML = "姓名只能包含中文或者英文,且字符在3-30个之间！";
        items[3].style.color = "red";
    } else {
        items[3].innerHTML = "姓名输入正确";
        items[3].style.color = "green";
        input[3] = true;
    }
};

/*证件号码*/
information.onfocus = function () {
    items[4].innerHTML = "请输入您的身份证号码";
    items[4].style.color = "green";
};
information.onblur = function () {
    var reg = /^\d{17}[0-9x]$/;
    if (this.value == "") {
        items[4].innerHTML = "请输入18位身份证号码";
        items[4].style.color = "red";
    } else {
        if (!reg.exec(information.value)) {
            items[4].innerHTML = "请输入18位身份证号码";
            items[4].style.color = "red";
        } else {
            items[4].innerHTML = "号码输入正确";
            items[4].style.color = "green";
            input[4] = true;
        }
    }
};

/*邮箱*/
email.onfocus = function () {
    items[5].innerHTML = "请输入您邮箱的正确格式";
    items[5].style.color = "green";
};
email.onblur = function () {
var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
    if (!reg.exec(email.value)) {
        items[5].innerHTML = "请输入正确的邮箱";
        items[5].style.color = "red";
    } else {
        items[5].innerHTML = "邮箱格式正确";
        items[5].style.color = "green";
        input[5] = true;
    }
};

/*手机号码*/
telephone.onfocus = function () {
    items[6].innerHTML = "请输入您的手机号码";
    items[6].style.color = "green";
};
telephone.onblur = function () {
var reg = /^1[^12]\d{9}$/;
    if (!reg.exec(telephone.value)) {
        items[6].innerHTML = "您输入的手机号码不是有效的格式！";
        items[6].style.color = "red";
    } else {
        items[6].innerHTML = "手机格式正确";
        items[6].style.color = "green";
        input[6] = true;
    }
};

/*下一步*/
handup.onclick = function () {
    if (chooses.checked == false || input[0] == false || input[1] == false || input[2] == false || input[3]== false || input[4] == false
        || input[5] == false || input[6]== false) {
        alert(" 您的信息有误 ")
    } else {
        window.location.href = "http://www.imooc.com";
    }
};


0

好帮手慕码

2019-08-22

同学你好！
没有同学的全部代码无法准确的定位问题。可能是密码正则的问题，可以给同学一个参考的思路：

http://img.mukewang.com/climg/5d5e6164000169e308420070.jpg
而且同学的密码强度逻辑有一些问题，（1）如果是弱，显示为红色，灰色，灰色，（2）如果是中，显示为红色，橙色，灰色，（3）如果是强，显示为红色，橙色，绿

http://img.mukewang.com/climg/5d5e6224000196c505100140.jpg

同学可以替换下正则再测试一下。因为代码比较多，建议粘贴全部代码至问答区提问，或者是提交作业，在作业中备注出来，批作业的老师会帮助同学解答的哦。

如果帮助到了你，欢迎采纳，祝学习愉快~

0
herfect雪儿
h 老师，我把代码贴上来了，您看一下
h019-08-22
共1条回复

0 学习 · 14456 问题

查看课程

相似问题

老师，请问一下

回答 3

老师请看下

回答 1

老师麻烦看一下

回答 1

请老师解答

回答 3

有几个问题，请教老师

回答 2

打开慕课网App查看更多内容