时间戳

首页 > 解决方案 > 反向事件监听器

javascript - 反向事件监听器

问题描述

我是编码新手，我制作了一个 javascript 代码来获取您的密码，然后查看它是否与确认密码匹配，然后它会告诉您它们是否匹配，当我先输入密码然后确认时，这很好用密码，但是当我以相反的方式执行时，它说它无效。基本上，如果用户首先输入他们的确认密码然后输入他们的密码，那么我不知道如何做到这一点，因此它显示为有效。

const password = document.getElementById("password");
const Cpassword = document.getElementById("Cpassword")

password.addEventListener('input', () => {
const passBox = document.querySelector('.passBox');
const passText = document.querySelector('.passText');
const passPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
if (password.value.match(passPattern)) {
passBox.classList.add('valid');
passBox.classList.remove('invalid');
passText.innerHTML = "Your password in Valid";
        } else {
            passBox.classList.add('invalid');
            passBox.classList.remove('valid');
            passText.innerHTML = "Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.";
            
        }

    });


Cpassword.addEventListener('input', (e) => {

    var CpassBox = document.querySelector('.CpassBox');
    var CpassText = document.querySelector('.CpassText');

    if (document.getElementById('password').value == document.getElementById('Cpassword').value) {
        CpassBox.classList.add('valid');
        CpassBox.classList.remove('invalid');
        CpassText.innerHTML = "Password match";
    } else {
        CpassBox.classList.add('invalid');
        CpassBox.classList.remove('valid');
        CpassText.innerHTML = "Password does not match";
        
    }

});
<input type='password' id='password'>
<p class='passBox'></p>
<p class='passText'></p>
<input type='password' id='Cpassword'>
<p class='CpassBox'></p>
<p class='CpassText'></p>

标签： javascript

解决方案

我稍微修正了代码。

我做了什么：

  • 用 const 修复变量并放在外面。
  • 创建一个函数CheckCPassword()并将其用于密码输入，以便在输入字母后检查是否匹配。
  • 在CheckCPassword()添加 if 以检查密码是否具有值。

const password = document.getElementById("password");
const Cpassword = document.getElementById("Cpassword")
const CpassBox = document.querySelector('.CpassBox');
const CpassText = document.querySelector('.CpassText');
const passBox = document.querySelector('.passBox');
const passText = document.querySelector('.passText');
const passPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;

password.addEventListener('input', () => {

  if (password.value.match(passPattern)) {
    passBox.classList.add('valid');
    passBox.classList.remove('invalid');
    passText.innerHTML = "Your password in Valid";
  } else {
    passBox.classList.add('invalid');
    passBox.classList.remove('valid');
    passText.innerHTML = "Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.";

  }
  CheckCPassword();

});


Cpassword.addEventListener('input', () => {
  CheckCPassword();
});

function CheckCPassword() {
  if (password.value === '' || Cpassword.value === '') {
    return;
  }
  if (password.value === Cpassword.value) {
    CpassBox.classList.add('valid');
    CpassBox.classList.remove('invalid');
    CpassText.innerHTML = "Password match";
  } else {
    CpassBox.classList.add('invalid');
    CpassBox.classList.remove('valid');
    CpassText.innerHTML = "Password does not match";

  }
}
<input type='password' id='password'>
<p class='passBox'></p>
<p class='passText'></p>
<input type='password' id='Cpassword'>
<p class='CpassBox'></p>
<p class='CpassText'></p>

推荐阅读