表单包含 输入框
, 单选框
, 下拉选择
, 多选框
等用户输入的组件。 使用表单,您可以收集、验证和提交数据。
Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。
典型表单
最基础的表单包括各种输入表单项,比如input
、select
、radio
、checkbox
等。
在每一个 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-form
的label-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