老师确认密码没有显示提示为空
来源：2-25 项目作业
DB1时间的玫瑰
2021-08-10 14:28:12
<!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;
display: none;
}
.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;
}
.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: 8px;
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"></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 confirmPassWarning = document.getElementById('confirmPassWarning');
// 按钮
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;
// 第一次校验密码是否符合要求
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 = '#ccc';
greenPassWordWarning.style.backgroundColor = '#ccc';
} 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 = '#ccc';
} else {
redPassWordWarning.style.backgroundColor = 'red';
orangePassWordWarning.style.backgroundColor = 'orange';
greenPassWordWarning.style.backgroundColor = '#ccc';
}
} else {
// 没有通过,显示文字提示信息
userPasswordWarning.innerText = '6-20位字母、数字';
userPasswordWarning.style.display = 'inline-block';
// 密码强度提示框隐藏
redPassWordWarning.style.display = 'none';
orangePassWordWarning.style.display = 'none';
greenPassWordWarning.style.display = 'none';
}
};
// 再次输入密码
confirmPass.onblur = function () {
// 得到再次输入的密码
var twopassword = confirmPass.value;
// 与前一次输入的密码进行判断
if (twopassword == null) {
// 如果为空，那么后面给出文字提示“输入框不能为空”
confirmPassWarning.innerText = '输入框不能为空';
confirmPassWarning.stylele.color = 'red';
confirmPassWarning.style.display = 'inline-block';
} else if (twopassword == userPassword.value ) {
// 如果输入的密码跟上面一致，则提示“两次输入一致”
confirmPassWarning.innerText = '两次输入一致';
confirmPassWarning.style.display = 'inline-block';
} else {
// 输入的密码跟上面的密码不一致，则提示“两次密码输入不一致，请重新输入”
confirmPassWarning.innerText = '两次密码输入不一致，请重新输入';
confirmPassWarning.stylele.color = 'red';
confirmPassWarning.style.display = 'inline-block';
}
};
</script>
</body>
</html>
1回答
-
同学你好，输入框为空值为空字符串，而不是null ，所以代码判断的有问题
另外代码中还有其他问题：
1、确认密码中style属性写的不对，多了le，参考修改
当密码输入一致时，可以将字体颜色变为绿色
2、密码处，当输入条件满足else，也就是三种字符的时候，最后一个span需要是绿色的。参考修改
自己再把最后点击按钮后的效果添加上就好了，祝学习愉快！
0
相似问题