老师，代码中有错误的地方，确认密码为空时没有显示出提示信息，注册按钮总是弹出请填写正确信息
来源：2-25 项目作业
一心励志当码农
2021-06-02 21:13:41
<!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>Document</title>
<style>
.box {
width: 900px;
height: 300px;
border: 2px solid orange;
border-radius: 10px;
position: relative;
}
.Field {
position: relative;
top: 10px;
left: 70px;
}
.star {
color: red;
}
#nameWaring {
color: orange;
margin-left: 10px;
}
#pwdWaring {
position: absolute;
right: 322px;
display: none;
}
.input {
margin-left: 10px;
height: 22px;
border: 1px solid gray;
border-radius: 4px;
}
#username {
margin-left: 15px;
}
.smallbox {
border: 3px solid gray;
width: 40px;
position: absolute;
opacity: 0.5;
}
#smallbox1 {
top: 88px;
left: 363px;
}
#smallbox2 {
top: 88px;
left: 417px;
}
#smallbox3 {
top: 88px;
left: 471px;
}
#waring1,#waring2,#waring3 {
display: none;
}
button {
width: 230px;
height: 35px;
background-color: rgb(255, 102, 0);
color: white;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 50px;
left: 200px;
border: none;
border-radius: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">
<p class="Field">
<span class="star">*</span>
用 户 名 :
<input type="text" placeholder="用户名设置后不可修改" class="input" id="username">
<span id="nameWaring">6-30位字母、数字或"_",字母开头</span>
</p>
<p class="Field">
<span class="star">*</span>
登录密码 :
<input type="text" placeholder="6-20位字母或数字" class="input" id="password">
<div class="smallbox" id="smallbox1"></div>
<div class="smallbox" id="smallbox2"></div>
<div class="smallbox" id="smallbox3"></div>
</p>
<p class="Field">
<span class="star">*</span>
确认密码 :
<input type="text" placeholder="再次输入您的登录密码" class="input" id="pwdAgain">
<span id="waring1">输入框不能为空</span>
<span id="waring2">两次密码输入不一致，请重新输入</span>
<span id="waring3">两次输入一致</span>
</p>
<button id="btn">注册</button>
</div>
<script>
var username = document.getElementById('username');
var password = document.getElementById('password');
var pwdAgain = document.getElementById('pwdAgain');
var btn = document.getElementById('btn');
var nameWaring = document.getElementById('nameWaring');
var pwdWaring = document.getElementById('pwdWaring');
var smallbox1 = document.getElementById('smallbox1');
var smallbox2 = document.getElementById('smallbox2');
var smallbox3 = document.getElementById('smallbox3');
var waring1 = document.getElementById('waring1');
var waring2 = document.getElementById('waring2');
var waring3 = document.getElementById('waring3');
username.onblur = function () {
var name = username.value;
if (/^[a-zA-Z]\w{6,30}$/.test(name)) {
nameWaring.innerText = '用户名输入正确';
nameWaring.style.color = 'green';
} else {
nameWaring.innerText = '6-30位字母、数字或"_",字母开头';
nameWaring.style.color = 'red';
}
};
password.onblur = function () {
var pwd = password.value;
var regexp1 = /^[a-z]{6,20}$|^[A-Z]{6,20}$|^[0-9]{6,20}$/;
var regexp2 = /^[a-zA-Z]{6,20}$|^[a-z0-9]{6,20}$|^[A-Z0-9]{6,20}$/;
var regexp3 = /^[a-zA-Z0-9]{6,20}$/;
if (regexp1.test(pwd)){
smallbox1.style.borderColor = 'red';
smallbox1.style.opacity ='1';
smallbox2.style.borderColor = 'gray';
smallbox3.style.borderColor = 'gray';
} else if (regexp2.test(pwd)){
smallbox1.style.borderColor = 'red';
smallbox1.style.opacity = '1';
smallbox2.style.borderColor = 'yellow';
smallbox2.style.opacity = '1';
smallbox3.style.borderColor = 'gray';
} else if (regexp3.test(pwd)){
smallbox1.style.borderColor = 'red';
smallbox1.style.opacity = '1';
smallbox2.style.borderColor = 'yellow';
smallbox2.style.opacity = '1';
smallbox3.style.borderColor = 'green';
smallbox3.style.opacity = '1';
} else {
smallbox1.style.borderColor = 'gray';
smallbox2.style.borderColor = 'gray';
smallbox3.style.borderColor = 'gray';
pwdWaring.style.color = 'red';
}
};
pwdAgain.onblur = function () {
var passwordAgain = pwdAgain.value;
var pwd = password.value;
if (passwordAgain == pwd){
waring3.style.display = 'inline';
waring1.style.display = 'none';
waring2.style.display = 'none';
waring3.style.color = 'green';
} else if (passwordAgain != pwd){
waring2.style.display = 'inline';
waring3.style.display = 'none';
waring1.style.display = 'none';
waring2.style.color = 'red';
} else if (passwordAgain == null){
waring1.style.display = 'inline';
waring2.style.display = 'none';
waring3.style.display = 'none';
waring1.style.color = 'red';
}
};
btn.onclick = function () {
var name = username.value;
var pwd = password.value;
var passwordAgain = pwdAgain.value;
if((/^[a-zA-Z]\w{6,30}$/.test(name)) && (/^[a-zA-Z0-9]{6,20}$/.test(pwd)) && (passwordAgain == pwd)){
alert('信息填写正确');
} else {
alert('请填写正确的信息');
}
};
</script>
</body>
</html>
写回答
1回答
-
同学你好，关于同学的疑问解答如下：
1、确认密码为空时没有显示提示信息：因为同学写的if语句中，会先判断确认密码框中输入的密码，与上面的密码输入框中的内容是否一致，当确认密码为空时，也会满足不一致的判断条件（即passwordAgain != pwd），因此会执行该判断条件中的语句，而不会执行为空时的判断条件，而且确认密码为空时，使用passwordAgain == null无法实现判断，建议参考如下代码修改：
2、注册按钮总是弹出请填写正确信息：因为用户名输入框中输入6位合法的用户名时，也会提示错误，如图
原因：同学写的正则表达式，验证位数书写有误，建议参考如下修改：
祝学习愉快！
0
相似问题