Question

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

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

/^[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

您的代码有两个问题：

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

以下正确的代码段：

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>

表单输入实时反馈

4 个答案: