当两个密码不匹配时，我的 JS 函数不会打印任何内容
如何使密码字段相互检查用户写入的值是否匹配？
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>
Cats萌萌2回答
-
凤凰求蛊
在测试之前，您需要将事件侦听器添加到表单提交中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> -
米琪卡哇伊
你可以看看我的解决方案。希望更容易理解。您的代码中存在一些问题。如果您想在密码不匹配时阻止表单提交，那么您需要使用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>
随时随地看视频慕课网APP
相关分类
Html5