表单输入实时反馈

Posted 2023-03-05

【中文标题】表单输入实时反馈

【英文标题】：Form input realtime feedback

【发布时间】：2019-10-17 02:57:35

【问题描述】：

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

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

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。

【参考方案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$">

【参考方案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');
    
);

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

【讨论】：

谢谢，这是我犯的愚蠢错误！

【参考方案3】：

我认为你需要使用 checkName 变量

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

【参考方案4】：

您的代码有两个问题：

input 事件在input、select 和textarea 标签上触发，而不是form。因此，addEventListener 位于错误的元素上 当您验证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>

【讨论】：

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