老师,修改过后,密码强度还是没有出现
来源:2-25 项目作业
DB1时间的玫瑰
2021-08-10 11:49:22
<!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;
}
.redPassWordWarning,
.orangePassWordWarning,
.greenPassWordWarning {
width: 40px;
height: 4px;
display: none;
}
</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"></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';
orangePassWordWarning.style.backgroundColor = '#ccc';
greenPassWordWarning.style.backgroundColor = '#ccc';
// 第一次校验密码是否符合要求
if (/^[a-zA-Z0-9]{6,20}$/.test(password)) {
// 通过第一次校验后,判断密码等级并隐藏文字提示信息
userPasswordWarning.style.display = 'none';
// 设置密码强度提示框display属性为inline-block,让其一排显示
redPassWordWarning.style.display = 'inline-block';
orangePassWordWarning.style.display = 'inline-block';
greenPassWordWarning.style.display = 'inline-block';
if (/^[0-9]{6,20}$|^[a-z]{6,20}$|^[A-Z]{6,20}$/.test(password)) {
redPassWordWarning.style.backgroundColor = 'red';
// 设置其他框为灰色
orangePassWordWarning.style.backgroundColor = 'gray';
greenPassWordWarning.style.backgroundColor = 'gray';
} 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';
greenPassWordWarning.style.backgroundColor = 'gray';
} else {
redPassWordWarning.style.backgroundColor = 'red';
orangePassWordWarning.style.backgroundColor = 'orange';
greenPassWordWarning.style.backgroundColor = 'green';
}
} else {
// 没有通过,显示文字提示信息
userPasswordWarning.innerText = '6-20位字母、数字';
userPasswordWarning.style.display = 'inline-block';
// 密码强度提示框隐藏
redPassWordWarning.style.display = 'none';
orangePassWordWarning.style.display= 'none';
greenPassWordWarning.style.display = 'none';
}
};
</script>
</body>
</html>
1回答
同学你好,这是因为给实现密码强度的元素设置的CSS样式没有生效,而样式没有生效是因为css选择器的问题:redPassWordWarning、orangePassWordWarning和greenPassWordWarning,这些值是id属性的值,不是class属性的值,应该使用#开头的id选择器选中这些元素施加样式,参考如下:
祝学习愉快!
相似问题