Element-plus表单总结

表单包含输入框,单选框,下拉选择,多选框等用户输入的组件。输入表单,您可以收集、验证和提交数据。

经典表单

最基础的表单包括各种输入表单项,比如input、select、radio、checkbox等。 在每一个form组件中,需要一个form-item 字段作为输入项的容器,用于获取值与验证值。

<template><el-form :model="form" label-width="auto" style="max-width: 600px"><el-form-item label="Activity name"><el-input v-model="form.name" /></el-form-item><el-form-item label="Activity zone"><el-select v-model="form.region" placeholder="please select your zone"><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item label="Activity time"><el-col :span="11"><el-date-pickerv-model="form.date1"type="date"placeholder="Pick a date"style="width: 100%"/></el-col><el-col :span="2" class="text-center"><span class="text-gray-500">-</span></el-col><el-col :span="11"><el-time-pickerv-model="form.date2"placeholder="Pick a time"style="width: 100%"/></el-col></el-form-item><el-form-item label="Instant delivery"><el-switch v-model="form.delivery" /></el-form-item><el-form-item label="Activity type"><el-checkbox-group v-model="form.type"><el-checkbox value="Online activities" name="type">Online activities</el-checkbox><el-checkbox value="Promotion activities" name="type">Promotion activities</el-checkbox><el-checkbox value="Offline activities" name="type">Offline activities</el-checkbox><el-checkbox value="Simple brand exposure" name="type">Simple brand exposure</el-checkbox></el-checkbox-group></el-form-item><el-form-item label="Resources"><el-radio-group v-model="form.resource"><el-radio value="Sponsor">Sponsor</el-radio><el-radio value="Venue">Venue</el-radio></el-radio-group></el-form-item><el-form-item label="Activity form"><el-input v-model="form.desc" type="textarea" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">Create</el-button><el-button>Cancel</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive } from 'vue'// do not use same name with ref
const form = reactive({name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: '',
})const onSubmit = () => {console.log('submit!')
}
</script>

提示

W3C标准定义:

当一个表单中只有一个单行文本输出字段时,浏览器应当将在此字段中按下Enter(回车键)的行为视为提交表单的请求。如果希望阻止这一默认行为,可以在<el-form>标签上添加@submit.prevent。

行内表单 

当垂直方向空间受限且表单较简单时,可以在一行内放置表单。通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

对齐方式

根据设计情况,来选择最佳的标签对齐方式。您可以分别设置el-form-item 的 label-position. 如果值为空,则会使用el-form 的 label-position。通过设置 label-position 属性可以改变表单域标签的位置,可选值为 top、left,当设为 top 时标签会置于表单域的顶部。

可以绑定在 <el-form>标签上。

也可以单独绑定在<el-form-item>标签上。 

const labelPosition = ref('top')
const itemLabelPosition = ref('')

 表单校验

Form组件允许您验证用户的输入是否符合规范,来帮助你找到和纠正错误。

Form 组件提供了表单验证的功能,只需为 rules 属性传入约定的验证规则,并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 

ref用来定义这个<el-form>表单,:rules用来绑定所需要的规则,具体可见js代码。

prop属性用于rules中对应数据规则的匹配,注意:prop中的值需要和v-model中的值对应,例如prop=”name",v-model为="ruleForm.name",否则会出现输入值提示没有输入值的现象。

这是表单规则对应的js代码。可根据自身需求进行修改。

const ruleFormRef = ref()const rules = reactive({name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' },{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },],region: [{required: true,message: 'Please select Activity zone',trigger: 'change',},],count: [{required: true,message: 'Please select Activity count',trigger: 'change',},],
})const submitForm = async (formEl) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')} else {console.log('error submit!', fields)}})
}

自定义校验规则

这个例子中展示了如何使用自定义规则来完成密码的二次验证。本例还使用 status-icon 属性为输入框添加了表示校验结果的反馈图标。

 自定义校验规则同样需要写ref,:rules绑定,以及prop属性。

在js代码中,rules里用了validator,后面的参数为自定义校验的方法。 注意自定义的验证回调函数必须被调用即要写callback()。

const ruleFormRef = ref()const rules = reactive({pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }],
})const checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('Please input the age'))}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('Please input digits'))} else {if (value < 18) {callback(new Error('Age must be greater than 18'))} else {callback()}}}, 1000)
}const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('Please input the password'))} else {if (ruleForm.checkPass !== '') {if (!ruleFormRef.value) returnruleFormRef.value.validateField('checkPass')}callback()}
}
const validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('Please input the password again'))} else if (value !== ruleForm.pass) {callback(new Error("Two inputs don't match!"))} else {callback()}
}

 

添加/删除表单项

除了一次通过表单组件上的所有验证规则外,您也可以动态地通过验证规则或删除单个表单字段的规则。

 这里主要是通过New domain来创建新的表单,并为其添加验证规则,跟之前的表单验证一样,只不过这侧我们把 :rules写在了<el-form-item>里。

这里使用了循环,为每个通过按钮生成的表单添加了对应的label 和 prop对应规则。 

这个为添加新的表单和移除新的表单的js方法。 

const addDomain = () => {dynamicValidateForm.domains.push({key: Date.now(),value: '',})
}const removeDomain = (item) => {const index = dynamicValidateForm.domains.indexOf(item)if (index !== -1) {dynamicValidateForm.domains.splice(index, 1)}
}

数字类型验证

数字类型的验证需要在 v-model处加上 .number 的修饰符,这是Vue自身提供的用于将绑定值转化为number类型的修饰符。

 

 

尺寸控制

表单中所有子组件都继承了该表单的 size 属性。 同样,form-item 也有一个 size 属性。 如果希望某个表单项或某个表单组件的尺寸不同于Form上的 size 属性,直接为这个表单项或表单组件设置自己的size属性即可。

 

const size = ref('default')

 

无障碍

当在 el-form-item 内只有一个输入框(或相关的控制部件,如选择或复选框),表单项的标签将自动附加在那个输入框上。如果 el-form-item 内有多个input,则表单会被设置成 WAI-ARIA 组的role。 在这种情况下,需要手动给每个 input 指定访问标签。

 

const formAccessibility = reactive({fullName: '',firstName: '',lastName: '',
})

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

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

相关文章

[Qt] 多元素控件 | 容器类控件 | 布局管理器layout

目录 一.多元素控件 1、List Widget 【使用 ListWidget】 2、Table Widget 【使用 QTableWidget】 3、Tree Widget 【使用 QTreeWidget】 二、容器类控件 1、Group Box 【给麦当劳案例加上分组框】 2、Tab Widget 【使用标签页管理多组控件】 三、布局管理器 1、…

【竞技宝】CS2:HLTV2024职业选手排名TOP8-broky

北京时间2025年1月7日,HLTV年度选手排名正在持续公布中,今日凌晨正式公布了今年的TOP8为FAZE战队的broky。 选手简介 broky是一位来自拉脱维亚的职业CS选手,现年23岁。2018年7月,broky获得了FPL资格,连续几季在榜上前5。他的首次赛场留名是跟随拉脱维亚本土战队Wolsung出征BES…

MP4 与Fragmented MP4 (fMP4)的区别

区别 类别MP4FMP4&#xff08;Fragmented MP4&#xff09;存储结构视频文件整体存储为一个连续文件&#xff0c;moov 元数据通常在文件末尾视频分成多个片段&#xff0c;每个片段包含独立的元数据&#xff08;分片&#xff09;播放需求必须先下载 moov 元数据后才能播放可边下…

Ubuntu桌面管理环境: GDM3,KDM,LightDM

介绍 Ubuntu是一个广受欢迎的Linux操作系统&#xff0c;拥有强大而多样化的桌面管理环境。其中三个常用的桌面管理环境是GDM3&#xff0c;KDM和LightDM。本篇博客将介绍这三个桌面管理环境的特点和功能。 GDM3 (GNOME Display Manager) GDM3是默认的桌面管理环境&#xff0c…

VSCode快捷键Ctrl+/是注释;Ctrl+\是拆分编辑器;Ctrl+w是关闭编辑器

VSCode快捷键Ctrl/是注释&#xff1b;Ctrl\是拆分编辑器&#xff1b;Ctrlw是关闭编辑器 Ctrl/是注释&#xff0c;但是如果没弄对&#xff0c;有可能会按成Ctrl\ ,而这个快捷键是拆分编辑器&#xff0c;尤其是多按几个&#xff0c;就拆分出很多窗口&#xff0c;非常影响编程工作…

CSS:背景样式、盒子模型与文本样式

背景样式 背景样式用于设置网页元素的背景&#xff0c;包括颜色、图片等。 背景颜色 使用 background-color 属性设置背景颜色&#xff0c;支持多种格式&#xff08;颜色英文、十六进制、RGB等&#xff09;。 div {background-color: lightblue; }格式示例十六进制#ff5733R…

【Linux】记录一下考RHCE的学习过程(七)

年底了&#xff0c;公司接的北京地铁轨道交通的项目做不完了&#xff0c;一百多列地铁的设备都得调&#xff0c;派我出差了几周&#xff0c;这几天才回来&#xff0c;出差累死了实在是没办法更新。&#xff08;YOASOBI的二开票还没抢到ToT&#xff0c;哭死&#xff0c;看看回滚…

get和post有什么区别

GET和POST是HTTP协议中两种常用的请求方法&#xff0c;它们在用途、参数传递方式、缓存处理、安全性等方面存在显著差异。 以下是对GET和POST区别的详细讲解&#xff0c;并给出示例演示。 一、GET和POST的区别 用途 GET&#xff1a;主要用于获取信息&#xff0c;即进行查询操…

Lua协同程序(线程)

1、 Lua 的协同程序&#xff08;coroutine&#xff09;简单介绍 Lua 的协同程序&#xff08;coroutine&#xff09;是一种轻量级的线程&#xff0c;允许你在多个任务之间进行协作式多任务处理。与操作系统线程不同&#xff0c;协同程序是由程序员显式控制的&#xff0c;不会自动…

流媒体学习

流媒体 特性流媒体流协议FLVMSE定义采用数据流方式在网络上进行播放的媒体格式用于传输流媒体数据的网络协议Flash Video&#xff0c;一种流媒体格式一项 W3C 规范&#xff0c;允许 JavaScript 为 <audio> 和 <video> 动态构造媒体源作用提供连续的音视频播放体验&…

【简博士统计学习方法】第1章:3. 统计学习方法的三要素

3. 统计学习方法的三要素 3.1 监督学习的三要素 3.1.1 模型 假设空间&#xff08;Hypothesis Space&#xff09;&#xff1a;所有可能的条件概率分布或决策函数&#xff0c;用 F \mathcal{F} F表示。 若定义为决策函数的集合&#xff1a; F { f ∣ Y f ( X ) } \mathcal{F…

Linux内核 -- RTC 驱动的注册方式

Linux 内核中 RTC 驱动的注册方式 在 Linux 内核中&#xff0c;RTC&#xff08;Real-Time Clock&#xff09;驱动的注册可以通过多种方式实现&#xff0c;以下整理了常见的注册方式及其注意事项。 1. 使用 devm_rtc_device_register 这是注册 RTC 驱动的最常用方法&#xff…

JavaEE初阶——计算机工作原理

一、什么是JavaEE JavaEE&#xff08;Java Platform&#xff0c;Enterprise Edition&#xff09;是sun公司&#xff08;2009年4月20日甲骨文将其收购&#xff09;推出的企业级应用程序版本。这个版本以前称为 J2EE。能够帮助我们开发和部署可移植、健壮、可伸缩且安全的服务器…

多目标优化算法——基于聚类的不规则Pareto前沿多目标优化自适应进化算法(CA-MOEA)

基于聚类的不规则Pareto前沿多目标优化自适应进化算法&#xff08;CA-MOEA&#xff09; 一、算法简介 简介&#xff1a; 现有的多目标进化算法&#xff08;moea&#xff09;在具有规则Pareto前沿且Pareto最优解在目标空间上连续分布的多目标优化问题&#xff08;MOPs&#xff…

短诗《腊八粥》

《腊八粥》现•佚名已买花生同煮粥&#xff0c;粥不似&#xff0c;少年稠也不复&#xff0c;少年仇亦不赴&#xff0c;少年愁终不负&#xff0c;少年筹 &#xff08;主编目前所有分类&#xff1a; 身&#xff0c;心&#xff0c;灵思 工作&#xff0c;生活 创作 剧 让世界更…

封装深拷贝方法

前言 在今年的四月份我写了一篇有关深拷贝的博客文章 我与深拷贝_radash 深拷贝-CSDN博客。在该文章中有一个令我感到遗憾的点就是我没有实现一个自己手写的深拷贝。如今我想弥补当初的遗憾&#xff0c;在这篇文章中详细的讲述一下如何手写一个深拷贝方法。 lodash中是如何实…

数据结构:树

数据结构中的树 树&#xff08;Tree&#xff09;是一种非线性数据结构&#xff0c;用于表示具有层次结构的数据。树结构由节点&#xff08;Node&#xff09;和边&#xff08;Edge&#xff09;组成&#xff0c;节点之间通过边连接&#xff0c;形成父子关系。树是一种抽象数据类…

【信息系统项目管理师】第15章:项目风险管理过程详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 一、规划风险管理1、输入2、工具与技术3、输出二、识别风险1、输入2、工具与技术3、输出三、实施定性风险分析1、输入2、工具与技术3、输出四、实施定量风险分析1、输入2、工具与技术3、输出五、规划风险应对1、…

flutter web 路由问题

开发问题背景&#xff1a; flutte 项目中开发网页暴露出来供外部的 网页调用&#xff0c;并不是跳转到项目的首页 项目中使用的路由是 GetX 4.6.0 存在的问题 跳回到首页的问题 web -> flutterflutter 使用 history.back 到web&#xff0c;web forward 到 flutter 此时…

在不到 5 分钟的时间内将威胁情报 PDF 添加为 AI 助手的自定义知识

作者&#xff1a;来自 Elastic jamesspi 安全运营团队通常会维护威胁情报报告的存储库&#xff0c;这些报告包含由报告提供商生成的大量知识。然而&#xff0c;挑战在于&#xff0c;这些报告的内容通常以 PDF 格式存在&#xff0c;使得在处理安全事件或调查时难以检索和引用相关…