Element-Plus如何实现表单校验和表单重置

一:页面布局介绍: 

这是我刚刚用基于vue3+element-plus写好的一个部门管理的页面

 基本的增删改查已经写好,下面我只提供页面的template和style的代码:

template

<template><el-card class="box-card"><!-- 部门管理的头部 --><div><h1 style="margin-left: 20px;">部门管理</h1></div><!-- 部门管理的主体部分 --><el-button type="primary" style="margin-left: 20px;" @click="addDeptDialog()"><el-icon><CirclePlus /></el-icon> &nbsp; 新增部门</el-button><!-- 主体内容展示 --><div class="form-box"><el-table :data="deptDate" border style="width: 100%"><el-table-column  prop="id" label="序号" width="120" align="center"/><el-table-column prop="name" label="部门名称" width="240" align="center"/><el-table-column prop="updateTime" label="最后操作时间" width="360" align="center"/><el-table-column label="操作" align="center"><template #default="scope"><el-button type="primary" :icon="Edit" circle @click="updateDept(scope.row.id)" /><el-button type="danger" :icon="Delete" circle @click="delDept(scope.row.id)"/></template></el-table-column></el-table></div>
</el-card><!-- dialog弹窗 -->
<el-dialog v-model="dialogForValue" width="450px" :title="dialogTitle"><el-form :model="deptForm">  <el-form-item label="部门名称" :label-width="formLabelWidth"><el-input v-model="deptForm.name" autocomplete="off" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogForValue = false">取消</el-button><el-button type="primary" @click="save()">确认</el-button></span></template></el-dialog>
</template>

style部分:

<style scoped>
.box-card{height: 700px;
}.form-box{margin-top: 20px;
}
</style>

二:表单校验:

通过测试我们发现,在添加部门的时候,我不在输入框里面输入内容也是可以成功添加部门数据的,这显得就不太友好。

我直接点击确定:近发现数据已经添加成功了,这就有点不符合逻辑了。

开始表单校验:
  • 1,定义表单校验规则 绑定到form表单
  • 2,把规则绑定到form表单中
  • 3,定义表单组件的引用
  • 4,检验表单
定义表单校验实例:

完整规则代码:

//定义表单校验的规则  //FormRules 是element给我们提供的,可以给我们提示
const rules = ref<FormRules>({name:[{required:true,message:'部门名称不能为空',trigger:'blur'},{min:1,max:10,message:'部门名称必须 2 - 10位',trigger:'blur'}]
})
规则绑定到表单中:

 

代码:

<el-dialog v-model="dialogForValue" width="450px" :title="dialogTitle"><el-form :model="deptForm":rules="rules">  <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name"><el-input v-model="deptForm.name" autocomplete="off" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogForValue = false">取消</el-button><el-button type="primary" @click="save()">确认</el-button></span></template></el-dialog>

看看效果:

 可以发现我们定义的校验规则已经生效了

但是规则虽然生效了,我们还是可以提交表单数据。 

我们因该在表单校验不通过的时候,阻止表单提交。

定义表单组件的引用:

代码:

//定义表单组件的引用  FormInstance 表单实例 是element给我们提供的
const deptFormRef = ref<FormInstance>()

 把这个表单组件的引用,绑定到我们自己的表单中。

代码:

<!-- dialog弹窗 ref="formRef 为了获取这个表单" -->
<el-dialog v-model="dialogForValue" width="450px" :title="dialogTitle"><el-form :model="deptForm":rules="rules"ref="deptFormRef">  <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name"><el-input v-model="deptForm.name" autocomplete="off" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogForValue = false">取消</el-button><el-button type="primary" @click="save()">确认</el-button></span></template></el-dialog>

在添加dialog弹窗里面,点击保存的时候,我们因该先判断表单校验是否通过,才能往下执行。

代码:

//确认保存
const save = async () =>{//先表单校验 await deptFormRef.value?.validate().catch(err =>{ElMessage.error('表单校验的失败')throw err   //throw err  //下面正常的代码就不会执行了,回抛出异常})//正式向后端发送请求let result //判断是添加还是修改if(dialogTitle.value == '新增部门'){//添加的请求result = await insertDeptApi(deptForm.value)}else{//修改的请求result = await updateDeptApi(deptForm.value)}if(result.code){ElMessage.success('操作成功')}else{ElMessage.error('操作失败')}//关闭弹窗dialogForValue.value = false//重新查询search()
}

测试:

可以看到表单校验成功了

控制台报错:

不想提示报错还有另一种方式:

代码:

//确认保存
const save = async () =>{//先表单校验 await deptFormRef.value?.validate().catch(err =>{ElMessage.error('表单校验的失败')//throw err   //throw err  //下面正常的代码就不会执行了,回抛出异常return new Promise(() => {}) //不想抛错可以这样,promise是待定状态,也不会往下执行})//正式向后端发送请求let result //判断是添加还是修改if(dialogTitle.value == '新增部门'){//添加的请求result = await insertDeptApi(deptForm.value)}else{//修改的请求result = await updateDeptApi(deptForm.value)}if(result.code){ElMessage.success('操作成功')}else{ElMessage.error('操作失败')}//关闭弹窗dialogForValue.value = false//重新查询search()
}

测试:

三:表单重置:

上面我们的表单校验已经成功了,但是我们会发现一个缺点就是,表单校验失败的提示信息一直都在。

我先把错误信息显示出来之后,然后关闭dialog弹窗,接着我在打开dialog弹窗,发现错误信息依然在。

定义表单重置的方法:

form是一会调用方法,传递过来的表单实例参数,就是一个变量名。后面的 FormInstance和undefined就是一个泛型。

代码:

//表单重置
const resetForm = (form : FormInstance | undefined) =>{if(!form) returnform.resetFields()
}

在点击新增部门和修改部门的方法时,调用重置表单的方法。

代码:

  <el-button type="primary" style="margin-left: 20px;" @click="addDeptDialog();resetForm(deptFormRef)"><el-icon><CirclePlus /></el-icon> &nbsp; 新增部门</el-button>

代码:

    <el-table-column label="操作" align="center"><template #default="scope"><el-button type="primary" :icon="Edit" circle @click="updateDept(scope.row.id);resetForm(deptFormRef)" /><el-button type="danger" :icon="Delete" circle @click="delDept(scope.row.id)"/></template></el-table-column>

测试:

在测试一个错误的,然后退出,重新打开看效果。

 成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/247271.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【YOLO系列算法俯视视角下舰船目标检测】

YOLO系列算法俯视视角下舰船目标检测 数据集和模型YOLO系列算法俯视视角下舰船目标检测YOLO系列算法俯视视角下舰船目标检测可视化结果 数据集和模型 数据和模型下载&#xff1a; YOLOv6俯视视角下舰船目标检测训练好的舰船目标检测模型舰船目标检测数据YOLOv7俯视视角下舰船…

贝锐蒲公英全新网页认证,保障企业访客无线网络安全

随着企业规模的不断扩大、人员的增长、无线终端数量/类型的增加&#xff0c;传统WiFi无线网络会暴露出越来越多的问题&#xff0c;导致无线网络管理困难。 比如&#xff1a;采用弱密码、安全防护不到位的默认设置、员工缺乏信息安全意识、未经授人员权访问无线网络…… 这些问…

【Redis】Redis有哪些适合的场景

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Redis ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 &#xff08;1&#xff09;会话缓存&#xff08;Session Cache&#xff09; &#xff08;2&#xff09;全页缓存&#xff08;FPC…

【极数系列】Flink配置参数如何获取?(06)

文章目录 gitee码云地址简介概述01 配置值来自.properties文件1.通过路径读取2.通过文件流读取3.通过IO流读取 02 配置值来自命令行03 配置来自系统属性04 注册以及使用全局变量05 Flink获取参数值Demo1.项目结构2.pom.xml文件如下3.配置文件4.项目主类5.运行查看相关日志 gite…

Linux 网络流量相关工具

本文聚焦于网络流量的查看、端口占用查看。至于网络设备的管理和配置&#xff0c;因为太过复杂且不同发行版有较大差异&#xff0c;这里就不赘述&#xff0c;后面看情况再写。 需要注意的是&#xff0c;这里列出的每一个工具都有丰富的功能&#xff0c;流量/端口信息查看只是其…

探索Pyecharts之美-绘制多彩旭日图的艺术与技巧【第37篇—python:旭日图】

文章目录 引言准备工作绘制基本旭日图调整颜色和样式添加交互功能定制标签和标签格式嵌套层级数据高级样式与自定义进阶主题&#xff1a;动态旭日图数据源扩展&#xff1a;外部JSON文件总结 引言 数据可视化在现代编程中扮演着重要的角色&#xff0c;而Pyecharts是Python中一个…

数据结构——链式二叉树(3)

本篇文章我们依然讲解链式二叉树的OJ题&#xff1b; 一、二叉树的层序遍历 层序遍历即从根节点开始一层一层的遍历。我们可以运用队列的先进先出特性实现&#xff01; //层序遍历 void a(BTNode* root) {Que qhead;Queueinit(&qhead);//先入队根节点if(root)QueuePush(&…

三维重建(7)--运动恢复结构SfM系统解析

目录 一、SfM系统&#xff08;两视图&#xff09; 1、特征提取 2、特征匹配 3、RANSAC求解基础矩阵F 4、完整的欧式结构恢复算法流程 二、基于增量法的SfM系统&#xff08;以OpenMVG为例&#xff09; 1、预处理 2、图像特征点提取与匹配 3、两视图重构点云 4、增加…

LPC系列一个定时器不同频率

1.背景 最近研究的LPC804里只有一个ctimer&#xff0c;很多时候用的捉襟见肘的&#xff0c;官方给了一份双匹配的参考例程&#xff0c;不过实际用处不大。不过我花了一晚上的时间&#xff0c;终于研究出来将一个定时器拆成四个定时器用的办法了。这个方法适用于用回调函数的LP…

RabbitMQ(一)

1、相关概念 1.1、消息队列&#xff08;MQ&#xff09; MQ(message queue)&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO 先入先出&#xff0c;只不过队列中存放的内容是message 而已&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递消…

移动Web——平面转换-多重转换

1、平面转换-多重转换 多重转换技巧&#xff1a;先平移再旋转 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name&qu…

数据结构——链式二叉树

目录 &#x1f341;一、二叉树的遍历 &#x1f315;&#xff08;一&#xff09;、前序遍历(Preorder Traversal 亦称先序遍历) &#x1f315;&#xff08;二&#xff09;、中序遍历(Inorder Traversal) &#x1f315;&#xff08;三&#xff09;、后序遍历(Postorder Traver…

scrapy的入门使用

1 安装scrapy 命令: sudo apt-get install scrapy或者&#xff1a; pip/pip3 install scrapy2 scrapy项目开发流程 创建项目: scrapy startproject mySpider生成一个爬虫: scrapy genspider itcast itcast.cn提取数据:     根据网站结构在spider中实现数据采集相关内…

centos系统安装Ward服务器监控工具

简介 Ward是一个简约美观多系统支持的服务器监控面板 安装 1.首先安装jdk yum install java-1.8.0-openjdk-devel.x86_64 2.下载jar wget 3.启动 java -jar ward-1.8.8.jar 体验 浏览器输入 http://192.168.168.110:4000/ 设置服务名设置为:myserver 端口号:5000 点击…

WSL2 Debian系统添加支持SocketCAN

本人最近在使用WSL2&#xff0c;Linux系统选择的是Debian&#xff0c;用起来很不错&#xff0c;感觉可以代替VMware Player虚拟机。 但是WSL2 Debian默认不支持SocketCAN&#xff0c;这就有点坑了&#xff0c;由于本人经常要使用SocketCAN功能&#xff0c;所以决定让Debian支持…

开始学习第二十五天(番外)

今天分享一下写的小游戏啦 头文件game.h #include<stdio.h> #include<time.h> #include<stdlib.h> #define H 3 #define L 3 void InitBoard(char Board[H][L], int h, int l); void DisplayBoard(char Board[H][L], int h, int l); void playermove(cha…

【LeetCode: Z 字形变换 + 模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

5G_RACH(一)

什么是RACH RACH 代表 Random Access Channel。这是开机时UE发给eNB的第一条消息。 为什么选择RACH &#xff1f;&#xff08;RACH 的功能是什么&#xff1f; 当你第一次听到RACH或RACH Process这个词时&#xff0c;你脑海中浮现的第一个问题是“为什么是RACH&#xff1f;”…

Windows XP x86 sp3 安装 Google Chrome 49.0.2623.112 (正式版本) (32 位)

1 下载地址&#xff1b; https://dl.google.com/release2/h8vnfiy7pvn3lxy9ehfsaxlrnnukgff8jnodrp0y21vrlem4x71lor5zzkliyh8fv3sryayu5uk5zi20ep7dwfnwr143dzxqijv/49.0.2623.112_chrome_installer.exe 2 直接 双击 49.0.2623.112_chrome_installer.exe 安装&#xff1b; 3 …

Redis6基础知识梳理~

初识NOSQL&#xff1a; NOSQL是为了解决性能问题而产生的技术&#xff0c;在最初&#xff0c;我们都是使用单体服务器架构&#xff0c;如下所示&#xff1a; 随着用户访问量大幅度提升&#xff0c;同时产生了大量的用户数据&#xff0c;单体服务器架构面对着巨大的压力 NOSQL解…