第 16 课2026.09.21
在表单提交前让浏览器显示校验提示。
第 16 课：提交时报告输入错误
- 日期：2026-09-21
- 课程序号：第 16 课
- 知识点：提交时报告输入错误
用途或适用场景
在表单提交前让浏览器显示校验提示。
核心概念
原生提交校验会先阻止无效表单触发 submit；在表单上设置 novalidate 后，由 submit 处理器调用 reportValidity() 显示提示并决定是否提交。
最小代码或操作示例
text
<form id="lessonForm" novalidate>
<input id="minutes" type="number" min="1" required>
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector("#lessonForm");
form.addEventListener("submit", event => {
if (!form.reportValidity()) event.preventDefault();
});
</script>3～5 分钟练习
把输入设为无效值后提交。
参考答案
浏览器显示该控件的校验消息，并阻止提交。
与上一课的联系
沿用第 15 课的 minutes 输入框和自定义消息清理；本课只新增表单提交时的 reportValidity()；完成练习后下一课可为字段指定提交时使用的名称。
时效校验
时效校验：2026-09-24（WHATWG HTML Living Standard；已打开并核对官方文档中的本课用法，未见本课方案的废弃说明）。