Vue3动态表单

本文介绍: 函数创建了一个表单实例。接着注册了表单字段，并对每个字段进行了一些基本的验证规则设置。最后，我们定义了提交表单和重置表单的方法，并在组件中使用这些方法。然后定义了一个表单数据模型。在这段代码中，我们首先引入了。

// 引入需要的依赖包
import { ref, reactive } from 'vue';
import { useForm } from '@/composables/useForm';

// 定义表单数据模型
const formModel = reactive({
  name: '',
  age: '',
  gender: '',
});

// 使用自定义的useForm函数创建表单实例
const { register, validate, resetFields } = useForm(formModel);

// 注册表单字段
register('name', { required: true, message: '请输入姓名' });
register('age', { required: true, message: '请输入年龄', type: 'number', min: 18, max: 60 });
register('gender', { required: true, message: '请选择性别' });

// 提交表单
const onSubmit = () =&gt; {
  if (validate()) {
    console.log('表单验证通过，提交数据：', formModel);
    resetFields();
  } else {
    console.log('表单验证失败');
  }
};

// 重置表单
const onReset = () =&gt; {
  resetFields();
};

// 导出组件选项
export default {
  setup() {
    return {
      formModel,
      register,
      validate,
      onSubmit,
      onReset,
    };
  },
};