通常会立即计算:INVALID Select 器:元素的样式将立即设置为:INVALID.例如，如果页面加载后立即需要一个值:
input:invalid {
border: 10px solid red;
}<form>
<p> Go red only after I focused and blurred away </p>
<input required placeholder="you must type something" />
</form>是否可以解决此问题，以便仅在用户与表单交互后才进行判断？(通常，在第一次聚焦/模糊之后). 我知道这是标准的浏览器实现行为，所以我们可能正在寻找一种解决方法.
虽然我不想做JS验证，但Minimal JS是可以的.
当然可以.与过早设置required属性不同，您可以使用某些东西(在本例中为required class)标记项目，并对要触发添加required属性(在本例中为blur)的事件进行编程:
function myBlur() {
this.setAttribute("required", null);
}
function myFocus() {
this.removeAttribute("required");
}
for (let item of document.getElementsByClassName("required")) {
item.addEventListener("blur", myBlur);
item.addEventListener("focus", myFocus);
}input:invalid {
border: 10px solid red;
}<form>
<input class="required" placeholder="you must type something" />
</form>在上面的示例中，我在blur上添加了required属性，并在focus上删除了它，这样，如果用户在项目被聚焦时删除内容，它就不会对他们大喊大叫，而是在项目失go 焦点时发出抱怨，而不是没有值.