调用 checkValidity() 方法可触发 HTML5 原生校验，返回布尔值并显示默认提示；单个元素校验适用于实时验证，表单校验用于提交前统一判断，需配合 preventDefault() 使用；支持 setCustomValidity() 自定义错误文案及 :valid/:invalid 伪类控制样式。
直接调用表单元素或表单本身的 checkValidity() 方法就能触发 HTML5 原生校验逻辑，它会检查 required、type（如 email、url）、min/max、pattern 等属性，并自动显示浏览器默认的错误提示。
对单个输入框校验
适用于聚焦离开、实时验证等场景。调用后返回布尔值，同时会触发 invalid 事件（如果校验失败）：
- 获取 input 元素，例如
const input = document.querySelector('#email'); - 执行
input.checkValidity()—— 返回true表示通过，false表示失败 - 失败时，浏览器通常会在该字段下方或旁边显示原生提示（取决于 UA 样式）
- 可配合
input.validationMessage获取当前错误文案，比如空值时是“请填写此字段”，邮箱格式错时是“请输入有效的电子邮件地址”
对整个表单批量校验
适合提交前统一判断，更符合实际业务流程：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 获取 form 元素，例如
const form = document.querySelector('form'); - 调用
form.checkValidity()—— 只要任意一个控件不通过，就返回false - 它会依次检查所有可校验子元素（
input、select、textarea），并激活各自的错误状态 - 注意：该方法不会自动阻止表单提交，需手动
event.preventDefault()配合使用
结合 submit 事件使用（推荐做法）
这是最常用也最稳妥的方式，兼顾原生体验与可控性：
- 监听表单的
submit事件 - 在回调中调用
form.checkValidity() - 若返回
false，调用event.preventDefault()阻止提交，并可额外做日志或埋点 - 若返回
true，说明所有字段都满足约束，可继续执行后续逻辑（如发请求）
小提示：自定义错误文案与样式
原生提示文案不可直接修改，但可通过 setCustomValidity() 覆盖：
-
input.setCustomValidity('手机号格式不正确')—— 设置自定义错误信息 -
input.setCustomValidity('')—— 清空自定义错误，恢复默认校验逻辑 - 样式方面，可用伪类
:valid/:invalid或:user-invalid控制外观（注意兼容性）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
