javascript - 如何仅在更改后验证输入？

Question

这可能是一个相当愚蠢的问题，但我找不到一个简单的解决方案(比如特殊的 HTML5 属性)。

例如，我有一个简单的表单，其中启用了电子邮件字段的验证:

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

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

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