为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

Cats萌萌 2023-12-25 16:35:32
如何使密码字段相互检查用户写入的值是否匹配?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>


查看完整回答
反对 回复 2023-12-25
?
米琪卡哇伊

TA贡献1998条经验 获得超6个赞

你可以看看我的解决方案。希望更容易理解。您的代码中存在一些问题。

  1. 如果您想在密码不匹配时阻止表单提交,那么您需要使用event.preventDefault来阻止默认行为。

  2. 您可以触发一次提交事件,然后检查所需的值。

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>


查看完整回答
反对 回复 2023-12-25
  • 2 回答
  • 0 关注
  • 112 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信