老师，密码强度实现不了，请帮我看下怎么修改吧
来源：3-10 作业题
super星光
2019-11-12 22:57:36
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Index</title> <link rel="stylesheet" href="styles/index.css"> </head> <body> <!--头部--> <header> <div id="header_wrap"> <div id="header_wrap_left"> <a href="javascript:void(0)" id="logo"></a> <h1>慕课高铁客户服务中心 | <a href="javascript:void(0);">客户服务</a></h1> </div> <div id="header_wrap_right"> <p>意见反馈 <a href="javascript:void(0);">imooc@com</a> 您好，请 <a href="javascript:void(0);">登录</a> | <a href="javascript:void(0);">注册</a></p> <div id="menu_box"> <b id="my_imooc">我的IMOOC ▼</b> <!--下拉列表--> <div id="order_list"> <div class="content content_one"> <a href="javascript:void(0);">未完成订单</a><br> <a href="javascript:void(0);">已完成订单 ( 改/退 )</a> </div> <div class="content content_two"> <a href="javascript:void(0);">我的保险</a> </div> <div class="content content_three"> <a href="javascript:void(0);">查看个人信息</a><br> <a href="javascript:void(0);">账户安全</a> </div> <div class="content content_four"> <a href="javascript:void(0);">常用联系人</a> </div> <div class="content content_five"> <a href="javascript:void(0);">重点旅客预约</a><br> <a href="javascript:void(0);">遗失物品查找</a> </div> <div class="content content_six"> <a href="javascript:void(0);">服务查询</a> </div> <div class="content content_seven"> <a href="javascript:void(0);">投诉</a><br> <a href="javascript:void(0);">建议</a> </div> </div> </div> <div id="phone_icon">手机版</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 action="" method="get"> <div class="item"> <span class="important">*</span> <label for="user_account">用 户 名 :</label> <input type="text" id="user_account" placeholder=" 用户设置成功后不可修改"> <p class="item_"></p> </div> <div class="item"> <span class="important">*</span> <label for="password">登陆密码 :</label> <input type="text" id="password" placeholder=" 6-20为字母，数字或符号"> <span class="password_line"></span> <span class="password_line"></span> <span class="password_line"></span> <p class="item_" id="password-item_"></p> </div> <div class="item"> <span class="important">*</span> <label for="password_">确认密码 :</label> <input type="text" id="password_" placeholder=" 再次输入您的登陆密码"> <p class="item_"></p> </div> <div class="item"> <span class="important">*</span> <label for="userName">姓 名 :</label> <input type="text" id="user_name" placeholder=" 请输入姓名"> <p class="item_"></p> </div> <div class="item"> <span class="important">*</span> <label for="id_type">证件类型 :</label> <select name="id_type" id="id_type"> <option value="二代身份证">二代身份证</option> <option value="港澳通行证">港澳通行证</option> <option value="台湾通行证">台湾通行证</option> <option value="护照">护照</option> </select> </div> <div class="item"> <span class="important">*</span> <label for="id_number">证件号码 :</label> <input type="text" id="id_number" placeholder=" 请输入您的证件号码"> <p class="item_"></p> </div> <div class="item"> <span class="important"> </span> <label for="email">邮 箱 :</label> <input type="email" id="email" placeholder=" 请正确填写邮箱地址"> <p class="item_"></p> </div> <div class="item"> <span class="important">*</span> <label for="phone_number">手机号码 :</label> <input type="text" id="phone_number" placeholder=" 请输入您的手机号码"> <p class="item_"></p> </div> <div class="item"> <span class="important">*</span> <label for="user_type">旅客类型 :</label> <select name="user_type" id="user_type"> <option value="成人">成人</option> <option value="学生">学生</option> <option value="残疾军人">残疾军人</option> <option value="伤残人民警察">伤残人民警察</option> </select> </div> <div class='end' id="end"> <input type="checkbox" id="choose"> <label for="choose">我已阅读并同意遵守<a href="javascript:void(0);">《中国铁路客户服务中心网站服务条款》</a></label> </div> <div class="submit"><input id="submit" type="submit" value="下一步"></div> </form> </div> </div> <!--页脚--> <footer> <p id="footer_text_top">关于我们|网站声明</p> <p id="footer_text_bottom">Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p> </footer> <script type="text/javascript" src="javascripts/index.js"></script> </body> </html>
*{margin:0; padding:0;}
a{text-decoration:none;}
/*头部*/
header{background:rgb(239,239,239); 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(../imgs/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:rgb(102,102,102); font-size:16px; line-height:;}
#header_wrap_left h1 a:hover{color:rgb(251,116,3); font-size: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_icon{float:left;}
#header_wrap_right a{color:rgb(102,102,102);}
#header_wrap_right a:hover{color:rgb(251,116,3);}
#header_wrap_right #menu_box{float:left; margin-left:22px; position:relative;}
#header_wrap_right #menu_box #my_imooc:hover{color:rgb(251,116,3);}
#header_wrap_right #order_list{width:152px; position:absolute; 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;}
#header_wrap_right #order_list .content{padding:0 13px 0; border-bottom:dotted 1px rgb(128,128,128);}
#header_wrap_right #order_list .content:last-child{border-bottom:none;}
#header_wrap_right #order_list .content a{color:rgb(128,128,128);}
#header_wrap_right #order_list .content a:hover{color:rgb(251,116,3);}
#header_wrap_right #phone_icon{margin-left:48px; padding-left:22px; background:url(../imgs/未标题-1.png) no-repeat left center;
background-size:18px 24px;}
/*主体*/
#main{width:1260px; margin:0 auto;}
#main_header{font-size:20px; margin:18px 0;}
#main_header span{color:rgb(144,144,144);}
#main #user_information{width:1260px; margin-bottom:127px; border:1px solid rgb(251,116,3); border-radius:5px;}
#main #user_information #user_information_header{background:rgb(251,116,3); height:44px; color:#fff; font-size:20px;
text-indent:16px; line-height:44px; border-radius:5px;}
#main #user_information form{margin:50px 0 78px 288px;}
#main #user_information .item{margin-bottom:16px;}
#main #user_information .item .important{color:rgb(251,116,3);}
#main #user_information .item input,#main #user_information .item 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 .item_{display:inline-block; margin-left:15px; font-size:14px;}
#main #user_information .item #password-item_{margin-left:0; display:block;}
#main #user_information #end{margin-left:106px; font-size:18px; line-height:18px;}
#main #user_information #end a{color:rgb(8,110,225);}
#main #user_information #submit{width:232px; height:38px; border:none; margin-left:129px; margin-top:66px; border-radius:5px;
background:rgb(251,116,3); color:#fff; font-size:18px; line-height:18px;}
/*页脚*/
footer{background:rgb(239,239,239); height:105px; border-top:2px solid rgb(36,135,201); font-size:16px; text-align:center; line-height:36px;
color:rgb(165,165,165);}
#footer_text_top{margin-top:15px;}//封装获取元素
function getEle(id){
return document.getElementById(id);
}
//提取全部元素放到对象里，避免全局变量暴露
var ele={
"myImooc":getEle("menu_box"),
"orderList":getEle("order_list"),
"userAccount":getEle("user_account"),
"password":getEle("password"),
"passwordLines":document.getElementsByClassName("password_line"),
"password_":getEle("password_"),
"userName":getEle("user_name"),
"idType":getEle("id_type"),
"idNumber":getEle("id_number"),
"email":getEle("email"),
"phoneNumber":getEle("phone_number"),
"userType":getEle("user_type"),
"choose":getEle("choose"),
"submit":getEle("submit"),
"items":document.getElementsByClassName("item_")
};
var input1=false,
input2=false;
//鼠标移入显示下拉列表
ele.myImooc.onmouseover=function(){
this.style.cursor="pointer";
ele.orderList.style.display="block";
};
//鼠标移除隐藏下拉列表
ele.myImooc.onmouseout=function(){
ele.orderList.style.display="none";
};
//当鼠标激活用户名输入框
ele.userAccount.onfocus=function(){
if(input1==false){
ele.items[0].innerHTML="请输入6-30位字母、数字或‘_’，字母开头";
ele.items[0].style.color="red";
}else{
ele.items[0].innerHTML="用户名输入正确";
}
};
//当鼠标离开用户名输入框，产生验证
ele.userAccount.onblur=function(){
var reg=/^[\w]{6,30}$/ig;
if(this.value==""){
ele.items[0].innerHTML="用户名不能为空";
ele.items[0].style.color="red";
}else if(!reg.test(this.value)){
ele.items[0].innerHTML="请输入6-30位字母、数字或‘_’，字母开头";
ele.items[0].style.color="red";
input1=false;
}else{
ele.items[0].innerHTML="用户名输入正确";
ele.items[0].style.color="green";
input1=true;
}
};
//当鼠标激活登录密码输入框
ele.password.onfocus=function(){
if(input2==false){
ele.items[1].innerHTML="请输入6-20位字母、数字或符号";
ele.items[1].style.color="red";
ele.passwordLines[0].style.background="rgb(221,221,221)";
ele.passwordLines[1].style.background="rgb(221,221,221)";
ele.passwordLines[2].style.background="rgb(221,221,221)";
}else{
ele.items[1].innerHTML="";
}
};
//当鼠标离开登录密码输入框，产生验证
ele.password.onblur=function(){
//密码规则
var reg=/\S{6,20}/ig,
//密码强度弱
reg1=/^[0-9]{6,20}$|^[a-z]{6,20}|^\W{6,20}$/ig,
//密码强度中
reg2=/^[0-9|a-z]{6,20}$|^[\W|a-z]{6,20}$|^[\W|0-9]{6,20}$/ig,
//密码强度强
reg3=/^\W[0-9a-z]*$/ig;
if(this.value==""){
ele.items[1].innerHTML="密码不能为空";
ele.items[1].style.color="red";
}else if(reg.test(this.value)){
if(reg1.test(this.value)){
ele.passwordLines[0].style.background="red";
ele.passwordLines[1].style.background="rgb(221,221,221)";
ele.passwordLines[2].style.background="rgb(221,221,221)";
ele.items[1].innerHTML="";
input2==true;
}else if(reg2.test(this.value)){
ele.passwordLines[0].style.background="red";
ele.passwordLines[1].style.background="red";
ele.passwordLines[2].style.background="rgb(221,221,221)";
ele.items[1].innerHTML="";
input2==true;
}else if(reg3.test(this.value)){
ele.passwordLines[0].style.background="red";
ele.passwordLines[1].style.background="red";
ele.passwordLines[2].style.background="red";
ele.items[1].innerHTML="";
input2==true;
}else{
ele.passwordLines[0].style.background="rgb(221,221,221)";
ele.passwordLines[1].style.background="rgb(221,221,221)";
ele.passwordLines[2].style.background="rgb(221,221,221)";
ele.items[1].innerHTML="请输入6-20位字母、数字或符号";
input2==false;
}
}
};写回答
1回答
-
同学你好，关于同学的问题解答如下：
1、我们先看同学的正则实现情况，密码规则和密码强度为中的正则是正确的，剩下的两个要稍微修改一下。参考：
2、当页面打开的时候，默认密码轻度为弱，即默认为红色，同学可以设置下第一个强度的颜色样式：
当符合相应的正则时，密码强度依次变色：
老师只是给同学实现了密码的正则和强度变化的效果，其余的样式没有给同学实现，同学自己实现下。在这给同学个提示，密码的提示内容不要跟右侧的密码强度共存：
即需要有提示文字时，就让密码强度隐藏，当符合密码规则且input输入框失去焦点时，就让文字提示隐藏。
3、姓名的正则不正确，必须以字母开头，正则参考：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题