表单输入实时反馈

Question

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

到目前为止，尽管对正则表达式进行了积极测试，但它没有选择任何无效的字符。

https://regex101.com/r/XPFy6c/1/

/^[A-Z0-9 -]+$/igm

这是代码，带有 JSFiddle here。

const form = document.querySelector('form');
const input = document.querySelector('input');

const check = /^[A-Z0-9 -]+$/ig;

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

.invalid-name {
  color: red;
}

.valid-name {
  color: green;
}

<form id="form">
    <input class="col-12 edit-name-field" id="name" name="edit-name" maxlength="12" autocomplete="off">
</form>

更新：虽然这个问题已经解决，但如果您尝试代码，您会注意到正则表达式交替真/假仍然存在问题。这个问题的解决方法是here。

Answer 1

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

input { border: 2px solid #DDD; }
input:invalid { border-color: red; }
input:valid { border-color: green; }

<input type="text" pattern="^[A-Z0-9 -]{1,12}$">

Answer 2

在您的事件侦听器中，您正在测试该值，但是，之后您的条件基于持有正则表达式的引用而不是测试结果。即check 而不是checkName。由于正则表达式将始终评估为 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');
    }
});

此外，您还应该考虑使用更具体的选择器选择表单和输入。现在您的选择器基本上返回正文中的“第一个输入字段”或“第一个表单”，这可能并不总是您期望的元素。

Answer 3

我认为你需要使用 checkName 变量

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

Answer 4

您的代码有两个问题：

1. input 事件在input、select 和textarea 标签上触发，而不是form。因此，addEventListener 位于错误的元素上
2. 当您验证RegExp 是否与test 一起使用时，返回值是一个布尔值，指示是否可以使用，而不是RegExp 本身。因此，if 语句需要调整。

更正下面的sn-p：

const form = document.querySelector('form');
const input = document.querySelector('input');

const check = /^[A-Z0-9 -]+$/ig;

input.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');
    }
})

.invalid-name {
  color: red;
}

.valid-name {
  color: green;
}

<form id="form">
    <input class="col-12 edit-name-field" id="name" name="edit-name" maxlength="12" autocomplete="off">
</form>