HTML5的`checkValidity()`方法用于显式验证表单元素，确保它们满足预设的条件

Bol5261

已于 2024-12-20 17:43:52 修改

阅读量1.3k

点赞数

分类专栏： HTML5(HyperText Markup) CSS(Cascading Style Sheets) Javascript(Promise/asyncAwait) 文章标签： java

于 2020-06-26 19:22:16 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/106971577

版权

本文探讨了HTML5规范中引入的表单验证特性，如pattern和required属性，但指出当前浏览器对这些属性的支持并不一致。文章通过检查不同浏览器引擎的HTML5支持情况，发现在Firefox 3.5.8和Safari 4.0.4中，表单对象并未实现checkValidity()方法，导致无法直接进行表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5的checkValidity()方法用于显式验证表单元素，确保它们满足预设的条件。这是一个示例，展示了如何在JavaScript中使用这个方法：

// 获取表单元素
const form = document.getElementById('your-form-id');

// 显式验证整个表单
if (form.checkValidity()) {
   
  console.log("Form is valid");
} else {
   
  console.log("Form is not valid. Please correct errors.");
}

// 或者对单个输入元素进行验证
const inputElement = document.querySelector('#your-input-id');
if (inputElement.checkValidity()) {
   
  alert("Input is valid");
} else {
   
  alert("Input has validation errors");
}

这段代码会检查表单的整体有效性（包括所有字段）或特定输入元素的有效性。如果所有字段都满足条件，则checkValidity()方法返回true；否则，它返回false。
novalidate属性的作用是防止HTML表单在提交之前自动验证。当这个属性添加到<form>元素时，浏览器不会在用户提交表单之前执行内置的客户端验证，而是等待服务器端完成验证。这给开发者提供了更多的控制权，允许他们选择何时何地进行完整的验证流程。

HTML5规范定义了一些非常有趣的验证组件,包括 pattern(用于验证Regexp)和
required(用于根据需要标记字段).然而,我可以告诉我,没有任何浏览器实际上根据这些属性进行任何验证。
我发现了一个comparison of HTML5 support across
engines,但没有关于验证的信息.在我试过的浏览器(Firefox 3.5.8和Safari
4.0.4)中,没有对象有一个checkValidity()方法,所以我无法运行验证,即使我可以定义它们。