首页 > 其他分享 >elemenPlus表单From相关大全

elemenPlus表单From相关大全

时间:2024-09-15 15:50:50浏览次数:11  
标签:form 验证 表单 输入框 组件 属性 elemenPlus 大全

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

Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。

典型表单

最基础的表单包括各种输入表单项,比如inputselectradiocheckbox等。

在每一个 form 组件中,你需要一个 form-item 字段作为输入项的容器,用于获取值与验证值。

  • 输入框<el-input>):支持单行文本输入、多行文本输入(通过type="textarea")、密码输入(通过type="password")等。
  • 选择器<el-select>):用于从一组预定义的数据中选择一个或多个值。
  • 日期选择器<el-date-picker><el-time-picker><el-date-time-picker>):用于选择日期、时间或日期时间。
  • 开关<el-switch>):用于表示开/关状态。
  • 单选框<el-radio>)、多选框<el-checkbox>):用于表示互斥或可多选的状态。

表单的基本使用

ElementPlus的表单组件(<el-form>)用于收集、校验和提交用户输入的数据。它内部可以包含各种表单控件,如输入框(<el-input>)、选择器(<el-select>)、单选框(<el-radio>)、多选框(<el-checkbox>)等。

  • 数据绑定:通过v-model指令将表单控件的值与Vue实例中的数据属性进行双向绑定。
  • 表单提交:可以使用<el-button>组件的@click事件来触发表单提交的逻辑,或者使用<el-form>组件的@submit事件(需要阻止默认行为)。

行内表单

当垂直方向空间受限且表单较简单时,可以在一行内放置表单。

通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

对齐方式

可以分别设置 el-form-item 的label-position 2.7.7. 如果值为空, 则会使用 el-formlabel-position

The label-position attribute decides how labels align, it can be top or left. When set to top, labels will be placed at the top of the form field. 当设为 top 时标签会置于表单域的顶部

<template>
  <el-form
    :label-position="labelPosition"
    label-width="auto"
    :model="formLabelAlign"
    style="max-width: 600px"
  >
    <el-form-item label="Form Align" label-position="right">
      <el-radio-group v-model="labelPosition" aria-label="label position">
        <el-radio-button value="left">Left</el-radio-button>
        <el-radio-button value="right">Right</el-radio-button>
        <el-radio-button value="top">Top</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Form Item Align" label-position="right">
      <el-radio-group
        v-model="itemLabelPosition"
        aria-label="item label position"
      >
        <el-radio-button value="">Empty</el-radio-button>
        <el-radio-button value="left">Left</el-radio-button>
        <el-radio-button value="right">Right</el-radio-button>
        <el-radio-button value="top">Top</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Name" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.name" />
    </el-form-item>
    <el-form-item label="Activity zone" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.region" />
    </el-form-item>
    <el-form-item label="Activity form" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormItemProps, FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
</script>

 表单校验

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

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

自定义校验规则

自定义的校验回调函数必须被调用。

添加/删除表单项

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

数字类型验证

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

尺寸控制

表单中的所有子组件都继承了该表单的 size 属性。 同样,form-item 也有一个 size 属性。

如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性,直接为这个表单项或表单组件设置自己的 size 属性即可。

无障碍

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

 

标签:form,验证,表单,输入框,组件,属性,elemenPlus,大全
From: https://blog.csdn.net/m0_75068951/article/details/142262634

相关文章

  • Element Plus中button按钮相关大全
    一、基本用法使用 type、plain、round 和 circle 来定义按钮的样式。样式代码如下:<template><divclass="mb-4"><el-button>Default</el-button><el-buttontype="primary">Primary</el-button><el-buttontype=&quo......
  • 前端表单验证的常见问题与解决方案
    常见问题输入格式不正确用户输入不符合预期的格式,如邮箱地址、电话号码、日期等。必填项未填写用户遗漏了必填项,导致提交无效。字符长度限制输入内容超出或少于指定的字符长度限制。特殊字符限制用户输入了不允许的特殊字符,如在密码中使用了不允许的符号。前后端验证不一致前端验证......
  • PbootCMS留言自定义表单怎么调用
    在PBootCMS中,你可以通过自定义表单和标签来实现留言功能。以下是详细的步骤和示例代码,帮助你在全站任意地方使用留言表单和留言记录列表。1.留言提交表单示例代码<formaction="{pboot:msgaction}"method="post">联系人:<inputtype="text"name="contacts"require......
  • 《骑马与砍杀2》风灵月影教程大全:无限生命、无限食物、金钱编辑攻略
    本指南将指导您如何安全有效地使用此工具,以增强您的游戏体验并探索游戏的各种可能性。请确保在使用前备份您的存档,以防数据丢失或损坏。工具简介风灵月影为游戏玩家提供了多样的作弊选项,涵盖了从无限生命、一击必杀到资源无限等多个方面,降低了游戏难度,让玩家能够更专注于游......
  • PbootCMS时间标签date常用格式调用方法大全
    在使用PBootCMS建站时,时间标签是非常常用的功能之一。下面整理了详细的调用方法,帮助大家更好地理解和使用这些标签。首页/列表页时间标签默认格式:标签:[list:date]效果:2021-12-0609:12:30年月日格式(Y-m-d):标签:[list:datestyle=Y-m-d]效果:2021-12-06年格式(Y):标......
  • elementUI--el-form表单数据校验
    一、普通的值类型的数据校验①设置 el-form-item的prop 值与 formdata中定义的key 保持一致`②如果rules需要通过el-form统一设置,rules的key 定义也与prop保持一致(如果不一致,需要在el-form-item中手动指定)③复杂的校验函数可通过 validator 单独定义<el-for......
  • Dev-C++小游戏大全(第三期)
    1.魔法世界#include<iostream>#include<string>#include<windows.h>#include<conio.h>#include<fstream>#include<ctime>#include<time.h>#include<stdio.h>usingnamespacestd;intD_Of_C,OK,ane,xy,D......
  • 如何在Layui框架中实现列表操作后返回编辑页面并带参数刷新表单
    个人名片......
  • 如何在PbootCMS前台调用自定义表单?PbootCMS自定义调用代码说明
    要在PbootCMS前台调用自定义表单,可以按照以下详细步骤进行操作:1.创建自定义表单登录后台:登录PbootCMS后台管理系统。创建表单:进入表单管理模块。点击“新建表单”,填写表单的基本信息(如表单名称)。添加所需的字段(如姓名、邮箱、电话等)。保存表单。2.在模板文件......
  • 登上银河帝国系的最高通缉名单!《星球大战:亡命之徒》风灵月影版二十六项修改器使用方法
    《星球大战:亡命之徒》v1.0二十六项修改器风灵月影版能够一键开启26项强大的游戏内功能,诸如无敌模式、一击必杀以及隐身模式等等。此修改器专为优化玩家的星际冒险历程而打造,能助您在游戏里毫无阻碍,领略到极致的愉悦。本篇将为大家带来《星球大战:亡命之徒》风灵月影版二十六项修......