Javascript 表单输入实时反馈

我正在构造一个带有用户名输入字段的表单。我想使用正则表达式将用户名限制在非常小的字符范围内，根据输入的有效性将文本的颜色从红色更改为绿色，与用户类型的正则表达式相比

迄今为止，尽管正则表达式测试结果呈阳性，但它并没有发现任何无效字符

下面是代码，带有一个JSFIDLE

const form=document.querySelector（'form'）；
常量输入=document.querySelector（'input'）；
常量检查=/^[A-Z0-9-]+$/ig；
form.addEventListener（“输入”，e=>{
const checkName=check.test（input.value）；
如果（！检查）{
input.classList.add（'invalid-name'）；
input.classList.remove（'valid-name'）；
}否则{
input.classList.add（'valid-name'）；
input.classList.remove（'invalid-name'）；
}
})

。名称无效{
颜色：红色；
}
.有效名称{
颜色：绿色；
}

---

您的代码有两个问题：

input

事件是在

input

、

select

和

textarea

标记而不是

表单

时触发的。因此，

addEventListener

位于错误的元素上

当验证

RegExp

是否与

test

一起工作时，返回值是一个布尔值，指示它是否工作，而不是

RegExp

本身。因此，

if

语句需要调整

更正了下面的代码段：

const form=document.querySelector（'form'）；
常量输入=document.querySelector（'input'）；
常量检查=/^[A-Z0-9-]+$/ig；
addEventListener（“输入”，e=>{
const checkName=check.test（input.value）；
如果（！checkName）{
input.classList.add（'invalid-name'）；
input.classList.remove（'valid-name'）；
}否则{
input.classList.add（'valid-name'）；
input.classList.remove（'invalid-name'）；
}
})

。名称无效{
颜色：红色；
}
.有效名称{
颜色：绿色；
}

---

如果你只关心现代浏览器，你甚至不需要JavaScript

input{border:2px solid#DDD；}
输入：无效{边框颜色：红色；}
输入：有效{边框颜色：绿色；}

---

在事件侦听器中，您可以测试值，但是，在测试之后，您的条件基于持有regex的引用，而不是测试结果。i、 e.

检查

而不是

检查名称

。由于正则表达式的计算结果总是

truthy

值，因此将执行条件的else部分。尝试对代码进行以下更改：

form.addEventListener("input", e => {
    const checkName = check.test(input.value);
    if(!checkName) {
        input.classList.add('invalid-name');
        input.classList.remove('valid-name');
    } else {
        input.classList.add('valid-name');
        input.classList.remove('invalid-name');
    }
});

---

此外，还应该考虑选择表单，并输入具有更具体的选择器。现在，选择器基本上返回主体中的“first input field”或“first form”，这可能并不总是您所期望的元素

我认为您需要使用checkName变量

    const checkName = check.test(input.value);
    if(!checkName)

---

关于第一个问题，“输入”事件通过DOM树冒泡。因此，子输入上的所有输入事件都可以通过将“输入”事件处理程序附加到包含表单来捕获。我没有在旧浏览器中尝试过，但至少在现代浏览器中，这似乎是正确实现的。谢谢，我犯了一个愚蠢的错误！！

    const checkName = check.test(input.value);
    if(!checkName)