原生html + vue3 获取引用元素refs - elementUI如何在setup中进行表单校验设置

背景:

原生Html 引入elementPlust + vue3 ,需要在vue3 setup里做表单校验,通过el-form ref='form' 的refs元素执行校验。

解决方案1:

保存vue挂载之后实例vm为一个常量,由实例来获取:vm.$refs.form.validate()获取校验结果

最终效果:

提交时,检验结果展示 

html源码

<!DOCTYPE html>
<html>
<!--带搜索输入框下拉弹窗
-->
<head><meta charset="UTF-8"><!-- import Vue before Element --><script src="../js/vue3.3.8/vue.global.js"></script><link rel="stylesheet" href="../js/elementPlus/index.css"><script src="../js/elementPlus/index.full.js"></script><title></title></head>
<body>
<div id="app"><!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 --><el-button type="success" @click="onsubmit">保存按钮</el-button><el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm"status-icon><div class="section-header">商品信息<el-checkbox label="自动" size="large" checked></el-checkbox></div><el-row><el-col :span="9"><el-form-item label="商品名称" prop="name"><el-input placeholder="商品名称长度必须小于20" v-model="formData.name"></el-input></el-form-item></el-col><el-col :span="9"><el-form-item label="商品编码" prop="code"><el-input placeholder="系统自动生成" v-model='formData.code'></el-input></el-form-item></el-col></el-row><el-divider></el-divider></el-form></div>
</body><script>const {createApp, ref, reactive} = Vueconst {ElMessageBox} = ElementPlusconst app = createApp({setup() {const message = ref('Hello vue!')const formData = ref({name: '', code: ''})const rules = reactive({name: [{required: true, trigger: 'blur'}],code: [{required: true, trigger: 'blur'}],})const onsubmit = (e) => {console.log(vm.$refs.ruleFormRef)vm.$refs.ruleFormRef.validate(valid => {if (valid) {alert('校验成功')} else {alert('失败')}})}return {message, formData, rules, onsubmit,change: (e) => {console.log('修改值', e)}}},created() {},mounted() {console.log('|--mounted', this)}})app.use(ElementPlus)const vm = app.mount('#app')
</script>
</html>

 这里一开始获取ruleFormRef这个表单对象,用this获取不到

 const vm = app.mount('#app') 

因为这句话,最后歪打正着,通过vm这个实例,获取:vm.$refs.ruleFormRef.validate()得到检验结果。

解决方案2

挂载完成,将$refs.form对象赋值给一个setup中创建的响应式变量:

const ruleFormRefElement = ref('')
mounted() {this.ruleFormRefElement = this.$refs.ruleFormRef
}

这样,只要保证,setup中需要用的地方是挂载完成之后的动作去使用:ruleFormRefElement 它即可。

效果:

html源码 

<!DOCTYPE html>
<html>
<!--带搜索输入框下拉弹窗
-->
<head><meta charset="UTF-8"><!-- import Vue before Element --><script src="../js/vue3.3.8/vue.global.js"></script><link rel="stylesheet" href="../js/elementPlus/index.css"><script src="../js/elementPlus/index.full.js"></script><title></title></head>
<body>
<div id="app"><!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 --><el-button type="success" @click="onsubmit">保存按钮</el-button><el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm"status-icon><div class="section-header">商品信息<el-checkbox label="自动" size="large" checked></el-checkbox></div><el-row><el-col :span="9"><el-form-item label="商品名称" prop="name"><el-input placeholder="商品名称长度必须小于20" v-model="formData.name"></el-input></el-form-item></el-col><el-col :span="9"><el-form-item label="商品编码" prop="code"><el-input placeholder="系统自动生成" v-model='formData.code'></el-input></el-form-item></el-col></el-row><el-divider></el-divider></el-form></div>
</body><script>const {createApp, ref, reactive} = Vueconst {ElMessageBox} = ElementPlusconst app = createApp({setup() {const message = ref('Hello vue!')const formData = ref({name: '', code: ''})const rules = reactive({name: [{required: true, trigger: 'blur'}],code: [{required: true, trigger: 'blur'}],})const ruleFormRefElement = ref('') //用一个变量来保存$refs元素,在挂载完成时赋值(mounted),这样在setup中就可以方便操作表单校验结果检查:ruleFormRefconst onsubmit = (e) => {ruleFormRefElement.value.validate(valid => { //表单验证if (valid) {alert('提交校验:成功')} else {alert('提交校验:失败')}})}return {message, formData, rules, onsubmit,change: (e) => {console.log('修改值', e)}, ruleFormRefElement,}},created() {},mounted() {console.log('|--mounted', this.$refs)this.ruleFormRefElement = this.$refs.ruleFormRefconsole.log('|--mounted,this.ruleFormRefElement', this.ruleFormRefElement)}})app.use(ElementPlus)const vm = app.mount('#app')
</script>
</html>

相关:

在vue3项目嵌套 导入老项目 jQuery项目,减少重复开发-CSDN博客

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

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

相关文章

GBASE南大通用ADO.NET 结构

GBASE南大通用ADO.NET&#xff08;全称是 .NET Framework Data Provider For GBase&#xff09;提 供给.NET 应用程序访问 GBase 数据库、获取数据、管理数据的一套完整的解决 方案。 GBASE南大通用 ADO.NET 的四个核心类及若干功能类具有以下功能&#xff1a;  建立和管…

低代码软件开发的革命

一、前言 如果一个概念能在科技圈火起来&#xff0c;它往往兼具字面简明和内涵丰富的特征&#xff0c;并具有某种重塑产业格局的潜力。低代码&#xff08;Low Code&#xff09;就是这样一个典型。顾名思义&#xff0c;低代码是指少用代码&#xff0c;甚至不用代码&#xff0c;仅…

【LeetCode:1901. 寻找峰值 II | 二分】

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

中华儿慈会回家的希望宝贝守护计划儿童安全反拐宣传活动

为帮助低龄段儿童树立防拐反拐意识&#xff0c;提高儿童自护自救能力&#xff0c;近日&#xff0c;遂宁艺宁妇女儿童社会工作服务中心在汤普森幼儿园等学校开展了中华儿慈会回家的希望宝贝守护计划活动。 讲师志愿者通过设定动画人物形象讲述防拐故事&#xff0c;教授儿童遇到陌…

EasyExcel导入excel文件解析日期格式数据出现偏差

Excel日期字段值&#xff1a; 7:00:00 解决方案&#xff1a; 增加 DateTimeFormat("HH:mm")

Excel表格中的选项按钮,如何设置?

大家是否会遇到需要勾中选项的情况&#xff0c;我们可以在电子表格中制作出可以勾选、选中的选项按钮&#xff0c;今天我们一起学习一下设置方法。 首先&#xff0c;我们需要先在excel工具栏中添加一个功能模块&#xff1a;开发工具 依次点击excel中的文件 – 选项 – 自定义…

QEMU源码全解析 —— virtio(16)

接前一篇文章&#xff1a; 上一回讲解了virtio_pci_device_plugged函数的第3、4两部分&#xff0c;本回继续讲解virtio_pci_device_plugged函数的其余部分。为了便于理解&#xff0c;再次贴出virtio_pci_device_plugged函数源码&#xff0c;在hw/virtio/virtio-pci.c中&#xf…

Java 泛型 - 从入门到入土

1、概念 泛型的本质是参数化类型&#xff0c;即给类型指定一个参数&#xff0c;然后在使用时再指定此参数具体的值&#xff0c;那样这个类型就可以在使用时决定了。这种参数类型可以用在类、接口和方法中&#xff0c;分别被称为泛型类、泛型接口、泛型方法。 Java中引入泛型最…

VR虚拟仿真技术应用到外事警察岗位技能培训的场景及优势

VR治安民警常态化工作实战教学演练是一种利用VR虚拟现实制作和web3d开发技术进行治安民警培训和实战演练的新型教学模式。相较于传统的培训方式&#xff0c;VR治安民警常态化工作实战教学演练具有以下优点&#xff1a; VR实战是一种完全虚拟的实战训练方式&#xff0c;他可以根…

Java 中单例模式的常见实现方式

一、什么是单例模式&#xff1f; 单例模式是一种创建型设计模式&#xff0c;它确保类只有一个实例&#xff0c;并提供全局访问点让外部代码可以访问该实例。 在 Java 中&#xff0c;可以使用单例模式来实现一些全局性的操作&#xff0c;例如配置文件管理、线程池管理、数据库连…

Linux系统中查看路由表的命令(ip route)

以下命令是在Linux系统中查看路由表的命令&#xff1a; 在Linux系统中&#xff0c;有多种方法可以查看路由设置。以下是一些常用的命令&#xff1a; ip route 或 ip -4 route&#xff08;IPv4&#xff09;/ ip -6 route&#xff08;IPv6&#xff09;&#xff1a; 这是最常用且功…

【数据结构】树状数组算法总结

知识概览 树状数组有两个作用&#xff1a; 快速求前缀和 时间复杂度O(log(n))修改某一个数 时间复杂度O(log(n)) 例题展示 1. 单点修改&#xff0c;区间查询 题目链接 活动 - AcWing本活动组织刷《算法竞赛进阶指南》&#xff0c;系统学习各种编程算法。主要面向…

使用IDEA创建springboot依赖下载很慢,解决方法

显示一直在resolving dependencies&#xff0c;速度很慢 原因&#xff1a;maven会使用远程仓库来加载依赖&#xff0c;是一个国外的网站&#xff0c;所以会很慢。应该使用阿里云的镜像&#xff0c;这样速度会提升很多。 步骤&#xff1a;1.右击pom.xml&#xff0c;选择"m…

nodejs+vue+微信小程序+python+PHP购物商城网站-计算机毕业设计推荐

综合购物商城管理经历和对网上信息归纳整理的结果&#xff0c;在实际应用中&#xff0c;将用户分为两种&#xff1a;管理员和用户两个角色。其中用户可以操作的内容是有限的&#xff0c;管理员可以进行的操作最多。了解系统用户的分类以及可以进行的操作&#xff0c;对于接下来…

windows下seleninum环境搭建

一&#xff1a;介绍 selenium 是一个web的自动化测试工具&#xff0c;不少学习功能自动化的同学开始首选selenium &#xff0c;相因为它相比QTP有诸多有点&#xff1a; * 免费&#xff0c;也不用再为破解QTP而大伤脑筋 * 小巧&#xff0c;对于不同的语言它只是一个包而已&…

10kw直流负载主要工作方式

直接供电方式&#xff1a;是最简单的工作方式&#xff0c;即通过一个稳定的直流电源直接为10kW直流负载供电。这种方式的优点是简单、可靠&#xff0c;但缺点是电源的选择和配置较为复杂&#xff0c;需要考虑到负载的工作电压、电流、功率因数等因素。此外&#xff0c;如果电源…

JavaWeb编程语言—登录校验

一、前言&简介 前言&#xff1a;小编的上一篇文章“JavaWeb编程语言—登录功能实现”&#xff0c;介绍了如何通过Java代码实现通过接收前端传来的账号、密码信息来登录后端服务器&#xff0c;但是没有实现登录校验功能&#xff0c;这代表着用户不需要登录也能直接访问服务器…

SpringBoot项目jar包加密防止反编译

业务场景 由于公司业务需要&#xff0c;需要把jar包部署到其它公司的服务器&#xff0c;又不想泄露源码。 解决方法 1、代码混淆 采用proguard-maven-plugin插件 在单模块中此方案还算简单&#xff0c;但是现在项目一般都是多模块&#xff0c;一个模块依赖多个公共模块。那…

4.docker镜像及相关命令

目录 1 查看所有镜像 docker images 1.1 基本用法 1.2 docker images -q 只显示所有镜像ID 1.3 docker images -f [筛选条件] -q 只显示符合条件的所有镜像ID 1.4 docker images --no-trunc 显示完整的IMAGE ID 1.5 docker images --format [模板] 使用模板 2 从…

十问ByteHouse:如何基于ClickHouse玩转向量检索?

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 向量检索被广泛使用于以图搜图、内容推荐以及大模型推理等场景。随着业务升级与 AI 技术的广泛使用&#xff0c;用户期望处理的向量数据规模越来越大&#xff0c;对…