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,};},
};

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