我创建了一个表单注册,您可以在其中创建密码。然后我将输入的密码和电子邮件与存储的密码和电子邮件进行比较以成功登录。我在获取已存储电子邮件的未定义电子邮件地址时遇到问题。我确定这很简单。下面是我的代码 -
const memberSignUp = (event) => {
let formData = {
firstName: document.getElementById("firstName").value,
lastName: document.getElementById("lastName").value,
email: document.getElementById("userEmail").value,
password: document.getElementById("userPassword").value,
};
localStorage.setItem("formData", JSON.stringify(formData));
console.log(localStorage.getItem("formData"));
event.preventDefault();
alert("Account successfully created");
window.location = "landing.html";
};
function clearForm() {
document.getElementById("firstName").value = "";
document.getElementById("lastName").value = "";
document.getElementById("userEmail").value = "";
document.getElementById("userPassword").value = "";
}
function memberSignIn() {
let storedEmail = $("#storedEmail").val();
let storedPassword = $("#storedPassword").val();
let enteredEmail = $("#memberEmail").val();
let enteredPassword = $("#memberPassword").val();
console.log(storedEmail, enteredEmail);
if (enteredEmail == storedEmail && enteredPassword == storedPassword) {
alert("Login successful.");
window.location = "index.html";
return false;
} else {
alert("Incorrect username or password.");
window.location = "landing.html?#";
}
}
我的 HTML 代码如下。感谢检查。
<div class="forms-container">
<form id="signInForm" onsubmit="return memberSignIn()">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="memberEmail"
aria-describedby="emailHelp"
placeholder="Email"
/>
<div id="emailHelp" class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="memberPassword"
placeholder="Password"
/>
</div>
<button type="submit" class="btn btn-warning">Sign In</button>
<div class="mb-3">
<p>
New to Rewind?
<a href="#" class="" target="_self" id="signUpButton"
>Sign up now</a
>
</p>
</div>
</form>
</div>
<div class="form-group">
<form class="row g-3" onsubmit="memberSignUp(event), clearForm()">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input
type="text"
name="firstName"
class="form-control"
id="firstName"
placeholder="First"
/>
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input
type="text"
name="lastName"
class="form-control"
id="lastName"
placeholder="Last"
/>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input
type="email"
name="email"
class="form-control"
id="userEmail"
placeholder="Email"
/>
</div>
<div class="col-md-6">
<label for="password" class="form-label">Password</label>
<input
type="password"
name="password"
class="form-control"
id="userPassword"
placeholder="Submit"
/>
</div>
<div>
<button type="submit" class="btn btn-warning">Submit</button>
</div>
</form>
</div>