vue 实现新增表单

实现新增表单的基本步骤

在Vue中实现新增表单功能，可以通过以下方式完成。假设使用Vue 3和Composition API。

模板部分

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="name">名称：</label>
      <input id="name" v-model="formData.name" type="text" />
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input id="email" v-model="formData.email" type="email" />
    </div>
    <button type="submit">提交</button>
  </form>
</template>

脚本部分

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  name: '',
  email: ''
})

const handleSubmit = () => {
  console.log('提交数据:', formData)
  // 这里可以添加API调用或其他处理逻辑
  // 例如：axios.post('/api/users', formData)
}
</script>

表单验证的实现

使用Vuelidate进行表单验证可以提升用户体验。

安装Vuelidate：

npm install @vuelidate/core @vuelidate/validators

实现验证：

<script setup>
import { reactive } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

const formData = reactive({
  name: '',
  email: ''
})

const rules = {
  name: { required },
  email: { required, email }
}

const v$ = useVuelidate(rules, formData)

const handleSubmit = async () => {
  const isValid = await v$.value.$validate()
  if (!isValid) return

  console.log('验证通过，提交数据:', formData)
}
</script>

表单重置功能

添加重置按钮可以方便用户重新填写表单。

<template>
  <form @submit.prevent="handleSubmit" @reset="handleReset">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </form>
</template>

<script setup>
const handleReset = () => {
  formData.name = ''
  formData.email = ''
  v$.value.$reset()
}
</script>

表单加载状态

在提交表单时显示加载状态可以提升用户体验。

<script setup>
import { ref } from 'vue'

const isLoading = ref(false)

const handleSubmit = async () => {
  isLoading.value = true
  try {
    await axios.post('/api/users', formData)
    // 处理成功情况
  } catch (error) {
    // 处理错误
  } finally {
    isLoading.value = false
  }
}
</script>

<button type="submit" :disabled="isLoading">
  {{ isLoading ? '提交中...' : '提交' }}
</button>

表单成功/错误反馈

添加成功和错误提示可以让用户明确操作结果。

<script setup>
const isSuccess = ref(false)
const errorMessage = ref('')

const handleSubmit = async () => {
  try {
    await axios.post('/api/users', formData)
    isSuccess.value = true
    errorMessage.value = ''
  } catch (error) {
    isSuccess.value = false
    errorMessage.value = error.response?.data?.message || '提交失败'
  }
}
</script>

<template>
  <div v-if="isSuccess" class="success-message">
    提交成功！
  </div>
  <div v-if="errorMessage" class="error-message">
    {{ errorMessage }}
  </div>
</template>