form表单的使用

模板

<template><el-form :model="formData"  ref="form1Ref" :rules="rules"><el-form-item label="手机号" prop="tel"><el-input v-model="formData.tel" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm()">注册</el-button><el-button @click="resetForm()">重置</el-button></el-form-item>
</el-form>
</template><script setup lang="ts">const formData = reactive({tel: '',code: '',})const rules = reactive({code: [{ required: true, message: '请输入验证码', trigger: 'blur' },{ pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' },],})const submit = () => {console.log(formData);}const form1Ref = ref() // XXXXRef 是查找原生的dom对象 ? 在vue中如何获取原生的dom组件
const submitForm = async () => {await form1Ref.value.validate((valid: any, fields: any) => {if (valid) {submit()}})
}
const resetForm = () => {form1Ref.value.resetFields()
}
</script>

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

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

相关文章

【priority_queue的使用及模拟实现】—— 我与C++的不解之缘(十六)

前言 ​ priority_queue&#xff0c;翻译过来就是优先级队列&#xff0c;但是它其实是我们的堆结构&#xff08;如果堆一些遗忘的可以看一下前面的文章复习一下【数据结构】二叉树——顺序结构——堆及其实现_二叉树顺序结构-CSDN博客&#xff09;&#xff0c;本篇文章就来使用…

php 与 thinkphp 13 张 表 关联 查询,a.pry_key=b.pry_key and c.pry_key= b.pry_key 代码示例

在 PHP 中&#xff0c;假设你有 13 张表并且这些表之间通过 pry_key 关联&#xff0c;你可以使用 SQL 的 JOIN 来将这些表连接在一起&#xff0c;然后通过 PHP 执行该查询。以下是一个简化的示例&#xff0c;展示如何通过 JOIN 语句将 13 张表联接&#xff0c;并使用 PHP 代码执…

MacOS下的Opencv3.4.16的编译

前言 MacOS下编译opencv还是有点麻烦的。 1、Opencv3.4.16的下载 注意&#xff0c;我们使用的是Mac&#xff0c;所以ios pack并不能使用。 如何嫌官网上下载比较慢的话&#xff0c;可以考虑在csdn网站上下载&#xff0c;应该也是可以找到的。 2、cmake的下载 官网的链接&…

Kibana 本地安装使用

一 Kibana简介 1.1 Kibana 是一种数据可视化工具&#xff0c;通常需要结合Elasticsearch使用&#xff1a; Elasticsearch 是一个实时分布式搜索和分析引擎。 Logstash 为用户提供数据采集、转换、优化和输出的能力。 Kibana 是一种数据可视化工具&#xff0c;为 Elasticsear…

#Js篇:JSON.stringify 和 JSON.parse用法和传参

JSON.stringify 和 JSON.parse 1. JSON.stringify JSON.stringify 方法将一个 JavaScript 对象或数组转换为 JSON 字符串。 基本用法 const obj { name: "Alice", age: 25 }; const jsonString JSON.stringify(obj); console.log(jsonString); // 输出: {"…

基于大数据爬虫数据挖掘技术+Python的网络用户购物行为分析与可视化平台(源码+论文+PPT+部署文档教程等)

#1024程序员节&#xff5c;征文# 博主介绍&#xff1a;CSDN毕设辅导第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老…

【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构

Android Studio 版本 Android Java MVP 模式 参考 模型层 model public class User {private String email;private String password;public User(String email, String password) {this.email = email;this.password = password;}public String getEmail() {return email;}…

android 使用MediaPlayer实现音乐播放--获取音乐数据

前面已经添加了权限&#xff0c;有权限后可以去数据库读取音乐文件&#xff0c;一般可以获取全部音乐、专辑、歌手、流派等。 1. 获取全部音乐数据 class MusicHelper {companion object {SuppressLint("Range")fun getMusic(context: Context): MutableList<Mu…

Android kotlin之配置kapt编译器插件

配置项目目录下的gradle/libs.versions.toml文件&#xff0c;添加kapt配置项&#xff1a; 在模块目录下build.gradle.kt中增加 plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android)// 增加该行alias(libs.plugins.jetbrains.kotl…

【FAQ】HarmonyOS SDK 闭源开放能力 —Share Kit

1.问题描述&#xff1a; 使用系统分享组件分享本地文件&#xff0c;点击分享菜单下方的“另存为” 将要分享的文件分享至系统文件管理中&#xff0c;在文件管理中查看分享进来的文件为0B。尝试了3种uri的写法都不行&#xff0c;代码如下&#xff1a; const uri getContext()…

音视频入门基础:MPEG2-TS专题(7)——FFmpeg源码中,读取出一个transport packet数据的实现

一、引言 从《音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;3&#xff09;——TS Header简介》可以知道&#xff0c;TS格式有三种&#xff1a;分别为transport packet长度固定为188、192和204字节。而FFmpeg源码中是通过read_packet函数从一段MPEG2-TS传输流/TS文件中读…

HarmonyOs DevEco Studio小技巧31--卡片的生命周期与卡片的开发

Form Kit简介 Form Kit&#xff08;卡片开发服务&#xff09;提供一种界面展示形式&#xff0c;可以将应用的重要信息或操作前置到服务卡片&#xff08;以下简称“卡片”&#xff09;&#xff0c;以达到服务直达、减少跳转层级的体验效果。卡片常用于嵌入到其他应用&#xff0…

《C++20 图形界面程序:速度与渲染效率的双重优化秘籍》

在当今数字化时代&#xff0c;图形界面程序的性能至关重要。使用 C20 开发图形界面程序时&#xff0c;优化界面响应速度和图形渲染效率是我们必须关注的焦点&#xff0c;这直接影响用户体验和程序的实用性。 一、理解界面响应速度和图形渲染效率的重要性 对于图形界面程序&am…

Spring Boot应用开发实战:构建高效、可维护的Web应用

Spring Boot应用开发实战:构建高效、可维护的Web应用 在当今快速迭代的软件开发环境中,Spring Boot凭借其“约定优于配置”的理念,迅速成为Java开发者构建微服务及Web应用的首选框架。它不仅简化了Spring应用的初始搭建以及开发过程,还通过自动配置、嵌入式服务器等特性,…

软件测试之测试用例扩展

软件测试之测试用例扩展 1. 测试用例覆盖2. UI布局覆盖3. 兼容性覆盖4. 测试用例条数 1. 测试用例覆盖 规则覆盖UI布局兼容性 2. UI布局覆盖 2条用例即可 布局, 颜色与原型图一致图片和文字描述无误 3. 兼容性覆盖 测试5大浏览器 火狐谷歌ieEge苹果 4. 测试用例条数 使…

【GeekBand】C++设计模式笔记11_Builder_构建器

1. “对象创建” 模式 通过 “对象创建” 模式绕开new&#xff0c;来避免对象创建&#xff08;new&#xff09;过程中所导致的紧耦合&#xff08;依赖具体类&#xff09;&#xff0c;从而支持对象创建的稳定。它是接口抽象之后的第一步工作。典型模式 Factory MethodAbstract …

Ubuntu问题 - 显示ubuntu服务器上可用磁盘空间 一条命令df -h

目的 想要放我的 数据集 到新的ubuntu服务器中, 不知道存储空间够不够 开始 使用以下命令直接查看 df -h

.NET 9与C# 13革新:新数据类型与语法糖深度解析

记录&#xff08;Record&#xff09;类型 使用方式&#xff1a; public record Person(string FirstName, string LastName); 适用场景&#xff1a;当需要创建不可变的数据结构&#xff0c;且希望自动生成 GetHashCode 和 Equals 方法时。不适用场景&#xff1a;当数据结构需…

Layui Table 行号

在Layui的table组件中&#xff0c;可以通过设置number参数来显示行号。以下是一个简单的示例代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>Layui Table 行号示例</title><link rel"sty…

学习笔记030——若依框架中定时任务的使用

定时任务是软件开发中经常使用一个功能。 Java定时任务广泛应用于各种需要定时执行或周期性执行任务的场景&#xff0c;如&#xff1a; 数据备份&#xff1a;定期备份数据库中的数据&#xff0c;确保数据的安全性和可靠性。数据同步&#xff1a;如果有多个数据源需要同步数据…