这是我目前正在处理的一个注册表。问题是，JavaScript只验证表单中的第一个字段，即"用户名"。只有字段，其他部分不需要。如果我通过将密码字段移到上面来更改代码，则代码仅对密码进行验证。电子邮件地址字段也是如此。我可以知道如何解决这个问题吗?非常感谢你的帮助。我只在Eclipse IDE应用程序中出现此错误。但是，当这段代码在小提琴中完成时，它工作得很好。小提琴的代码在这个链接:https://jsfiddle.net/dbvnkcfm/5/.
请帮忙解决这个问题，因为我是JavaScript新手。
下面是我的Eclipse IDE中的代码。
@charset "ISO-8859-1";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #ECB365;
}
body,
input {
font-family: "Poppins", sans-serif;
}
.container {
position: relative;
width: 100%;
background-color: #041C32;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.login-signup {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
form.sign-up-form {
opacity: 0;
z-index: 1;
}
form.log-in-form {
z-index: 2;
}
.title {
font-size: 2.2rem;
color: #ECB365;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #ECB365;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #444444;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #041C32;
}
.input-field input::placeholder {
color: #444444;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #ECDBBA;
border-radius: 50%;
border: 1px solid #fff;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
}
.social-icon:hover {
color: #ECB365;
border-color: #ECB365;
}
.btn {
width: 150px;
background-color: #064663;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #4d84e2;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.container:before {
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #064663 0%, #064663 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
}
.image {
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent {
margin: 0;
background: #041C32;
/*border: 2px solid #fff;*/
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}
.btn.transparent:hover {
background-color: #4d84e2;
}
.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}
/* ANIMATION */
.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}
.container.sign-up-mode .login-signup {
left: 25%;
}
.container.sign-up-mode form.sign-up-form {
opacity: 1;
z-index: 2;
}
.container.sign-up-mode form.log-in-form {
opacity: 0;
z-index: 1;
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}
.container.sign-up-mode .left-panel {
pointer-events: none;
}
.container.sign-up-mode .right-panel {
pointer-events: all;
}
@media (max-width: 870px) {
.container {
min-height: 800px;
height: 100vh;
}
.login-signup {
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.login-signup,
.container.sign-up-mode .login-signup {
left: 50%;
}
.panels-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.panel {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.right-panel {
grid-row: 3 / 4;
}
.left-panel {
grid-row: 1 / 2;
}
.image {
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel .content {
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-size: 1.2rem;
}
.panel p {
font-size: 0.7rem;
padding: 0.5rem 0;
}
.btn.transparent {
width: 110px;
height: 35px;
font-size: 0.7rem;
}
.container:before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode:before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateY(-300px);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateY(0px);
}
.right-panel .image,
.right-panel .content {
transform: translateY(300px);
}
.container.sign-up-mode .login-signup {
top: 5%;
transform: translate(-50%, 0);
}
}
@media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
.image {
display: none;
}
.panel .content {
padding: 0.5rem 1rem;
}
.container {
padding: 1.5rem;
}
.container:before {
bottom: 72%;
left: 50%;
}
.container.sign-up-mode:before {
bottom: 28%;
left: 50%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Style.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="get">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon"> <i class="fab fa-facebook-f"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-twitter"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-google"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-linkedin-in"></i> </a>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" onSubmit="return Register()">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id = "emailAddress" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" class="btn" value="Sign up" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register()
{
return validation();
}
function validation()
{
var user = document.getElementById('user').value;
var emailAddress = document.getElementById('emailAddress').value;
var pass = document.getElementById('pass').value;
console.log(user)
if (user == null || user == "")
{
alert ("Username cannot be empty");
return false;
}
else if(user.length < 3 || user.length > 30)
{
alert ("Username must be at least 3 characters long.");
return false;
}
else
{
return true;
}
console.log(emailAddress)
if (emailAddress == null || emailAddress == "")
{
alert ("Email cannot be empty");
return false;
}
else if(emailAddress.indexOf('@') <= 0)
{
alert (" @ symbol is on invalid position");
return false;
}
else
{
document.getElementById('emailAddress').innerHTMl = "";
}
console.log(pass)
if (pass == null || pass == "")
{
alert ("Password cannot be empty");
return false;
}
else if(pass.length <= 4 || pass.length >= 20)
{
alert ("Password must be at least 4 characters long.");
return false;
}
else
{
document.getElementById('pass').innerHTMl = "";
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>您已经复制了IDs，所以当您使用return时，我也为注册表单中的每个ID添加's'。这应该对你有用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="post">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id="luser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id="lpass" class="text-danger" />
</div>
<br>
<input type="button" value="Login" class="btn solid" onclick="Register('login')" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon"> <i class="fab fa-facebook-f"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-twitter"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-google"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-linkedin-in"></i> </a>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" o>
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id="suser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id="semailAddress" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id="spass" class="text-danger" />
</div>
<br>
<input type="button" class="btn" value="Sign up" onclick="Register('signup')" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register(formType) {
return validation(formType);
}
function validation(formType) {
if (formType == "login") {
var user = document.getElementById("luser").value;
var pass = document.getElementById("lpass").value;
} else {
var user = document.getElementById("suser").value;
var pass = document.getElementById("spass").value;
var emailAddress = document.getElementById("semailAddress").value;
}
var errors = [];
// var user = document.getElementById('suser').value;
// var emailAddress = document.getElementById('semailAddress').value;
// var pass = document.getElementById('spass').value;
console.log(user)
if (user == null || user == "") {
errors.push("Username is required");
// return false;
} else if (user.length < 3 || user.length > 30) {
errors.push("Username must be at least 3 characters long.");
// return false;
}
if (formType == "signup") {
console.log(emailAddress)
if (emailAddress == null || emailAddress == "") {
errors.push("Email cannot be empty");
//return false;
} else if (emailAddress.indexOf('@') <= 0) {
errors.push(" @ symbol is on invalid position");
} else {
document.getElementById('semailAddress').innerHTMl = "";
}
}
console.log(pass)
if (pass == null || pass == "") {
errors.push("Password cannot be empty");
// return false;
} else if (pass.length <= 4 || pass.length >= 20) {
errors.push("Password must be at least 4 characters long.");
// return false;
} else {
document.getElementById('spass').innerHTMl = "";
}
if (errors.length > 0) {
alert(errors.join("n"));
return false;
} else {
return true;
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>