密码强度提示没有显示出来，老师帮忙看一下
来源：2-25 项目作业
DB1时间的玫瑰
2021-08-10 10:46:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完成注册功能</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1200px;
margin: 20px auto;
}
.box .warning {
font-size: 18px;
}
.box1,
.box2,
.box3 {
margin-top: 20px;
margin-left: 50px;
font-size: 30px;
}
.box1 b,
.box2 b,
.box3 b {
color: red;
}
.box1 p,
.box2 p,
.box3 p {
position: relative;
top: -42px;
left: 19px;
}
.box1 input,
.box2 input,
.box3 input {
width: 200px;
height: 30px;
padding-left: 5px;
}
.box1 .warning {
color: red;
display: none;
}
.box4 button {
width: 200px;
height: 40px;
margin-left: 150px;
background-color: orange;
color: white;
text-align: center;
line-height: 40px;
font-size: 18px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="box" class="box">
<div class="box1">
<b>*</b>
<p>
用户名:
<input type="text" id="userName" placeholder="用户名设置完成不可修改">
<span class="warning" id="userWarning">6-30位字母、数字或’_’，字母开头</span>
</p>
</div>
<div class="box2">
<b>*</b>
<p>
登录密码:
<input type="password" id="userPassword" placeholder="6-20位字母或者数字">
<span class="warning" id="redPassWordWarning"></span>
<span class="warning" id="orangePassWordWarning"></span>
<span class="warning" id="greenPassWordWarning"></span>
<span class="warning" id="userPasswordWarning">6-20位字母或者数字</span>
</p>
</div>
<div class="box3">
<b>*</b>
<p>
确认密码:
<input type="password" id="confirmPass" placeholder="再次输入你的登录密码">
<span class="warning" id="confirmPassWarning">两次输入一致</span>
</p>
</div>
<div class="box4">
<button id="btn">注册</button>
</div>
</div>
<script>
// 得到元素
var box = document.getElementById('box');
var userName = document.getElementById('userName');
var userWarning = document.getElementById('userWarning');
var userPassword = document.getElementById('userPassword');
var redPassWordWarning = document.getElementById('redPassWordWarning');
var orangePassWordWarning = document.getElementById('orangePassWordWarning');
var greenPassWordWarning = document.getElementById('greenPassWordWarning');
var userPasswordWarning = document.getElementById('userPasswordWarning');
var confirmPass = document.getElementById('confirmPass');
var btn = document.getElementById('btn');
// 当文本框失去焦点，即光标不在文本框中了
// 用户名
userName.onblur = function () {
// 得到用户名
var name = userName.value;
// 校验是否通过
if (/^[a-zA-Z]\w{5,29}$/.test(name)) {
// 通过校验
userWarning.innerText = '用户输入正确';
userWarning.style.color = 'green';
userWarning.style.display = 'inline';
} else {
// 没有通过
userWarning.innerText = '6-30位字母、数字或’_’，字母开头';
userWarning.style.color = 'red';
userWarning.style.display = 'inline';
}
};
//密码
userPassword.onblur = function () {
// 得到密码
var password = userPassword.value;
redPassWordWarning.style.backgroundColor = '#ccc';
// 第一次校验是否通过验证
if (/^[a-zA-Z0-9]{6,20}$/.test(password)) {
// 通过校验,判断密码等级
if (/^[0-9]{6,20}$|^[a-z]{6,20}$|^[A-Z]{6,20}$/.test(password)) {
redPassWordWarning.style.backgroundColor = 'red';
} else if (/^[0-9a-z]{6,20}$|^[0-9A-Z]{6,20}$|^[a-zA-Z]{6,20}$/.test(password)) {
redPassWordWarning.style.backgroundColor = 'red';
orangePassWordWarning.style.backgroundColor = 'orange';
} else {
redPassWordWarning.style.backgroundColor = 'red';
orangePassWordWarning.style.backgroundColor = 'orange';
greenPassWordWarning.style.backgroundColor = 'green';
}
} else {
// 没有通过
userPasswordWarning.innerText = '6-20位字母、数字';
redPassWordWarning.style.backgroundColor = 'red';
orangePassWordWarning.style.backgroundColor = 'none';
greenPassWordWarning.style.backgroundColor = 'none';
}
};
</script>
</body>
</html>
1回答
-
同学你好，针对你的问题解答如下：
因为用来表示密码强度提示的span元素是行内元素，默认是没有宽高的，所以直接设置背景色无法显示。建议参考下面的思路调整：
1、给密码强度提示元素设置宽高，默认是隐藏状态
2、通过验证的时候，隐藏文字提示信息，让密码提示框显示出来，设置对应的背景颜色即可，如下：
3、没有通过验证时，隐藏密码强度提示，让文字提示信息显示，如下：
祝学习愉快~
0
相似问题
回答 1