当两个密码不匹配时，我的 JS 函数不会打印任何内容

当两个密码不匹配时，我的 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萌萌

浏览 104回答 2

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>

0

0

米琪卡哇伊

你可以看看我的解决方案。希望更容易理解。您的代码中存在一些问题。如果您想在密码不匹配时阻止表单提交，那么您需要使用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>

0

0

随时随地看视频慕课网APP

相关分类

Html5