表单输入实时反馈

Question

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

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

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

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

这是代码，这里是JSFiddle 。

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

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;
}

更新：尽管此问题已解决，但是如果您尝试使用该代码，则会注意到正则表达式交替为真/假仍然存在问题。这个问题的解决方案在这里。

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}$">