当前位置: 首页 > news >正文

ElementPlus表单验证报错 formEl.validate is not a function

出现问题的代码

  <!-- 密码重置弹框 --><el-dialog v-model="innerVisible" width="500" title="密码重置" append-to-body><el-form ref="ruleFormRef" style="max-width: 600px" :model="passForm" status-icon :rules="rules"label-width="auto" class="demo-ruleForm"><el-form-item label="密码" prop="password"><el-input v-model="passForm.password" type="password" autocomplete="off" /></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input v-model="passForm.checkPass" type="password" autocomplete="off" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="innerVisible = false">取消</el-button><el-button type="primary" @click="resetPass">提交</el-button></div></template></el-dialog>
// 密码重置
const resetPass = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.validate((valid) => {if (valid) {passForm.id = user.value.idsaveOrUpdate(passForm).then((res: any) => {if (res.code === 200) {innerVisible.value = false;ElMessage.success('提交成功!');// 刷新一下用户信息getUserData()}}).catch((error) => {ElMessage.error(error.message)});} else {console.log('error submit!')}})
}

发现点击提交时,进行校验逻辑时报错,原因是提交表单的按钮那里没有给方法传ruleFormRef:

正确写法 

     <el-button type="primary" @click="resetPass(ruleFormRef)">提交</el-button>

 

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 在线小说|基于java的小说阅读系统小程序(源码+数据库+文档)
  • Llama 3.1 大模型指令微调提升中文能力
  • 数据结构--双链表
  • 《C Primer Plus》第 2 章复习题和编程练习
  • 如何用静态住宅代理实现分布式代理网络
  • (学习总结16)C++模版2
  • 基于Python的B站热门视频可视化分析与挖掘系统
  • Ansible使用kubeadm方式一键安装k8s
  • 详解TCP的三次握手
  • git 合并分支并解决冲突
  • Kubernetes 常用命令、资源配置整理
  • IHostedLifecycleService是如何管理后台任务的
  • 学生请假管理系统
  • 执行机构是怎么运作的
  • 超详细!!!electron-vite-vue开发桌面应用之应用更新版本提示(十三)
  • php的引用
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • 【跃迁之路】【519天】程序员高效学习方法论探索系列(实验阶段276-2018.07.09)...
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • HTTP 简介
  • Java 内存分配及垃圾回收机制初探
  • Java|序列化异常StreamCorruptedException的解决方法
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • js作用域和this的理解
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • React的组件模式
  • swift基础之_对象 实例方法 对象方法。
  • tensorflow学习笔记3——MNIST应用篇
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • XForms - 更强大的Form
  • 从零到一:用Phaser.js写意地开发小游戏(Chapter 3 - 加载游戏资源)
  • 读懂package.json -- 依赖管理
  • 欢迎参加第二届中国游戏开发者大会
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 前端之Sass/Scss实战笔记
  • 深入浅出Node.js
  • 使用权重正则化较少模型过拟合
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 探索 JS 中的模块化
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 学习笔记TF060:图像语音结合,看图说话
  • 一起来学SpringBoot | 第三篇:SpringBoot日志配置
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • Java数据解析之JSON
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • linux 淘宝开源监控工具tsar
  • 阿里云移动端播放器高级功能介绍
  • ​ 全球云科技基础设施:亚马逊云科技的海外服务器网络如何演进
  • ​HTTP与HTTPS:网络通信的安全卫士
  • # dbt source dbt source freshness命令详解
  • # Spring Cloud Alibaba Nacos_配置中心与服务发现(四)
  • #pragma multi_compile #pragma shader_feature
  • #Z2294. 打印树的直径