在运行时将类添加到 html 元素未按预期工作

Question

我正在尝试创建一个带有一些基本客户端验证的表单。在表单中，我有 3 个输入字段，用户名、电子邮件和密码。最初他们有一个共同的 class 输入。我还向这些输入元素附加了一个同级段落元素，这些段落元素包含一些输入规范，如果用户输入无效内容，则必须向用户显示这些规范。

在CSS我基本上创建了两个classes，有效和无效，有效只是将输入元素的边框变为绿色，无效将边框变为红色并设置段落元素不透明度从 0 到 1（初始样式）。

在用于检查用户输入有效性的脚本文件中，我有三个布尔变量，isUserNameValid、isEmailValid、isPasswordValid，所有这三个初始设置为 false。

现在我在运行时添加这些 CSS classes 作为用户输入。添加 classes（有效和无效）对于第一个输入元素（用户名输入元素）工作正常，但是一旦我转到下一个输入元素（电子邮件并键入）单个字母，脚本将 class valid 添加到电子邮件输入元素而不是 invalid，即使 isEmailValid 是假的。

我尽力弄清楚为什么它添加 class 有效，即使我明确地说 if the isEmailValid is equals to false add a class of invalid and remove class 有效，相反它在做相反的事情。

我附上了 fiddle link，而且我在 JavaScript 方面经验不多，所以，请用简单的英语进行解释。

    if(username.length > 5) {
        isUserNameValid = true
    }
    if(email.length > 10) {
        isEmailValid = true
    }
    if(password.length > 10) {
        isPasswordValid = true
    }

    if(isUserNameValid === true && isEmailValid === true && isPasswordValid === true) {
        loginButton.disabled = false
        loginButton.style.cursor = 'pointer'
    } else {
        console.log('username',username, isUserNameValid)
        console.log('email',email, isEmailValid)
        console.log('password',password, isPasswordValid)
        loginButton.disabled = true
        loginButton.style.cursor = 'default'
        if(isUserNameValid === false) {
            e.target.classList.add('invalid')
            e.target.classList.remove('valid')
        }
        if(isEmailValid === false) {
            e.target.classList.add('invalid')
            e.target.classList.remove('valid')
        }
        if(isPasswordValid === false) {
            e.target.classList.add('invalid')
            e.target.classList.remove('valid')
        }
        if(isUserNameValid === true) {
            e.target.classList.add('valid')
            e.target.classList.remove('invalid')
        }
        if(isEmailValid === true) {
            e.target.classList.add('valid')
            e.target.classList.remove('invalid')
        }
        if(isPasswordValid === true) {
            e.target.classList.add('valid')
            e.target.classList.remove('invalid')
        }
    }

FIDDLE LINK: https://jsfiddle.net/weg9jy0c/5/

Answer 1

这对你有用吗？

https://jsfiddle.net/gnca42xp/1/

const form = document.querySelector('.main-form')
form.addEventListener('keyup', (e) => {
  const loginButton = document.querySelector('.login-btn')
  const username = document.querySelector('#name').value
  const email = document.querySelector('#email').value
  const password = document.querySelector('#password').value
  let isUserNameValid = false;
  let isEmailValid = false;
  let isPasswordValid = false;

  currentUpdateField = e.target.getAttribute('id');

  if (username.length > 5) {
    isUserNameValid = true
  }
  if (email.length > 10) {
    isEmailValid = true
  }
  if (password.length > 10) {
    isPasswordValid = true
  }

  if (isUserNameValid === true && isEmailValid === true && isPasswordValid === true) {
    e.target.classList.remove('invalid')
    loginButton.disabled = false
    loginButton.style.cursor = 'pointer'
  } else {
    console.log('username', username, isUserNameValid)
    console.log('email', email, isEmailValid)
    console.log('password', password, isPasswordValid)
    loginButton.disabled = true
    loginButton.style.cursor = 'default'
    if (isUserNameValid === false && currentUpdateField === 'name') {
      e.target.classList.add('invalid')
      e.target.classList.remove('valid')
    }
    if (isEmailValid === false && currentUpdateField === 'email') {
      e.target.classList.add('invalid')
      e.target.classList.remove('valid')
    }
    if (isPasswordValid === false && currentUpdateField === 'password') {
      e.target.classList.add('invalid')
      e.target.classList.remove('valid')
    }
    if (isUserNameValid === true && currentUpdateField === 'name') {
      e.target.classList.add('valid')
      e.target.classList.remove('invalid')
    }
    if (isEmailValid === true && currentUpdateField === 'email') {
      e.target.classList.add('valid')
      e.target.classList.remove('invalid')
    }
    if (isPasswordValid === true && currentUpdateField === 'password') {
      e.target.classList.add('valid')
      e.target.classList.remove('invalid')
    }
  }

})

.input {
  outline: none;
}

.valid {
  border: 1px solid rgb(89, 224, 89);
}

input+p {
  opacity: 0;
}

.invalid {
  border: 2px solid rgb(245, 101, 101);
}

input.invalid+p {
  opacity: 1;
  color: orange;
}

<html>
<title>Demo Form</title>

<body>
  <form class="main-form" method="post">
    <input class="input" type="text" name="username" id="name" placeholder="Username">
    <p>Username must have more than 5 characters</p>
    <input class="input" type="email" name="email" id="email" placeholder="Email">
    <p>Email must of format <b>email@site.domain</b></p>
    <input class="input" type="password" name="password" id="password" placeholder="Password">
    <p>Password must have more than 5 characters and aplhanumeric with a special character</p><br>
    <button type="submit" class="login-btn" disabled>Register</button>
  </form>
</body>

</html>

你的情况会怎样

1) 第一次用户输入用户名5个字符后有效 2) 然后用户在电子邮件字段中输入数据，这里 e.target 是电子邮件字段，但从您的代码来看，isUsernameInvalid 定义为 false，并将 class 添加到电子邮件字段 e.target。

这就是您的代码无法正常工作的原因

所以我所做的是，

我在当前更新字段上得到 id，然后仅当 ID 匹配时才添加或删除 classes

在运行时将类添加到 html 元素未按预期工作

Adding classes during runtime to html elements not working as expected

javascript

dom-manipulation

在运行时将 类 添加到 html 元素未按预期工作

Adding classes during runtime to html elements not working as expected

javascript

dom-manipulation

在运行时将类添加到 html 元素未按预期工作