表单事件处理

表单交互涉及提交、重置和验证等操作。

表单提交

HTML

<form @submit.prevent="onSubmit">
  <input v-model="name" />
  <button type="submit">提交</button>
</form>

JavaScript

methods: {
  onSubmit() {
    console.log('提交的数据:', this.name)
    // 发送请求...
  }
}

使用 .prevent 阻止表单默认提交行为。

表单重置

HTML

<form ref="myForm" @submit.prevent="onSubmit">
  <input v-model="name" />
  <button type="reset" @click="onReset">重置</button>
</form>

JavaScript

methods: {
  onReset() {
    this.name = ''
    // 重置其他字段...
  }
}

表单验证

HTML

<form @submit.prevent="onSubmit">
  <input v-model="email" @blur="validateEmail" />
  <span v-if="errors.email">{{ errors.email }}</span>
  <button type="submit">提交</button>
</form>

JavaScript

data() {
  return {
    email: '',
    errors: {}
  }
},
methods: {
  validateEmail() {
    if (!this.email.includes('@')) {
      this.errors.email = '邮箱格式不正确'
    } else {
      this.errors.email = ''
    }
  }
}

要点总结

使用 @submit.prevent 阻止默认提交
表单验证可在 blur 或 submit 事件时触发
重置表单通过重置数据实现
复杂表单可考虑使用验证库（如 VeeValidate）