CSS 如何使伪类 :invalid 在提交表单后应用到输入框

在本文中，我们将介绍如何使用CSS使伪类:invalid在提交表单后应用到输入框。CSS伪类:invalid用于选取表单中的无效输入，即未通过验证的输入字段。

阅读更多：CSS 教程

什么是伪类 :invalid

：invalid是CSS伪类，用于选择表单中<input>和<textarea>元素的无效输入。当用户提交表单时，浏览器会自动验证输入字段是否满足特定条件，如果不满足，则会自动将其标记为无效输入，并给相应的输入框加上:invalid伪类。

使用示例

假设我们有一个简单的表单，其中包含一个要求用户输入电子邮件地址的输入框。我们希望在用户提交表单后，如果输入的电子邮件地址无效，则将输入框的样式修改为红色边框。

首先，HTML代码如下所示：

<form id="myForm">
  <input type="email" id="email" required>
  <input type="submit" value="提交">
</form>

然后，我们可以使用CSS来定义伪类:invalid的样式，如下所示：

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

这样，当用户尝试提交表单时，如果输入的电子邮件地址不符合正确的格式，输入框的边框将变为红色。

:invalid 伪类在表单提交后应用

默认情况下，当用户提交表单时，浏览器会自动将无效输入字段标记为:invalid。然而，:invalid伪类在表单提交后并不会一直保持应用状态。这意味着在提交表单后如果用户重新编辑输入框内容，并且输入符合要求，:invalid伪类将不再应用。

解决方案：使用 JavaScript

要在表单提交后继续应用:invalid伪类样式，一种解决方案是使用JavaScript。我们可以通过监听表单的submit事件来实现。

首先，在HTML中增加一个用于调用JavaScript函数的事件监听器：

<form id="myForm" onsubmit="checkValidity(event)">
  <!-- 表单内容 -->
</form>

然后，在JavaScript中编写一个函数来检查表单的有效性，并手动应用:invalid伪类的样式：

function checkValidity(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  var form = event.target;
  var inputs = form.querySelectorAll('input');

  inputs.forEach(function(input) {
    if (!input.checkValidity()) {
      input.classList.add('invalid');
    }
  });
}

最后，我们可以在CSS中定义一个新的类.invalid来设置:invalid伪类样式，以确保在表单提交后仍然应用：

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

现在，当用户提交表单时，如果输入的电子邮件地址无效，输入框的边框将变为红色。即使用户重新编辑输入框并输入有效的电子邮件地址，边框仍然保持红色。

总结

在本文中，我们介绍了如何使用CSS使伪类:invalid在提交表单后应用到输入框。我们展示了一个使用:invalid伪类来标记无效输入的示例，并解释了如何通过使用JavaScript来保持:invalid伪类的应用状态。了解如何使用:invalid伪类可以帮助我们更好地控制和提示用户的表单输入效验。