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

VUE3-Elementplus-form表单-笔记

 1. 结构相关

      el-row表示一行,一行分成24份

       el-col表示列  

       (1) :span="12"  代表在一行中,占12份 (50%)

       (2) :span="6"   表示在一行中,占6份  (25%)

       (3) :offset="3" 代表在一行中,左侧margin份数

       el-form 整个表单组件

       el-form-item 表单的一行 (一个表单域)

       el-input 表单元素(输入框)

    2. 校验相关

       (1) el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }

       (2) el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }

       (3) 表单元素 => v-model="ruleForm.xxx" 给表单元素,绑定form的子属性

       (4) el-form-item => prop配置生效的是哪个校验规则 (和rules中的字段要对应)

/ 整个表单的校验规则

// 1. 非空校验 required: true      message消息提示,  trigger触发校验的时机 blur change

// 2. 长度校验 min:xx, max: xx

// 3. 正则校验 pattern: 正则规则    \S 非空字符

// 4. 自定义校验 => 自己写逻辑校验 (校验函数)

//    validator: (rule, value, callback)

//    (1) rule  当前校验规则相关的信息

//    (2) value 所校验的表单元素目前的表单值

//    (3) callback 无论成功还是失败,都需要 callback 回调

//        - callback() 校验成功

//        - callback(new Error(错误信息)) 校验失败

相应代码:

vue3中,以按需引入了elementplus和icons 


<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import {ref} from 'vue'const isRegister = ref(false)
//用于提交整个form表单数据
const formModel=ref({username:'',password:'',repassword:''
})
//用于校验表单数据
const rules={username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' }],//自定义校验repassword:[{ required: true, message: '请输入密码', trigger: 'blur' },{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' },{validate:(rule,value,callback)=>{if(value!==formModel.value.password){callback(new Error('两次输入的密码不一致'))}else{callback()//不成功也要callback }}}]
}
</script>                                           
<template><!-- el-row表示一行,一行表示24分 --><!-- :span表示一行中占几份 :offset在一行中左侧margin份数 --><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 注册相关表单 --><el-form:model="formModel":rules="rules"ref="form"size="large"autocomplete="off"v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="repassword"><el-inputv-model="formModel.repassword":prefix-icon="Lock"type="password"placeholder="请输入再次密码"></el-input></el-form-item><el-form-item><el-buttonclass="button"type="primary"auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登录相关表单 --><el-form:model="formModel":rules="rules"size="large"autocomplete="off"v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="formModel.password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码?</el-link></div></el-form-item><el-form-item><el-buttonclass="button"type="primary"auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background: url('../../assets/logo2.png') no-repeat 60% center / 240px auto,url('../../assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

代码中理解点:

实例代码:

const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, // 必填项,触发条件为失焦{ min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' } // 字符长度限制,触发条件为失焦],password: [{ required: true, message: '请输入密码', trigger: 'blur' }, // 必填项,触发条件为失焦{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' }, // 正则表达式,非空白字符,长度6-15,触发条件为失焦{ validator: validatePassword, trigger: 'blur' } // 自定义校验函数,触发条件为失焦],email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, // 必填项,触发条件为失焦{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' } // 类型为邮箱,触发条件为失焦],age: [{ type: 'number', min: 18, max: 60, message: '年龄必须在18到60岁之间', trigger: 'blur' } // 类型为数字,数值范围18-60,触发条件为失焦],website: [{ type: 'url', message: '请输入正确的网址', trigger: 'blur' } // 类型为网址,触发条件为失焦],agree: [{ type: 'boolean', required: true, message: '请同意协议', trigger: 'change' } // 类型为布尔值,必填项,触发条件为改变],colors: [{ type: 'array', required: true, message: '请选择至少一个颜色', trigger: 'change' } // 类型为数组,必填项,触发条件为改变],birthdate: [{ type: 'date', required: true, message: '请选择生日', trigger: 'change' } // 类型为日期,必填项,触发条件为改变],phone: [{ pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } // 正则表达式,校验手机号码,触发条件为失焦],hexColor: [{ type: 'hex', message: '请输入正确的16进制颜色值', trigger: 'blur' } // 类型为16进制颜色值,触发条件为失焦],custom: [{ validator: customValidator, trigger: 'change' } // 自定义校验函数,触发条件为改变]
};// 自定义校验函数
const validatePassword = (rule, value, callback) => {if (value.length < 8) {callback(new Error('密码至少8位'));} else {callback();}
};const customValidator = (rule, value, callback) => {if (value !== 'customValue') {callback(new Error('自定义校验不通过'));} else {callback();}
};

解释

  • required: 必填项。
     javascript 

    复制代码

    { required: true, message: '请输入用户名', trigger: 'blur' }

  • minmax: 限制长度或数值范围。
     javascript 

    复制代码

    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }

  • pattern: 正则表达式校验。
     javascript 

    复制代码

    { pattern: /^\S{6,15}$/, message: '密码必须是6-15位', trigger: 'blur' }

  • type: 校验字段的类型。
     javascript 

    复制代码

    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }

    其他类型包括:string, number, boolean, method, regexp, integer, float, array, object, enum, date, url, hex
  • validator: 自定义校验函数。
     javascript 

    复制代码

    { validator: validatePassword, trigger: 'blur' }

  • len: 校验长度(适用于字符串和数组)。
     javascript 

    复制代码

    { len: 6, message: '长度必须为6位', trigger: 'blur' }

  • enum: 枚举类型校验。
     javascript 

    复制代码

    { type: 'enum', enum: ['option1', 'option2'], message: '请选择一个有效的选项', trigger: 'change' }

  • whitespace: 校验字段是否包含空白字符。
     javascript 

    复制代码

    { whitespace: true, message: '该字段不能包含空格', trigger: 'blur' }

  • trigger: 定义校验规则触发的条件。
     javascript 

    复制代码

    trigger: 'blur' // 或 'change'

  • transform: 在校验前对字段的值进行转换。
     javascript 

    复制代码

    { type: 'number', transform(value) { return Number(value); }, message: '请输入有效的数字', trigger: 'blur' }
     

相关文章:

VUE3-Elementplus-form表单-笔记

1. 结构相关 el-row表示一行&#xff0c;一行分成24份 el-col表示列 (1) :span"12" 代表在一行中&#xff0c;占12份 (50%) (2) :span"6" 表示在一行中&#xff0c;占6份 (25%) (3) :offset"3" 代表在一行中&#xff0c;左侧margin份数 el…...

Analyze an ORA-12801分析并行 parallel 12801 实际原因

"ORA-06512: at "PKG_P_DATA", line 19639 ORA-06512: at "PKG_P_DATA", line 19595 ORA-06512: at "PKG_P_DATA", line 14471-JOB 调用 -ORA-12801: error signaled in parallel query server P009, instance rac2:dwh2 (2) Error: ORA-12…...

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产mysql数据库事故实战

高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产MySql数据库事故实战 一、前言 作为运维工程师经常会对生产服务器进行安全漏洞加固&#xff0c;一般服务厂商、或者甲方信息安全中心提供一些安全的shell脚本&#xff0c;一般这种shell脚本都是收回权限&…...

昇思25天学习打卡营第09天|sea_fish

打开第九天&#xff0c;本次学习的内容为保存与加载&#xff0c;记录学习的过程。本次的内容少而且简单。 在训练网络模型的过程中&#xff0c;实际上我们希望保存中间和最后的结果&#xff0c;用于微调&#xff08;fine-tune&#xff09;和后续的模型推理与部署&#xff0c;因…...

flutter开发实战-Charles抓包设置,dio网络代理

flutter开发实战-Charles抓包设置 在开发过程中抓包&#xff0c;可以看到请求参数等数据&#xff0c;方便分析问题。flutter上使用Charles抓包设置。dio需要设置网络代理。 一、dio设置网络代理 在调试模式下需要抓包调试&#xff0c;所以需要使用代理&#xff0c;并且仅用H…...

Elasticsearch:Runtime fields - 运行时字段(二)

这是继上一篇文章 “Elasticsearch&#xff1a;Runtime fields - 运行时字段&#xff08;一&#xff09;” 的续篇。 在查询时覆盖字段值 如果你创建的运行时字段与映射中已存在的字段同名&#xff0c;则运行时字段会隐藏映射字段。在查询时&#xff0c;Elasticsearch 会评估运…...

Python正则表达式的入门用法(上)

Python正则表达式是使用re模块来进行操作的。re模块提供了一组函数&#xff0c;用于进行字符串的匹配和查找操作。 下面是Python中使用正则表达式的一些常用函数&#xff1a; re.search(pattern, string)&#xff1a;在字符串中查找并返回第一个匹配的对象。 re.match(patte…...

Audio Processing Graphs 管理 Audio Units

Audio Processing Graphs 管理 Audio Units Audio Processing Graphs 管理 Audio UnitsAudio Processing Graph 拥有精确的 I/O UnitAudio Processing Graph 提供线程安全通过 graph "pull" 音频流 Audio Processing Graphs 管理 Audio Units audio processing grap…...

欧盟,又出了新规-通用充电器新规通用充電器的 RED 修正案如何办理?

欧盟&#xff0c;又出了新规-通用充电器新规通用充電器的 RED 修正案如何办理&#xff1f; 欧盟新规委员会发布《通用充电器指令》指南通用充電器的 RED 修正案办理流程&#xff1a; 2024年5月7日&#xff0c;欧盟委员会发布《通用充电器指令》指南&#xff0c;修订了《无线…...

thinkphp6/8 验证码

html和后台验证代码按官方来操作 ThinkPHP官方手册 注意&#xff1a; 如果验证一直失败&#xff0c;看看Session是否开启&#xff0c; 打印dump(session_status());结果2为正确的&#xff0c; PHP_SESSION_DISABLED: Session功能被禁用&#xff08;返回值为0&#xff09;。…...

Ubuntu 22.04 LTS 上安装 MySQL8.0.23(在线安装)

目录 在线安装MySQL 步骤1&#xff1a;更新软件包列表 步骤2&#xff1a;安装MySQL服务器 步骤3&#xff1a;启动MySQL服务 步骤4&#xff1a;检查MySQL状态 步骤5&#xff1a;修改密码、权限 在线安装MySQL 步骤1&#xff1a;更新软件包列表 在进行任何软件安装之前&a…...

如何选择优质模型?SD3性能究竟如何?

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答12 厚德提问大佬答第十二期 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德…...

Linux上脚本备份数据库(升级版)

直接上代码&#xff1a; #!/bin/bash# 配置部分 mysql_user"root" mysql_host"localhost" mysql_port"3306" mysql_charset"utf8mb4" mysql_defaults_file"/home/mysql/mysql_back/.my.cnf"backup_base_dir"/mnt/sdd/…...

【深度解析】滑动窗口:目标检测算法的基石

标题&#xff1a;【深度解析】滑动窗口&#xff1a;目标检测算法的基石 目标检测是计算机视觉领域的一个核心任务&#xff0c;旨在识别图像中所有感兴趣的目标&#xff0c;并确定它们的位置和大小。滑动窗口方法作为目标检测中的一种传统技术&#xff0c;虽然在深度学习时代逐…...

约束:对于数据的限制

主键约束 主键约束&#xff1a;唯一约束非空约束&#xff0c;该字段上的数据不能重复且不能为null 注意&#xff1a;一张表必须有且只有一个主键 添加主键约束 -- 方式一(推荐) CREATE TABLE user(username VARCHAR(32) PRIMARY KEY,password VARCHAR(32),nick_name VARCHAR(3…...

【总线】AXI4第七课时:AXI的额外的控制信息(PROT和CACHE)

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…...

MAVEN 重新配置参考

【笔记04】下载、配置 MAVEN&#xff08;配置 MAVEN 本地仓库&#xff09;&#xff08;MAVEN 的 setting.xml&#xff09;-阿里云开发者社区 windows 系统环境变量 MAVEN_HOME 也可以改一下...

ByteTrack论文阅读笔记

目录 ByteTrack: Multi-Object Tracking by Associating Every Detection Box摘要INTRODUCTION — 简介BYTE算法BYTE算法用Python代码实现实验评测指标轻量模型的跟踪性能 总结SORT算法简介ByteTrack算法和SORT算法的区别 ByteTrack: Multi-Object Tracking by Associating Eve…...

LVS+Keepalived 高可用集群搭建实验

192.168.40.204lvs+keepalivedlvs-k1192.168.40.140lvs+keepalivedlvs-k2192.168.40.150nginx官方教程web-1192.168.40.151nginxepel阿里云源web-2Woo79 | LVS+Keepalived 高可用集群搭建 (图文详解小白易懂) doctor @yang | 生产环境必备的LVS+Keepalived ,超级详细的原理…...

代码随想三刷动态规划篇7

代码随想三刷动态规划篇7 198. 打家劫舍题目代码 213. 打家劫舍 II题目代码 337. 打家劫舍 III题目代码 121. 买卖股票的最佳时机题目代码 198. 打家劫舍 题目 链接 代码 class Solution {public int rob(int[] nums) {if(nums.length1){return nums[0];}if(nums.length2){…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...