Javascript字段验证代码不工作

Question

这段代码不能工作。如果邮箱和密码为空，则显示"请输入您的邮箱和密码";如果只是email为空，则显示"请输入您的email";如果只是password为空，则显示"请输入您的密码"。如果不为空，则不显示错误信息。然而，这就是这段代码背后的功能。这行不通。发生什么事情了?代码:

<script type='text/javascript'>

var loginEmail = document.getElementById('ema');
var loginPassword = document.getElementById('pswd');
var loginBtn = document.getElementById('loginBtn');
var loginError = document.getElementById('loginError');

loginBtn.addEventListener("click", function(e) {
e.preventDefault();
if(loginEmail.value === "" || loginPassword.value === "") {
loginError.style.visibility = 'visible';
loginError.innerText = "Please enter your email and password.";
} else if (loginEmail.value === "" && loginPassword.value.length > 0) {
loginError.style.visibility = 'visible';
loginError.innerText = "Please enter your email.";
} else if (loginPassword.value === "" && loginEmail.value.length > 0) {
loginError.style.visibility = 'visible';
loginError.innerText = "Please enter your password.";
} else {
loginError.style.visibility = 'hidden';
}
});

</script>

Answer 1

问题是第一个if的表达式。您想要显示"请输入您的电子邮件和密码";如果两个字段都为空，但是您正在使用逻辑或||。通过逻辑和&&,else ifs的表达式可以简化为:

var loginEmail = document.getElementById('ema');
var loginPassword = document.getElementById('pswd');
var loginBtn = document.getElementById('loginBtn');
var loginError = document.getElementById('loginError');
loginBtn.addEventListener("click", function(e) {
e.preventDefault();
if(loginEmail.value === "" && loginPassword.value === "") {
loginError.style.visibility = 'visible';
loginError.innerText = "Please enter your email and password.";
} else if (loginEmail.value === "") {
loginError.style.visibility = 'visible';
loginError.innerText = "Please enter your email.";
} else if (loginPassword.value === "") {
loginError.style.visibility = 'visible';
loginError.innerText = "Please enter your password.";
} else {
loginError.style.visibility = 'hidden';
}
});

<input type="text" id="ema">
<input type="password" id="pswd">
<button id="loginBtn">Login</button>
<div id="loginError" style="visibility: hidden">
</div>