CSS checkValidity 方法用于更新UI

在本文中，我们将介绍CSS的checkValidity方法及其用途，以及如何使用该方法来更新用户界面(UI)。

阅读更多：CSS 教程

什么是checkValidity方法？

checkValidity是一个CSS方法，用于验证用户输入的表单数据是否符合指定的规则。它主要用于表单验证，以确保用户输入的数据是有效的，并且符合预期的格式和要求。

checkValidity方法返回一个布尔值，如果用户输入的数据符合规则，则返回true，否则返回false。

如何使用checkValidity方法？

要使用checkValidity方法，首先需要获取表单元素的引用。可以通过使用document.getElementById()或document.querySelector()等方法来获取元素的引用。

然后，可以通过调用checkValidity()方法来检查表单元素中用户输入的数据是否有效。如果返回值为true，则表示用户输入的数据有效，如果返回值为false，则表示用户输入的数据无效。

以下是一个示例，展示了如何使用checkValidity方法来检查输入框中的用户输入是否有效：

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" required pattern="[A-Za-z0-9]{6,}">
  <button onclick="checkValidity()">提交</button>
</form>

<script>
function checkValidity() {
  var usernameInput = document.getElementById("username");

  if (usernameInput.checkValidity()) {
    // 执行提交操作
    alert("您输入的用户名有效！");
  } else {
    // 显示错误消息
    alert("请输入至少6个字符的用户名，只能包含字母和数字！");
  }
}
</script>

在上面的示例中，我们使用了required和pattern属性来定义用户名输入框的规则，要求用户输入至少6个字符的字母和数字。当用户点击提交按钮时，会调用checkValidity方法来检查用户名输入框中的数据是否有效。如果有效，则显示成功消息，否则显示错误消息。

如何使用checkValidity方法来更新UI？

除了用于验证表单数据，checkValidity方法还可以与其他CSS属性和样式一起使用，来更新用户界面。

一种常见的做法是，在用户输入无效时，通过添加或删除CSS类来更改表单元素的样式。这样，用户可以清楚地看到他们在哪里出错以及如何纠正错误。

以下是一个示例，展示了如何使用checkValidity方法来实时更新UI：

<form>
  <label for="email">邮箱地址:</label>
  <input type="email" id="email" required>
</form>

<script>
var emailInput = document.getElementById("email");

emailInput.addEventListener("input", function() {
  if (emailInput.checkValidity()) {
    emailInput.classList.remove("invalid");
    emailInput.classList.add("valid");
  } else {
    emailInput.classList.remove("valid");
    emailInput.classList.add("invalid");
  }
});
</script>

<style>
.invalid {
  border: 1px solid red;
}

.valid {
  border: 1px solid green;
}
</style>

在上面的示例中，我们定义了一个输入框，要求用户输入有效的电子邮件地址。通过给输入框添加input事件监听器，每当用户输入内容时都会触发该事件。

在事件监听器中，我们使用checkValidity方法来检查用户输入的邮箱地址是否有效。如果有效，则将输入框的CSS类修改为valid，边框颜色为绿色；如果无效，则修改为invalid，边框颜色为红色。

这样，用户可以实时看到他们输入的数据是否有效，并且能够根据界面上的边框颜色得到反馈。