体系课

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

老师，请问为什么密码强度的后面两个实现不了？谢谢

来源：3-10 作业题

慕勒8522502

2019-11-14 13:32:41

//封装获取元素函数
var getElem = function(id){
	return typeof(id) === 'string' ? document.getElementById(id) : id;
}
//创建对象保存所有要获取的元素
var	dropdown_menu = document.getElementById("dropdown_menu"),
	dropdown_menu_list = document.getElementById("dropdown_menu_list"),
	nickyname = document.getElementById("nickyname"),
	psw = document.getElementById("psw"),
	confirm_psw = document.getElementById("confirm_psw"),
	u_name = document.getElementById("u_name"),
	id_type = document.getElementById("id_type"),
	id_num = document.getElementById("id_num"),
	email = document.getElementById("email"),
	tel = document.getElementById("tel"),
	ppl_role = document.getElementById("ppl_role"),
	submit = document.getElementById("submit"),
	choose = document.getElementById("choose"),
	check_result = document.getElementsByClassName("check_result"),
	safe1 = document.getElementById("safe1"),
	safe2 = document.getElementById("safe2"),
	safe3 = document.getElementById("safe3");

var input1 = false;
var input2 = false;
var input3 = false;
var input4 = false;
var input5 = false;
var input6 = false;
var input7 = false;

// 封装通用事件绑定方法，也就是IE和非IE浏览器事件处理的方法
function addHandler(element, type, handler){
	//非IE浏览器
    if (element.addEventListener) {
        element.addEventListener(type, handler, true);
    }
    //IE浏览器支持DOM2级
    else if (element.attachEvent) {
        element.attachEvent('on' + type, handler);
    }
    //IE浏览器不支持DOM2级
    //type是接收具体事件的参数，是个变量
    //任何用·的地方都可以用中括号[]取代，比如next.onclick = next["onclick"]只是前面的方法更简洁。
    else {
        element['on' + type] = handler;
    }
}
//下拉菜单的设置
addHandler(dropdown_menu, "mouseover",function(){
	dropdown_menu_list.className = "dropdown_menu_list_show";
	dropdown_menu.className = "dropdown_menu_over";
});
addHandler(dropdown_menu, "mouseout",function(){
	dropdown_menu_list.className = "dropdown_menu_list";
	dropdown_menu.className = "dropdown_menu";
});


//用户名验证
nickyname.onblur = function(){
	var reg = /^[a-zA-Z]\w{5,29}$/;
	if(this.value == "" || !reg.exec(nickyname.value)){
		check_result[0].innerHTML = "6-30为字母数字或_，字母开头";
		check_result[0].style.color = "red";
	}else if(reg.exec(nickyname.value)){
		check_result[0].innerHTML = "用户名输入正确";
		check_result[0].style.color = "green";
		input1 = true;
	}
}
//登录密码验证
psw.onblur = function(){
	var reg = /\S{6,20}/;
	var reg1 = /^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/;
	var reg2 = /^[0-9a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/;
	var reg3 = /\W[0-9a-zA-Z]*/;
	// var reg = /^([a-zA-Z]\w+[%&!-?]+){6,20}$/;
	// var reg1 = /^[0-9]{6,20}|[a-zA-Z]{6,20}|[%&!-?]{6,20}$/; //纯符号是这么表示？？
	// var reg2 = /^[0-9]+[a-zA-Z]+{6,20}|[0-9]+[%&!-?]+{6,20}|[a-zA-Z]+[%&!-?]+{6,20}$/; //两种类型结合
	if(this.value == "" || !reg.exec(psw.value)){
		check_result[1].innerHTML = "请输入6-20位字母，数字或符号";
		check_result[1].style.color = "red";
	}else if(reg.exec(psw.value)){
		check_result[1].innerHTML = "";
		safe1.style.backgroundColor = "red";
	}else if(reg1.exec(psw.value)){
		input2 = true;	
	}else if(reg2.exec(psw.value)){
		safe2.style.backgroundColor = "orange";
		input2 = true;
	}else if(reg3.exec(psw.value)){
		safe3.style.backgroundColor = "green";
		input2 = true;
	}
	




	// if(this.value == "" || !reg.exec(psw.value)){
	// 	check_result[1].innerHTML = "请输入6-20位字母，数字或符号";
	// 	check_result[1].style.color = "red";
	// }else if(reg1.exec(psw.value)){		
	// 	input2 = true;
	// }else if(reg2.exec(psw.value)){
	// 	safe2.className = "safe2_show";
	// 	input2 = true;
	// }else if(reg3.exec(psw.value)){
	// 	safe3.className = "safe3_show";
	// 	input2 = true;
	// }
}

//确认密码验证
confirm_psw.onblur = function(){
	if(this.value == ""){
		check_result[2].innerHTML = "密码不能为空";
		check_result[2].style.color = "red";
	}else if(this.value != psw.value){
		check_result[2].innerHTML = "两次密码输入不一致，请重新输入";
		check_result[2].style.color = "red";
	}else {
		check_result[2].innerHTML = "两次输入一致";
		check_result[2].style.color = "green";
	}
}









//所有正则判断表达式
// var regExp = {
// 	nickyname: /^[a-zA-Z]\w{5-29}$/,
// 	psw:/^\w{6-20}$/,
// 	confirm_psw:/^\w{6-20}$/,
// 	u_name:/^[\u4e00-\u9fa5]{2,15}|[a-zA-Z]{3,30}$/,
// 	id_type:/^[1-9][0-9]{17}$|^[1-9][0-9]{16}[x|X]$/,
// 	email:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
// 	tel:/^1[0,3-9]\d{3,9}$/,  //这个不确定
// };
//错误信息提示
// var str = [
// 	'6-30为字母数字或_，字母开头',
// 	'请输入6-20位字母，数字或符号',
// 	'密码不能为空',
// 	'姓名只能包含中文或者英文且字符在3-30个之间！',
// 	'请输入18位身份证号码',
// 	'邮箱不能为空',
// 	'您输入的手机号码不是有效格式！'
// ];
//封装显示提示文本的函数
// function check(elem, reg, index, str){
// 	var Elem = allElem[elem];
// 	var Reg = regExp[reg];
// 	if(Reg.exec(Elem.value)){
// 		allElem.check_result[index].innerHTML = "用户名输入正确";
// 		allElem[nickyname].check_result[nickyname].style.color = "green";
// 		allElem[confirm_psw].check_result[confirm_psw].innerHTML = "两次输入一致";
// 		allElem[confirm_psw].check_result[confirm_psw].style.color = "green";
// 	}
// }
//用户名验证
// function check(elem, reg, index, str){
// 	var Elem = allElem[elem];
// 	var Reg = regExp[reg];
// 	if(Reg[nickyname].test(allElem[nickyname].value)){
// 		allElem[nickyname].check_result[0].innerHTML = "用户名输入正确";
// 	}

// }
// allElem.nickyname.onblur = function(){
// 	return check('nickyname','nickyname',0,str[0] )
// }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-10</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="header_wrap">
<div class="header_logo">
<a href="javascript:;" class="header_title1"><img src="./img/logo.png" alt="">慕课高铁服务中心&nbsp;|&nbsp;</a>
<a href="javascript:;" class="header_title2">&nbsp;&nbsp;客户服务</a>
</div>
<nav class="header_nav">
<a href="javascript:;" class="header_nav_item">意见反馈&nbsp;<span id="orange-link">imooc@com</span></a>
<a href="javascript:;" class="header_nav_item">您好，请<span id="orange-link">登录&nbsp;&nbsp;</span></a>|&nbsp;&nbsp;
<a href="javascript:;" class="header_nav_item">注册</a>&nbsp;&nbsp;
<a href="javascript:;" class="header_nav_item dropdown_menu" id="dropdown_menu">我的IMOOC▼</a>&nbsp;&nbsp;&nbsp;
<div class="dropdown_menu_list" id="dropdown_menu_list">
<a href="javascript:;">未完成订单</a>
<a href="javascript:;">已完成订单（改/退）</a>
<a href="javascript:;">我的保险</a>
<a href="javascript:;">查看个人信息</a>
<a href="javascript:;">账户安全</a>
<a href="javascript:;">常用联系人</a>
<a href="javascript:;">重点旅客预约</a>
<a href="javascript:;">遗失物品查找</a>
<a href="javascript:;">服务查询</a>
<a href="javascript:;">投诉</a>
<a href="javascript:;">建议</a>
</div>
<a href="javascript:;" class="header_nav_item phone_version">&nbsp;&nbsp;&nbsp;&nbsp;手机版</a>
</nav>
</div>
</header>
<!-- 主体 -->
<main class="main">
<p class="main_title">您现在的位置：<span>客运首页>注册</span></p>
<div class="main_wrap">
<div class="info">
<div class="info_title">账户信息</div>
<!-- 需要填写的内容 -->
<div class="info_detail">
<p>
<span class="info_option"><span class="star">*</span>用户名：</span>
<input type="text" size="35" placeholder="用户名设置成功后不可修改" id="nickyname">
<span class="check_result"></span>
</p>
<p>
<span class="info_option"><span class="star">*</span>登录密码：</span>
<input type="password" size="35" placeholder="6-20位字母、数字或符号" id="psw">
<span class="check_safe">
<span class="safe1" id="safe1"></span>&nbsp;
<span class="safe2 safe2_show" id="safe2"></span>&nbsp;
<span class="safe3 safe3_show" id="safe3"></span>
</span><br>
<span class="check_result"></span>
</p>
<p>
<span class="info_option"><span class="star">*</span>确认密码：</span>
<input type="password" size="35" placeholder="再次输入您的登录密码" id="confirm_psw"></span>
<span class="check_result"></span>
</p>
<p>
<span class="info_option"><span class="star">*</span>姓名：</span>
<input type="text" size="35" placeholder="请输入姓名" id="u_name">
<span class="check_result"></span>
</p>
<p>
<span class="info_option"><span class="star">*</span>证件类型：</span>
<select name="id_type" id="id_type">
<option value="二代身份证" selected="selected">二代身份证</option>
<option value="港澳通行证">港澳通行证</option>
<option value="台湾通行证">台湾通行证</option>
<option value="护照">护照</option>
</select>
<span class="check_result"></span>
</p>
<p>
<span class="info_option"><span class="star">*</span>证件号码：</span>
<input type="text" size="35" placeholder="请输入您的证件号码" id="id_num">
<span class="check_result"></span>
</p>
<p>
<span class="info_option">邮箱：</span>
<input type="text" size="35" placeholder="请正确填写邮箱地址" id="email">
<span class="check_result"></span>
</p>
<p>
<span class="info_option"><span class="star">*</span>手机号码：</span>
<input type="text" size="35" placeholder="请输入您的手机号码" id="tel">
<span class="check_result"></span>
</p>
<p>
<span class="info_option"><span class="star">*</span>旅客类型：</span>
<span>
<select name="ppl_role" id="ppl_role">
<option value="成人" selected="selected">成人</option>
<option value="儿童">儿童</option>
<option value="学生">学生</option>
<option value="残疾军人">残疾军人</option>
<option value="伤残人民警察">伤残人民警察</option>
</select>
</span>
<span class="check_result"></span>
</p>
<div class="policy" id="policy">
         <input type="checkbox" id="choose">
         <label for="choose">我已阅读并同意遵守规定<span class="railway_policy">《中国铁路客户服务中心网站服务条款》</span></label><br />
         <button id="submit">下一步</button>
     </div>
</div>
</div>
</div>
</main>
<!-- 底部 -->
<footer>
<p class="about_us">关于我们&nbsp;|&nbsp;网站声明</p>
<p class="copyrihgt">Copyright&nbsp;&copy;&nbsp;2017&nbsp;imooc.com&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;|&nbsp;京ICP备&nbsp;13046642号-2</p>
</footer>
<script type="text/javascript" src="./js/script.js"></script>
</body>
</html>
*{
	padding:0;
	margin:0;
	font-family: "Microsoft YaHei";
}
a{text-decoration: none;}

header{
	width:100%;
	height:128px;
	background-color: #eee;
	border-bottom: 2px solid rgb(36,135,201);
}
/*header灰色部分整体*/
.header_wrap{
	width:1200px;
	height:130px;
	margin:auto;

}
/*logo,header左侧-----------------------*/
.header_wrap .header_logo{
	height:130px;
	cursor: pointer;
	float:left;
	line-height: 130px;
	font-size: 0px;
	/*border:1px solid blue;*/

}
.header_wrap .header_logo .header_title1 img{
	width:100px;
	height: 100px;
	vertical-align: middle;
}
/*慕课高铁服务中心*/
.header_logo .header_title1{
	font-size: 20px;
	color:black;
	left:130px;
	vertical-align: middle;
}
/*客户服务*/
.header_logo .header_title2{
	font-size: 15px;
	color:#aaa;
	left:300px;
	vertical-align: middle;

}
/*header右边导航内容-----------------------*/
.header_nav{
	width:650px;/*没有起作用？？？好奇怪啊*/
	height:40px;	
	font-size: 16px;
	float:right;
	/*vertical-align: middle;*/
	margin-top:55px;
	/*border:1px solid red;*/
	text-align:right;

}

.header_nav_item{
	color:black;
	height:30px;
	width:50px;
	line-height: 30px;
}
/*.header_wrap .header_nav .header_nav_item span .orange-link{
	color:red; 这种写法为什么不行呢？
}*/
#orange-link{
	color:rgb(251,116,3);
}

.header_nav .phone_version{
	background:url("../img/1.png") no-repeat;
	background-size: 22%;
}
/*-----------------------下拉菜单imooc-----------------------*/
.dropdown_menu{
	color:black;
}
.dropdown_menu_over{
	color:rgb(251,116,3);
}
.dropdown_menu_list{
	width:150px;
	font-size:10px;
	background-color: white;
	border:1px solid rgb(251,116,3); 
	/*这一句可以把下拉菜单隐藏起来*/
	display:none;
	padding:10px 10px 0 10px;
	position:absolute;
	right:140px;
	z-index:1;

}
.dropdown_menu_list a,
.dropdown_menu_list_show a{
	display: block;
	text-align:left;
	color:#aaa;
	line-height: 25px;
	padding:0 10px 0 20px;
	/*border-bottom: 1px dashed #bbb;*/
}
.dropdown_menu_list a:nth-child(2),
.dropdown_menu_list a:nth-child(3),
.dropdown_menu_list a:nth-child(5),
.dropdown_menu_list a:nth-child(6),
.dropdown_menu_list a:nth-child(8),
.dropdown_menu_list a:nth-child(9){
	border-bottom: 1px dashed #bbb;
}
.dropdown_menu_list_show a:nth-child(2),
.dropdown_menu_list_show a:nth-child(3),
.dropdown_menu_list_show a:nth-child(5),
.dropdown_menu_list_show a:nth-child(6),
.dropdown_menu_list_show a:nth-child(8),
.dropdown_menu_list_show a:nth-child(9){
	border-bottom: 1px dashed #bbb;
}
.dropdown_menu_list_show{
	width:150px;
	font-size:10px;
	background-color: white;
	border:1px solid rgb(251,116,3); 
	/*这一句可以把下拉菜单隐藏起来*/
	/*display:none;*/
	padding:10px 10px 0 10px;
	position:absolute;
	right:140px;
	z-index:1;

}
/*-----------------------主体部分-----------------------*/
.main .main_title{
	width:1200px;
	margin:auto;
	line-height: 30px;
}
.main .main_title span{
	color:#aaa;
}
.main_wrap{
	width:1200px;
	height:500px;
	border:1px solid rgb(251,116,3);
	border-radius:5px 5px;
	margin:auto;
}
.main_wrap .info span .input_form{
	width:100px;/*这个好像没用*/
}
.info .info_title{
	line-height: 30px;
	background-color: rgb(251,116,3);
	border-radius:5px 5px;
	color:white;
	text-indent:10px;
}
.info .info_detail{
	width:800px;
	/*border:1px solid green;*/
	margin:50px 0 0 250px;
	line-height:30px;
}
.info .info_detail .info_option{
	width:60px;
	text-align: justify;
	/*border:1px solid red;*/
}
.info .info_detail .star{
	color:rgb(251,116,3);
	margin-right:5px;
}
.info .info_detail .policy{
	margin-left:100px;
	/*border:1px solid blue;*/
}
.info .info_detail .policy button{
	margin:40px 0 0 30px;
	padding:8px 50px;
	background-color:rgb(251,116,3);
	border:none;
	color:white;
	border-radius:5px 5px;
	cursor: pointer;
}
.info .info_detail .policy .railway_policy{
	color:rgb(36,135,201);
	cursor: pointer;
}
/*密码强度标识*/
.safe1,
.safe2,
.safe3{
	width:20px;
	height:5px;
	background-color:#ccc;
	display:inline-block;
}
/*.safe2_show{
	background-color:orange;
}
.safe3_show{
	background-color:green;
}*/
/*是否符合要求的提示信息*/
.check_result{
	font-size:14px;
}

/*-----------------------底部-----------------------*/
footer{
	background-color: #ccc;
	width:100%;
	height:100px;
	border-top: 2px solid rgb(36,135,201);
	position:fixed;
	bottom:0px;
	text-align: center;
	line-height:30px;
	padding-top: 20px;
}


写回答

1回答

好帮手慕夭夭

2019-11-14

已采纳

同学你好，因为密码满足后两个强度规则的同时，也满足了第一个密码强度，所以永远在执行第一个else..if判断。

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

一个if..else if...else判断中，当执行了其中一个条件，其他的就不会执行了。建议如下修改：

拆分成两个if判断，一个用来判断密码是否符合规则，一个用来判断密码强度去控制进度条颜色

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

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

0

0 学习 · 14456 问题

查看课程

相似问题

老师，密码的中强的正则改怎么写？

回答 1

老师，密码强度实现不了，请帮我看下怎么修改吧

回答 1

老师，求那个换密码颜色的js代码怎么写的啊，没有头绪

回答 2

关于密码强度的正则表达式

回答 2

密码强度那块怎么做啊？不知道怎么写了

回答 3

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