在运行时将类添加到html元素无法正常工作

Question

我正在尝试通过一些基本的客户端验证来创建表单。在表格中，我有3个输入字段，分别是用户名，电子邮件和密码。最初，它们具有输入的通用类。另外，我在这些输入元素上附加了一个同级段落元素，这些段落元素包含一些输入规范，如果用户输入无效的内容，则必须向用户显示。

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

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

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

即使我明确地说如果isEmailValid等于false时，我尽最大努力弄清楚为什么要添加有效的类，为什么要添加一个无效的类并删除有效的类，相反，它却相反。

我附上了小提琴链接，我对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

您的问题在以下代码块中：

if(isUserNameValid === true) {
    e.target.classList.add('valid')
    e.target.classList.remove('invalid')
}

检查特定输入是否有效，然后将触发事件的输入的类别设置为有效[不管输入是否有效。

快速解决方案是将那些块更改为引用有效标志所引用的特定输入：

if(isUserNameValid === false) {
    document.querySelector('#name').classList.add('invalid')
    document.querySelector('#name').classList.remove('valid')
}
if(isEmailValid === false) {
    document.querySelector('#email').classList.add('invalid')
    document.querySelector('#email').classList.remove('valid')
}
if(isPasswordValid === false) {
    document.querySelector('#password').classList.add('invalid')
    document.querySelector('#password').classList.remove('valid')
}
if(isUserNameValid === true) {
    document.querySelector('#name').classList.add('valid')
    document.querySelector('#name').classList.remove('invalid')
}
if(isEmailValid === true) {
    document.querySelector('#email').classList.add('valid')
    document.querySelector('#email').classList.remove('invalid')
}
if(isPasswordValid === true) {
    document.querySelector('#password').classList.add('valid')
    document.querySelector('#password').classList.remove('invalid')
}