如何使密碼字段相互檢查用戶寫入的值是否匹配？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 關注
- 182 瀏覽
添加回答
舉報
0/150
提交
取消