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.mzph.cn/news/647078.shtml

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

相关文章

openGauss学习笔记-207 openGauss 数据库运维-常见故障定位案例-btree 索引故障情况下应对策略

文章目录 openGauss学习笔记-207 openGauss 数据库运维-常见故障定位案例-btree 索引故障情况下应对策略207.1 btree 索引故障情况下应对策略207.1.1 问题现象207.1.2 原因分析207.1.3 处理办法 openGauss学习笔记-207 openGauss 数据库运维-常见故障定位案例-btree 索引故障情…

洛谷P5735 【深基7.例1】距离函数(C语言)

首先&#xff0c;三角形周长为 其次(x1,x2)和 &#xff08;y1,y2&#xff09;的距离 然后就可以为所欲为 #include <stdio.h> #include <math.h>double distance(double a1, double b1, double a2, double b2) {return sqrt((a1 - a2) * (a1 - a2) (b1 - b2) * …

【跳槽面试】Redis的过期键删除策略?

前言 key的生存时间到了&#xff0c;Redis会立即删除吗&#xff1f;不会立即删除。 过期策略 • 定时删除&#xff1a;在设置key的过期时间的同时&#xff0c;为该key创建一个定时器&#xff0c;让定时器在key的过期时间来临时&#xff0c;对key进行删除 • 定期删除&#xff…

简单模拟实现一个线程池

废话不多说之间上代码 import java.util.ArrayList; import java.util.List; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue;public class MyThreadPoolExecutor {private List<Thread> listnew ArrayList<>();pri…

qemu使用

百度qemu bios 失败 问题 坑爹的玩意&#xff0c;编译qemu 还需要python3.5以上 解决方法&#xff1a; CentOS7安装Python3.8-CSDN博客 https://www.cnblogs.com/Oliver.net/p/7211967.html 编译python3.8还由于openssl过低 成功启动qemu 先阅读官网 Download QEMU …

【Linux】Ubuntu的gnome切换KDE Plasma

文章目录 安装KDE Plasma桌面环境添加软件源并更新apt安装kubuntu-desktop&#xff08;作者没有成功&#xff09;aptitude安装kubuntu-desktop多次aptitude install&#xff08;特别重要特别重要&#xff09;其他kde软件包 卸载gnome桌面 Ubuntu自带的桌面环境是gnome&#xff…

基于云原生技术栈构建企业统一基础技术平台(总纲)

一、概述 本文主要介绍基于云原生技术栈建设企业技术平台的总纲&#xff0c;该技术平台对业务应用全生命周期进行管理和支撑&#xff0c;提供从需求交付、生产运行、稳定保障、资产运营&#xff0c;以及安全生产的体系化解决方案&#xff0c;为企业自建或采购技术平台提供参考。…

【嵌入式学习】C++QT-Day2-C++基础

笔记 见我的博客&#xff1a;https://lingjun.life/wiki/EmbeddedNote/19Cpp 作业 自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度…

C++ 数论相关题目(欧拉函数、筛法求欧拉函数)

1、欧拉函数 给定 n 个正整数 ai &#xff0c;请你求出每个数的欧拉函数。 欧拉函数的定义 1∼N 中与 N 互质的数的个数被称为欧拉函数&#xff0c;记为 ϕ(N) 。 若在算数基本定理中&#xff0c;Npa11pa22…pamm &#xff0c;则&#xff1a; ϕ(N) Np1−1p1p2−1p2…pm−1p…

Salesforce Lightning 的 Close Case 按钮无法批量关闭 Case 的原因和解决方法

为 Lightning 页面添加了自定义的 Close Case 按钮&#xff08;方法可参考&#xff1a;https://www.simplysfdc.com/2021/01/salesforce-mass-close-case.html&#xff09;后&#xff0c;可能会出现无法批量关闭 Case 的情况。 选中多个 Case&#xff0c;再点击 Close Case 按…

基于Springboot的影城管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的影城管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

JAVA笔记16--线程

进程 进程是处于运行过程中的程序&#xff0c;具有独立的功能&#xff0c;是系统进行资源分配和调度的独立单位。 独立性 进程是系统重独立存在的实体&#xff0c;它拥有自己独立的资源&#xff0c;每个进程都拥有自己私有的地址空间&#xff0c;在没有经过进程本身允许的情…

leetcode1237. 找出给定方程的正整数解

1237. 找出给定方程的正整数解https://leetcode.cn/problems/find-positive-integer-solution-for-a-given-equation/ 难度中等 101 给你一个函数 f(x, y) 和一个目标结果 z&#xff0c;函数公式未知&#xff0c;请你计算方程 f(x,y) z 所有可能的正整数 数对 x 和 y。满…

在线教育系统源码深度剖析:从零开始开发一款企业培训APP

下文&#xff0c;笔者将与大家一起深入研究在线教育系统源码&#xff0c;同时探究从零开始开发一款面向企业培训的APP所涉及的关键技术和流程。 一、背景介绍 企业培训是组织内部不可或缺的一环&#xff0c;而在线教育系统通过数字化手段&#xff0c;使培训更加灵活、个性化。…

访问网站时IP被阻止?5个解决方法

相信很多人遇到过IP禁令&#xff1a;比如你在访问社交媒体、搜索引擎或电子商务网站时会被限制访问&#xff0c;又或者你的的账号莫名被封&#xff0c;这些由于网络上的种种限制我们经常会遭遇IP被封的情况&#xff0c;导致无法使用继续进行网络行动。在本文中&#xff0c;我们…

红帽认证有啥用?初级红帽认证证书值得考吗?

大家好&#xff0c;这里是G-LAB IT实验室。 今天我们来了解一下Linux红帽认证。 红帽认证已成为企业和个人竞相追逐的热门资质。 红帽认证认可度究竟如何?红帽RHCSA认证含金量又有多高? 下面G-LAB将为你一一解答。 1 、红帽认证认可度怎么样&#xff1f; 事实上&#xff0…

钉钉互动卡片对接-普通互动卡片接入流程

这里写目录标题 一、创建内部应用二、搭建普通卡片模板三、调用互动卡片服务端接口接口报文一、发送卡片二、更新卡片三、获取token 一、创建内部应用 登录开发者后台&#xff0c;创建内部应用。 例如 百度-内部测试获取AppKey和AppSecret&#xff0c; 获取应用访问凭证获取企…

cmd_to_robot 讨论及 G29 控制优化

cmd_to_robot 讨论及 G29 控制优化 cmd_to_robot 讨论 转向电机控制代码中&#xff0c;补偿信息在循环中发布&#xff0c;转向完成信息在回调函数中发布 转动电机控制代码中&#xff0c;对转动电机的控制在转向完成的回调函数中实现 这就意味着如果一直没有 /cmd_vel 消息发…

蓝桥杯备赛 week 1 —— DP 背包问题

目录 &#x1f308;前言&#x1f308;&#xff1a; &#x1f4c1; 01背包问题 分析&#xff1a; dp数组求解&#xff1a; 优化&#xff1a;滚动数组&#xff1a; &#x1f4c1; 完全背包问题 &#x1f4c1; 总结 &#x1f308;前言&#x1f308;&#xff1a; 这篇文章主…

第10次修改了可删除可持久保存的前端html备忘录

第10次修改了可删除可持久保存的前端html备忘录 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…