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 = () => {
  if (validate()) {
    console.log('表单验证通过，提交数据：', formModel);
    resetFields();
  } else {
    console.log('表单验证失败');
  }
};
// 重置表单
const onReset = () => {
  resetFields();
};
// 导出组件选项
export default {
  setup() {
    return {
      formModel,
      register,
      validate,
      onSubmit,
      onReset,
    };
  },
};