JS API验证—约束DOM验证方法

JavaScript 验证 API

JavaScript 提供了一组内置的验证 API，可以用于对用户输入的数据进行验证。这些验证 API 使得前端表单验证变得更加简单和便捷。本文将介绍 JavaScript 中常用的验证 API，包括表单验证、数据类型验证以及自定义验证函数的使用方法和示例。

约束验证DOM方法

checkValidity()方法实例：

checkValidity() 是一个用于检查输入元素数据是否有效的方法。

当你调用 checkValidity() 方法时，它会对输入元素的值进行验证，并返回一个布尔值来指示值是否有效。如果值有效，返回 true；如果值无效，返回 false。

这个方法通常在表单提交之前使用，用于验证用户的输入是否符合要求。例如，你可以在提交表单时调用   checkValidity() 方法来确保所有必填字段都已填写且格式正确。

以下是一个使用 checkValidity() 方法的示例：

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    // 进行其他操作，如显示错误消息等
  }
});

在上面的示例中，我们添加了一个提交事件监听器到表单上。当用户点击提交按钮时，该事件监听器会执行。在监听器内部，我们调用了 checkValidity() 方法来验证表单中的输入数据是否有效。如果数据无效，则调用 preventDefault() 方法阻止表单提交，并可以进行其他自定义的操作，如显示错误消息给用户。

setCustomValidity()方法实例：

setCustomValidity() 是一个用于设置输入元素的自定义错误提示信息的方法。

当你调用 setCustomValidity() 方法时，你可以为输入元素设置一个自定义的错误提示消息。这个自定义错误提示消息会存储在输入元素的 validationMessage 属性中，并在验证失败时显示给用户。

以下是一个使用 setCustomValidity() 方法的示例：

const input = document.querySelector('input');
input.addEventListener('input', function() {
  if (input.value.length < 6) {
    input.setCustomValidity('密码长度至少为6个字符www.dotcpp.com');
  } else {
    input.setCustomValidity('www.dotcpp.com');
  }
});
input.addEventListener('invalid', function(event) {
  event.preventDefault();
});

在上面的示例中，我们为一个输入框元素添加了两个事件监听器：

input事件监听器用于实时检查输入框中的值，并根据条件设置自定义错误提示消息。如果输入框中的值长度小于6，则调用 setCustomValidity() 方法将错误消息设置为"密码长度至少为6个字符www.dotcpp.com"；否则，调用 setCustomValidity() 方法将错误消息设置为“www.dotcpp.com”。

invalid事件监听器用于阻止默认的表单错误提示，这样当用户提交表单时，不会显示浏览器默认的错误提示。

通过调用 setCustomValidity() 方法，你可以根据自己的验证逻辑来设置输入元素的自定义错误提示信息，从而提供更好的用户体验。

这节我们提到了JS api验证的约束演示DOM方法，下节我们介绍约束验证DOM属性。