如何仅在更改后才验证输入？答案

【问题标题】：How can I validate input only after it was changed?如何仅在更改后才验证输入？
【发布时间】：2017-02-16 23:03:04
【问题描述】：

这可能是一个非常愚蠢的问题，但我找不到简单的解决方案（类似于特殊的 HTML5 属性）。

例如，我有一个简单的表单，为email 字段启用了验证：

<form>
    <input required type="email" placeholder="email@gmail.com"></input>
</form>

还有一些:valid, :invalid伪类的样式：

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

所以，当我用这个表单打开一个页面时，输入已经是红色边框了，因为它是空的。问题是 - 如何仅在用户更改后才启用验证？

【问题讨论】：

我不知道为什么大家都错过了这个，但它是*占位符

标签： javascript html forms validation input

【解决方案1】：

你可以使用onchange event，见：

<!-- added a ID to get it easier later -->
<input required id="myInput" type="email" placehodler="email@gmail.com"></input>

在你的 CSS 中，使用类来设置你的样式：

input.valid {
  border: 1px solid green;
}
input.invalid {
  border: 1px solid red;
}

在你的 javascript 中：

document.getElementById('myInput').onchange = function(){
     // validation code here

     this.classList.add('valid') // if validation is true
     this.classList.add('invalid') // if validation is false
}

【讨论】：

【解决方案2】：

用户按下的每个键都会动态检查输入值。您可以自行调整要求。

var input = document.getElementById('input');

function validate(){
  if (input.value.length > 2) {
    input.className = 'valid';
  } else {
    input.className = 'invalid';
  }
}

.valid {
  border: 1px solid green;
}
.invalid {
  border: 1px solid red;
}

<form>
    <input required type="email" placehodler="email@gmail.com" id='input' onkeyup='validate()'>
</form>

【讨论】：

【解决方案3】：

你有一套广泛的方法来实现这一点。我会选择最简单的：blur || input.

您可以附加input 或blur 事件并在它们发生时进行验证。不同之处在于，blur 将在用户关注另一个元素时调用（单击提交按钮、转到另一个输入、单击页面中的其他位置等等），而input 在用户更改输入后立即调用，通常通过按键，但也发生在用户粘贴或剪切时。 input 是“官方”的 html5 监听输入元素的方式。

document.getElementById('emailInput').oninput = function(){
    // validateinput
}

另外，您可以选择change 事件，这与blur 完全相同，但只有在用户更改内容时才会触发。 “坏”的东西与blur 相同：编写时没有实时验证。

【讨论】：

【解决方案4】：

您可以使用 querySelector 来区分有效和无效，而不是 css。您应该使用keyup 或keydown 而不是change 事件，因为更改需要您重新聚焦来验证。

myform.querySelector('input').addEventListener('keyup', function() {
  if (myform.querySelector('input:invalid')) myform.querySelector('input:invalid').style.border = "1px red solid";
  else myform.querySelector('input:valid').style.border = "1px solid green";
});

HTML

<form id="myform">
  <input required type="email" placeholder="email@gmail.com"></input>
</form>

【讨论】：