checkvalidity 是 html5 表单原生校验方法，返回布尔值，用于提交前轻量级拦截无效请求；支持单个元素或整个表单调用，需配合 reportvalidity 展示提示，并可与自定义规则协同校验。
checkValidity 是 HTML5 表单元素原生支持的方法，调用后会触发浏览器内置的验证逻辑（如 required、type="email"、minlength、pattern 等），返回布尔值。它不提交表单、不发请求，只做轻量级前端校验，是拦截无效网络请求的第一道防线。
在提交前主动调用 checkValidity
不要依赖表单默认提交行为（它可能跳过 JS 控制），应在 JS 中显式调用：
- 对单个输入框：如
inputElement.checkValidity()，适合实时校验或聚焦离开时触发 - 对整个表单：如
formElement.checkValidity()，推荐在点击「提交」按钮时统一检查 - 若返回
false，说明至少一个字段未通过校验，此时应阻止后续操作（如fetch请求）
配合 reportValidity 展示原生提示（可选但友好）
checkValidity() 本身不显示错误提示，用户可能不知道哪错了。可搭配 reportValidity()：
-
reportValidity()会执行校验并自动弹出浏览器默认气泡提示（含定位和文案） - 通常写成：
if (!form.checkValidity()) { form.reportValidity(); return; } - 注意：Safari 和部分旧版 Chrome 对
reportValidity支持良好，无需额外 polyfill
与自定义规则结合使用（不冲突）
checkValidity 只管 HTML 属性声明的规则，复杂逻辑（如“密码需包含数字和字母”、“两次输入密码一致”）需手动补充：
- 先调用
form.checkValidity()过滤基础问题 - 再写 JS 判断业务规则，例如：
if (pwd.value !== confirmPwd.value) { ... } - 两者都通过，才发起
fetch或axios请求 - 避免把所有校验都写成 JS —— 基础项交给 HTML 属性更简洁、可访问性更好
注意表单控件的 validity 属性和事件联动
每个表单控件都有 validity 对象，可细查失败原因（如 validity.valueMissing、validity.patternMismatch）：
- 可用于精细化反馈，比如根据
validity.typeMismatch提示“邮箱格式不对” - 监听
input或blur事件时，也可调用element.checkValidity()实现边输边验 - 注意：禁用的（
disabled）或只读的（readonly）控件不参与校验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
