密码等级还是提示不对，是正则有问题还是if写错？
按照作业点评修改后，还是提示不出来高等级的，有时候输入一个密码，提示都不出现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>3-10作业题</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <!-- 导航 --> <div class="header"> <div class="header-content"> <div class="nav-left"> <i class="logo"></i> <span class="nav-txt1">慕课高铁客户服务中心</span> <span class="line"></span> <span class="nav-txt2">客户服务</span> </div> <div class="nav-right"> <div class="nav-txt-content"> <span class="nav-txt3">意见反馈</span> <span class="nav-txt4 txt-margin">imooc@com</span> <span class="nav-txt3">您好，请</span> <span class="nav-txt4">登录</span> <span class="nav-line2">|</span> <span class="nav-txt3 txt-margin">注册</span> </div> <div class="myimooc" id="myimooc"> <span class="nav-txt-myimooc txt-margin2">我的IMOOC</span> <div class="xiala"></div> <div class="myimooc-table" id="tablelist1"> <ul> <li>未完成订单</li> <li class="bottom-line">已完成订单（改/退）</li> <li class="bottom-line">我的保险</li> <li>查看个人信息</li> <li class="bottom-line">账户安全</li> <li class="bottom-line">常用联系人</li> <li>重点旅客预约</li> <li class="bottom-line">遗失物品查找</li> <li class="bottom-line">服务查询</li> <li>投诉</li> <li>建议</li> </ul> </div> </div> <div class="iphone"> <i class="iphone-img"></i> <span class="nav-txt-iphone">手机版</span> </div> </div> </div> </div> <!-- 内部表单 --> <div class="body"> <div class="body-content"> <span class="bread-text">您现在的位置： <span>客运首页>注册</span> </span> <div class="from-body"> <div class="from-title">账户信息</div> <div class="from-content"> <div class="from-mate"> <span class="from-txt"> <span class="red-star">*</span>用户名</span>: <input type="text" class="input-type" id="username" placeholder="用户名设置成功后不可修改 "> <span class="tips "></span> </div> <div class="from-mate "> <span class="from-txt "><span class="red-star ">*</span>登录密码</span>: <input type="password" class="input-type " id="password" placeholder="6-20位字母、数字或符号 "> <div class="level"></div> <div class="level"></div> <div class="level"></div> <span class="tips pwd"></span> </div> <div class="from-mate "> <span class="from-txt "> <span class="red-star ">*</span>确认密码 </span>: <input type="password" class="input-type" id="cpassword" placeholder="再次输入您的登录密码 "> <span class="tips "></span> </div> <div class="from-mate-name"> <span class="from-txt "> <span class="red-star ">*</span>姓名</span>: <input type="text " class="input-type " id="name" placeholder="请输入姓名 "> <span class="namerule" id="namerule"> <a href="javascript:;">姓名填写规则</a> </span> <div class="ruletxt" id="ruletxt"> <p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p> <p> 2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。 </p> <p>3.姓名中有繁体字无法输入时，可用简体替代。</p> <p> 4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</p> </div> <span class="tips nametip"></span> </div> <div class="from-mate "> <span class="from-txt "> <span class="red-star ">*</span>证件类型</span>: <select name=" " id=" " class="select-type "> <option value=" " selected>二代身份证</option> <option value=" ">港澳通行证</option> <option value=" ">台湾通行证</option> <option value=" ">护照</option> </select> </div> <div class="from-mate "> <span class="from-txt "> <span class="red-star ">*</span>证件号码</span>: <input type="text " class="input-type" id="cardnumber" placeholder="请输入您的证件号码 "> <span class="tips "></span> </div> <div class="from-mate "> <span class="from-txt "> 邮箱地址</span>: <input type="text " class="input-type " id="email" placeholder="请正确填写邮箱地址 "> <span class="tips "></span> </div> <div class="from-mate "> <span class="from-txt "> <span class="red-star ">*</span>手机号码</span>: <input type="text " class="input-type " id="phonenumber" placeholder="请输入您的手机号码 "> <span class="tips "></span> </div> <div class="from-mate "> <span class="from-txt "> <span class="red-star ">*</span>旅客类型</span>: <select name=" " id=" " class="select-type "> <option value=" " selected>成人</option> <option value=" ">儿童</option> <option value=" ">学生</option> <option value=" ">残疾军人</option> <option value=" ">伤残人民警察</option> </select> </div> <div class="readcheck-box "> <input type="checkbox" id="checkboxread"><span>我已阅读并同意遵守<span>《中国铁路客户服务中心网站服务条款》</span> </span> </div> <button class="btn-next " id="btnNext">下一步</button> </div> </div> </div> </div> <!-- 底部 --> <div class="footer "> <div class="footer-txt "> <span><a href=" ">关于我们</a> </span> <span>|</span> <span><a href=" ">网站声明</a> </span> <p>Copyright©2017 imooc.com All Right Reserved | 京ICP备13046642号-2</p> </div> </div> <script type="text/javascript " src="js/index.js "></script> </body> </html>
* {
padding: 0;
margin: 0;
}
/* 导航 */
.header {
width: 100%;
height: 125px;
background-color: #efefef;
border-bottom: 2px solid #2487c9;
}
.footer {
width: 100%;
height: 110px;
background-color: #dcdcdc;
border-top: 2px solid #2487c9;
position: relative;
}
.header-content {
width: 1260px;
height: 125px;
margin: 0 auto;
position: relative;
}
/* 导航左侧 */
.logo {
display: block;
width: 120px;
height: 120px;
background: url(../img/logo.png) no-repeat;
position: absolute;
top: 5px;
left: -10px;
cursor: pointer;
}
.nav-txt1 {
font-size: 30px;
line-height: 125px;
margin-left: 100px;
color: #333;
margin-right: 10px;
cursor: pointer;
}
.line {
display: inline-block;
width: 3px;
height: 36px;
background: #333;
position: absolute;
top: 45px;
}
.nav-txt2 {
line-height: 125px;
font-size: 18px;
color: #666;
margin-left: 15px;
cursor: pointer;
}
.nav-left {
float: left;
}
/* 导航右侧 */
.nav-right {
float: right;
}
.nav-txt3 {
font-size: 18px;
color: #333;
line-height: 125px;
cursor: pointer;
}
.nav-txt3:hover {
color: #fb7403;
}
.nav-txt-iphone {
font-size: 18px;
color: #333;
line-height: 125px;
}
.nav-txt-iphone:hover {
color: #fb7403;
}
.nav-txt-myimooc {
font-size: 18px;
color: #333;
line-height: 125px;
}
.nav-txt-myimooc:hover {
color: #fb7403;
}
.nav-txt4 {
font-size: 18px;
color: #fb7403;
line-height: 125px;
cursor: pointer;
}
.txt-margin {
margin-right: 15px;
}
.nav-line2 {
margin-left: 5px;
margin-right: 5px;
}
.iphone-img {
display: block;
width: 18px;
height: 24px;
background: url(../img/iphone.png) no-repeat;
background-size: 18px 24px;
position: absolute;
top: 50px;
left: -22px;
}
.xiala {
position: absolute;
top: 55px;
left: 100px;
margin-left: 10px;
float: right;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.myimooc {
position: absolute;
right: 130px;
cursor: pointer;
}
.iphone {
position: absolute;
right: 0px;
cursor: pointer;
}
.nav-txt-content {
float: left;
margin-right: 250px;
}
/* 底部 */
.footer-txt {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -25px;
}
a {
text-decoration: none;
}
.footer-txt>p {
margin-top: 15px;
}
/* 内部表单 */
.body {
width: 100%;
height: 800px;
}
.body-content {
width: 1260px;
height: 800px;
margin: 0 auto;
position: relative;
padding-top: 50px;
}
.bread-text {
position: absolute;
left: 0px;
top: 10px;
font-size: 20px;
}
.bread-text>span {
color: #666;
}
.from-body {
height: 630px;
border: 1px solid #fb7403;
border-radius: 12px;
}
.from-title {
height: 44px;
background-color: #fb7403;
border-radius: 12px 12px 0px 0px;
line-height: 44px;
color: #fff;
padding-left: 20px;
}
.red-star {
color: red;
}
.input-type {
width: 210px;
margin-left: 10px;
vertical-align: middle;
}
.select-type {
width: 210px;
margin-left: 10px;
vertical-align: middle;
}
.from-txt {
display: inline-block;
width: 80px;
text-align: justify;
height: 30px;
line-height: 30px;
}
/*
.from-txt::after {
content: '';
display: inline-block;
width: 100%;
} */
.btn-next {
width: 230px;
height: 40px;
color: #fff;
background-color: #fb7403;
border: none;
border-radius: 4px;
margin-left: 120px;
margin-top: 20px;
}
.from-content {
position: absolute;
left: 350px;
top: 150px
}
.from-mate {
margin-bottom: 15px;
}
.readcheck-box {
margin-left: 100px;
}
.pwd {
display: block;
margin-left: 100px;
}
.nametip {
display: block;
margin-left: 100px;
}
.level {
width: 50px;
height: 10px;
display: inline-block;
background: #dfdfdf;
margin-right: 4px;
}
.namerule>a {
color: #fb7403;
text-decoration: underline;
}
/* 姓名规则样式 */
.from-mate-name {
position: relative;
}
.ruletxt {
width: 450px;
height: 350px;
background: #fff;
border: 1px solid #2487c9;
position: absolute;
left: 420px;
display: none;
}
.ruletxt>p {
margin: 15px;
}
/* 慕课弹框 */
.myimooc-table {
width: 185px;
height: 365px;
background: #fff;
border: 1px solid #fb7403;
position: absolute;
top: 80px;
z-index: 2;
display: none;
}
.myimooc-table>ul {
list-style: none;
/* margin-top: 20px;
margin-left: 20px; */
margin: 15px;
}
.myimooc-table>ul>li {
text-align: left;
height: 30px;
line-height: 30px;
color: #666;
}
.myimooc-table>ul>li:hover {
color: #fb7403;
}
.bottom-line {
border-bottom: 1px dashed #999;
}var tips = document.getElementsByClassName("tips"); //获取span提示语标签
// 各个输入框的dom获取
var userName = document.getElementById("username"),
name1 = document.getElementById("name"),
cardNumber = document.getElementById("cardnumber"),
email = document.getElementById("email"),
phoneNumber = document.getElementById("phonenumber"),
pwd = document.getElementById("password"),
confirmPwd = document.getElementById("cpassword"),
level = document.getElementsByClassName("level"),
checkboxread = document.getElementById("checkboxread"),
btnNext = document.getElementById("btnNext");
//姓名输入提示的dom获取
var nameRule = document.getElementById("namerule"),
ruleTxt = document.getElementById("ruletxt");
//我的慕课下拉
var myImooc = document.getElementById("myimooc"),
imoocList = document.getElementById("tablelist1");
// 验证信息
var text1 = false,
text2 = false,
text3 = false,
text4 = false,
text5 = false,
text6 = false,
text7 = false,
text8 = false;
//慕课下拉交互
myImooc.onmousemove = function() {
imoocList.style.display = "block";
}
myImooc.onmouseout = function() {
imoocList.style.display = "none";
}
imoocList.onmouseout = function() {
imoocList.style.display = "none";
}
//姓名提示交互
nameRule.onmousemove = function() {
ruleTxt.style.display = "block";
}
nameRule.onmouseout = function() {
ruleTxt.style.display = "none";
}
// 用户名输入提示
userName.onblur = function() {
text1 = false;
var reg = /^[a-zA-Z]\w{5,29}$/;
if (reg.exec(this.value)) {
tips[0].innerHTML = "用户名输入正确";
tips[0].style.color = "green";
text1 = true;
} else {
tips[0].innerHTML = "6-30位字母、数字或'_'，字母开头";
tips[0].style.color = "red";
}
}
// 用户名输入提示2
userName.onfocus = function() {
tips[0].innerHTML = "6-30位字母、数字或'_'，字母开头";
tips[0].style.color = "orange";
}
//密码提示
pwd.onblur = function() {
var reg1 = /^[^\s]{6,18}$/;
var reg2 = /^[0-9]{6,18}$|^[a-zA-Z]{6,18}$|^\W{6,18}$/;
var reg3 = /^[0-9|a-z]{6,18}$|^[\W|a-z]{6,18}$|^[\W|0-9]{6,18}$/;
var reg4 = /^\W[0-9a-zA-Z]$/;
//有问题
text2 = false;
if (reg1.exec(this.value)) {
if (reg2.exec(this.value)) {
tips[1].innerHTML = "密码强度为低";
tips[1].style.color = "orange";
level[0].style.background = "red";
level[1].style.background = "#dfdfdf";
level[2].style.background = "#dfdfdf";
text2 = true;
} else if (reg3.exec(this.value)) {
tips[1].innerHTML = "密码强度为一般";
tips[1].style.color = "orange";
level[0].style.background = "red";
level[1].style.background = "orange";
level[2].style.background = "#dfdfdf";
text2 = true;
} else if (reg4.exec(this.value)) {
tips[1].innerHTML = "密码强度为高";
tips[1].style.color = "orange";
level[0].style.background = "red";
level[1].style.background = "orange";
level[2].style.background = "green";
text2 = true;
}
} else {
tips[1].innerHTML = "6-20位字母、数字或符号";
tips[1].style.color = "red";
}
}
//确认密码提示
confirmPwd.onblur = function() {
text3 = false;
if (this.value == "") {
tips[2].innerHTML = "输入框不能为空";
tips[2].style.color = "red";
} else {
if (this.value == pwd.value) {
tips[2].innerHTML = "两次输入一致";
tips[2].style.color = "green";
text3 = true;
} else {
tips[2].innerHTML = "两次密码输入不一致，请重新输入";
tips[2].style.color = "red";
}
}
}
// 姓名输入提示语
name1.onblur = function() {
var reg = /^[\u4e00-\u9fa5]{2,15}$|^[a-zA-Z]{3,30}$/;
text4 = false;
if (reg.exec(this.value)) {
tips[3].innerHTML = "姓名输入正确";
tips[3].style.color = "green";
text4 = true;
} else {
tips[3].innerHTML = "姓名只能包含中文或者英文,且字符在3-30个之间";
tips[3].style.color = "red";
}
}
//证件号码提示语
cardNumber.onblur = function() {
var reg = /^\d{17}[\dx]$/i;
text5 = false;
if (reg.exec(this.value)) {
tips[4].innerHTML = "号码输入正确";
tips[4].style.color = "green";
text5 = true;
} else {
tips[4].innerHTML = "请输入18位身份证号码";
tips[4].style.color = "red";
}
}
// 邮箱地址提示语
email.onblur = function() {
var reg = /^\w+@\w+(?:\.[a-zA-Z]{2,3}){1,2}$/;
text6 = false;
if (reg.exec(this.value)) {
tips[5].innerHTML = "邮箱格式正确";
tips[5].style.color = "green";
text6 = true;
} else {
tips[5].innerHTML = "请输入正确的邮箱";
tips[5].style.color = "red";
}
}
//手机号码提示语
phoneNumber.onblur = function() {
var reg = /^1[3458]\d{9}$/;
text7 = false;
if (reg.exec(this.value)) {
tips[6].innerHTML = "手机格式正确";
tips[6].style.color = "green";
text7 = true;
} else {
tips[6].innerHTML = "您输入的手机号码不是有效的格式！";
tips[6].style.color = "red";
}
}
//手机号码提示语2
phoneNumber.onfocus = function() {
tips[6].innerHTML = "请正确填写手机号码，稍后将向该手机号码发送短信验证码";
tips[6].style.color = "orange";
}
checkboxread.onclick = function() {
text8 = false;
if (this.checked) {
text8 = true;
}
}
btnNext.onclick = function() {
if (text1 == false || text2 == false || text3 == false || text4 == false ||
text5 == false || text6 == false || text7 == false || text8 == false) {
alert("输入有误");
} else {
return window.location.href = "https://www.imooc.com/";
}
}16
收起
正在回答
1回答
同学你好，批复文档没有问题，老师看了同学修改的代码，同学最后一个验证规则与批复文档中给出示例不一样，导致无法提示高等级。建议参考批复文档修改：
老师将密码框的type类型修改为text，方便同学查看测试效果，示例：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星