如何使密码字段相互检查用户写入的值是否匹配？function checkPassword(form) { pOne = form.pOne.value; pTwo = form.pTwo.value; // If password not entered if (pOne == '') alert("Please enter Password"); // If confirm password not entered else if (pTwo == '') alert("Please enter confirm password"); // If Not same return False. else if (pOne != pTwo) { // alert ("\nPassword did not match: Please try again...") document.querySelector(".submit").addEventListener("click", print) function print() { return document.querySelector(".pass").textContent = "Your password does not match!" } } // If same return True. else { document.querySelector(".submit").addEventListener("click", print) function print() { return document.querySelector(".pass").textContent = "Your password match perfectly!" } }}<form class="formtwo" onsubmit="checkPassword(this)"> <input type="email" name="email" placeholder="Email"><br> <input type="password" name="pOne" placeholder="Password"> <input type="password" name="pTwo" placeholder="Re-Type Password"> <p class="pass">djkakj</p> <button type="submit" class="submit">Submit</button></form>
2 回答
凤凰求蛊
TA贡献1825条经验 获得超4个赞
在测试之前，您需要将事件侦听器添加到表单提交中
window.addEventListener("load", function() {
document.getElementById("formtwo").addEventListener("submit", function(e) {
const pOne = this.pOne.value;
const pTwo = this.pTwo.value;
const pass = document.querySelector(".pass");
let errors = [];
// If password not entered
if (pOne == '') errors.push("Please enter Password");
if (pTwo == '') errors.push("Please enter confirm password");
if (pOne != pTwo) errors.push("Password did not match: Please try again...")
if (errors.length > 0) {
e.preventDefault(); // this will stop submission
alert(errors.join("\n"))
pass.textContent = "Your password does not match!"
return;
}
pass.textContent = "Your password match perfectly!"
})
})
<form id="formtwo">
<input type="email" name="email" placeholder="Email"><br>
<input type="password" name="pOne" placeholder="Password">
<input type="password" name="pTwo" placeholder="Re-Type Password">
<p class="pass">djkakj</p>
<button type="submit" class="submit">Submit</button>
</form>
米琪卡哇伊
TA贡献1998条经验 获得超6个赞
你可以看看我的解决方案。希望更容易理解。您的代码中存在一些问题。
如果您想在密码不匹配时阻止表单提交，那么您需要使用
event.preventDefault来阻止默认行为。您可以触发一次提交事件，然后检查所需的值。
const form = document.querySelector('.formtwo');
form.addEventListener('submit', checkPassword);
function checkPassword(e) {
e.preventDefault();
let pOne = form.pOne.value;
let pTwo = form.pTwo.value;
// If password not entered
if (pOne == "") alert("Please enter Password");
// If confirm password not entered
else if (pTwo == "") alert("Please enter confirm password");
// If Not same return False.
else if (pOne != pTwo) {
document.querySelector(".pass").textContent =
"Your password does not match!";
}
// If same return True.
else {
document.querySelector(".pass").textContent =
"Your password match perfectly!";
// submitting form
form.submit();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form class="formtwo">
<input type="email" name="email" placeholder="Email"><br>
<input type="password" name="pOne" placeholder="Password">
<input type="password" name="pTwo" placeholder="Re-Type Password">
<p class="pass">Password matching status</p>
<button type="submit" class="submit">Submit</button>
</form>
</body>
</html>
- 2 回答
- 0 关注
- 112 浏览
添加回答
举报
0/150
提交
取消