第 15 课：阻止无效提交

用途或适用场景

范围校验失败时不把课程加入列表。

提交处理函数先检查派生的 valid；模板使用 prevent 修饰符阻止浏览器默认提交。

text

const submit = () => {
  if (!valid.value) return
  lessons.value.push({ minutes: minutes.value })
}

<form @submit.prevent="submit">

无效时禁用提交按钮。

写成 <button :disabled="!valid">提交</button>。

继承上一课的数值范围校验与字段提示；本课只在提交入口阻止无效数据；完成后下一课可把已有提示与输入框关联。

时效校验：2026-09-21（Vue 3 当前表单与事件处理指南；保留原课程日期与序号，已重新核对 @submit.prevent 与派生 valid 的用法，未见废弃标记）。