javascript - 表单输入实时反馈

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