Vue3动态表单

news/2024/11/7 22:43:42/

示例代码如下:

// 引入需要的依赖包
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,};},
};

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


http://www.ppmy.cn/news/1255122.html

相关文章

k8s部署rocketmq单节点(server+broker+console)—— 筑梦之路

之前写过几篇关于rocketmq构建双架构镜像、docker-compose部署的文章,接上篇docker-compose部署rocketmq,这里记录下k8s下如何部署。 多架构环境下docker-compose部署rocketmq单机模式—— 筑梦之路-CSDN博客 nameserver节点 apiVersion: apps/v1 kin…

sed笔记231127 `-e`基本正则,`-E`扩展版正则

-e基本正则,-E扩展版正则 -E, -r, --regexp-extended 在脚本中使用扩展正则表达式(为保证可移植性使用 POSIX -E)。-e或 --expression 接基本正则表达式, 可多次使用,多次过滤-f 或 --file 选项接脚本文件, 注意是脚本文件, 而不是输入文件 -e可以不写…

【开源】前后端分离的在线考试系统,支持多种部署方式

在线考试系统 https://download.csdn.net/download/mo3408/88593116 在线考试系统是一种利用网络技术,实现在线出题、答题、阅卷、成绩查询等一系列考试活动的系统。它不受地理位置限制,可以实现远程考试,大大提高了考试的效率和便利性。此…

【计算机概论 ①】- 电脑:辅助人脑的好工具

目录 一、电脑硬件的五大单元 二、一切设计的起点:CPU 的架构 三、其他单元的设备 四、运行流程 五、电脑的分类 六、电脑上面常用的计算单位(容量、速度等) 操作系统跟硬件有相当程度的关联性,所以,如果不了解一…

LeetCode417. Pacific Atlantic Water Flow

文章目录 一、题目二、题解 一、题目 There is an m x n rectangular island that borders both the Pacific Ocean and Atlantic Ocean. The Pacific Ocean touches the island’s left and top edges, and the Atlantic Ocean touches the island’s right and bottom edges…

在 Qt 的文本编辑类中,document() 是一个成员函数,用于获取文档对象

在 Qt 的文本编辑类中,document() 是一个成员函数,用于获取文档对象。它返回与文本编辑器关联的 QTextDocument 对象的指针。 QTextDocument 类是 Qt 中用于处理富文本内容的类。它包含了文本内容以及相关的格式、样式和布局信息。通过 document() 函数…

SmartSoftHelp8,图片版权保护工具,水印加密文件

设置水印文本内容 设置水印位置 设置水印图片内容 设置水印图片位置 对图片进行版权保护 下载地址: https://pan.baidu.com/s/1zBgeYsqWnSlNgiKPR2lUYg?pwd8888

免费AI洗稿软件【2023最新】

很多时候我们需要通过文字来表达观点、推广产品或服务。然而,长时间的文稿创作不仅费时费力,还容易陷入表达瓶颈。许多写手和从业者纷纷寻找一款方便、高效的AI洗稿工具。 文心一言洗稿软件。这款软件以其独特的文风生成和洗稿功能而备受瞩目。用户只需…