第 17 课：无效提交立即显示字段错误

<script setup>
import { ref, computed } from 'vue'
const minutes = ref(0)
const touched = ref(false)
const lessons = ref([])
const valid = computed(() => typeof minutes.value === 'number' && minutes.value >= 1 && minutes.value <= 60)
function submit() {
  if (!valid.value) { touched.value = true; return }
  lessons.value.push({ minutes: minutes.value })
}
</script>
<template>
  <form novalidate @submit.prevent="submit">
    <input v-model.number="minutes" type="number" min="1" max="60"
      @blur="touched = true" :aria-invalid="touched && !valid"
      :aria-describedby="touched && !valid ? 'minutes-error' : undefined">
    <p v-if="touched && !valid" id="minutes-error">请输入 1 到 60 分钟</p>
    <button>提交</button>
  </form>
</template>