Vue3组合式API：动态表单设计与验证

Vue3组合式API实现动态表单设计与验证

动态表单是现代Web应用中常见的组件需求，Vue3的组合式API（Composition API）为构建灵活、可维护的表单提供了强大的工具。本文将详细介绍如何使用组合式API实现动态表单设计与验证，帮助开发者掌握这一实用技能。

1. 准备工作

在开始之前，确保已安装Vue3项目并熟悉组合式API的基本概念。我们将使用ref、reactive、computed等核心函数来管理表单状态。

2. 定义表单结构

首先需要定义表单的动态结构。通常表单由多个字段组成，每个字段包含类型、标签、验证规则等属性。

const formConfig = reactive([
  {
    type: \'input\',
    label: \'用户名\',
    prop: \'username\',
    rules: [{ required: true, message: \'请输入用户名\' }]
  },
  {
    type: \'select\',
    label: \'性别\',
    prop: \'gender\',
    options: [\'男\', \'女\'],
    rules: [{ required: true, message: \'请选择性别\' }]
  },
  {
    type: \'date\',
    label: \'出生日期\',
    prop: \'birthday\',
    rules: [{ type: \'date\', required: true, message: \'请选择日期\' }]
  }
])

const formData = reactive(
  formConfig.reduce((acc, item) => {
    acc[item.prop] = item.type === \'select\' ? item.options[0] : \'\'
    return acc
  }, {})
)

const validateForm = async () => {
  const errors = {}
  for (const field of formConfig) {
    const value = formData[field.prop]
    if (field.rules) {
      for (const rule of field.rules) {
        if (rule.required && !value) {
          errors[field.prop] = rule.message
          break
        }
        if (rule.type && typeof value !== rule.type) {
          errors[field.prop] = `格式不正确，应为${rule.type}类型`
          break
        }
      }
    }
  }
  return Object.keys(errors).length ? errors : null
}

<form @submit.prevent=\"handleSubmit\">
  <div v-for=\"field in formConfig\" :key=\"field.prop\">
    <label>{{ field.label }}</label>
    <input 
      v-if=\"field.type === \'input\'\"
      v-model=\"formData[field.prop]\"
      :class=\"{ \'error\': errors[field.prop] }\"
    >
    <select 
      v-else-if=\"field.type === \'select\'\"
      v-model=\"formData[field.prop]\"
    >
      <option v-for=\"option in field.options\" :key=\"option\">{{ option }}</option>
    </select>
    <span class=\"error-message\">{{ errors[field.prop] }}</span>
  </div>
  <button type=\"submit\">提交</button>
</form>

const handleSubmit = async () => {
  const errors = await validateForm()
  if (errors) {
    Object.assign(errors, errors)
    return
  }
  // 提交逻辑
  console.log(\'表单数据:\', formData)
}