vue基础:ElementUI的表单
文章目录
- ElementUI表单
- 一个简单的案例
- 表单的主要组件
- 表单组件的使用
- 行内的表单
- 对齐方式
- 表单验证
- 自定义的验证规则
- 表单内组件尺寸控制
- 总结form模块的属性
- form模块的方法
- Form Methods(官方文档的,了解一下)
- form-item模块的属性
ElementUI表单
el的表单官网内容很多,看了一眼觉得心累了。但实际上它使用起来非常的方便,el为我们封装了各种组件,样式也大众。
一个简单的案例
代码如下(使用时确保引入了相关的组件)
<template>
<el-form ref="form" :model="form" label-width="80px"><el-form-item label="用户名"><!-- form-item用于显示关联的文件 --><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="密码"><el-input type="password" v-model="form.pwd"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button><el-button>取消</el-button></el-form-item>
</el-form>
</template>
<script>export default {data() {return {form: {name: '',pwd:''}}},methods: {onSubmit() {console.log('submit!');}}}
</script>
看起来还是挺多行是吗?去掉些必要标签还有些声明,剩下的是:el-form
,el-input
,el-form-item
三个组件。el-form
是必要的,对布局有影响,el-form-item
是做为关联表单元素的文字,el-input
便是我们的输入框了。布局已经预设,用这三个便可以是最基本的表单了。是否方便?
表单的主要组件
常用的表单组件,输入框,下拉框,单选框,多选框,文本域,对应的组件是:Form,FormItem,Input,Select,Option,Checkbox,Radio
。
还有一些同样是实用组件,开关(Switch
)、日期选择器(DatePicker
),时间选择器(TimePicker
)单选框组(RadioGroup
),多选框组(CheckboxGroup
)等
表单组件的使用
不管哪一种组件都一样,先main.js
中引入模块,然后在页面中即可使用:
// main.js
import {Form,FormItem,Input,CheckboxGroup,Radio, RadioGroup,Switch} from 'element-ui';Vue.use(Form)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(FormItem)
Vue.use(Input)
// ...需要哪些引入哪些
假设在form.vue
中使用,代码多了看了烦,我只写一个下拉框、开关、文本域。(这叫抛砖引玉,xixi)
<template>
<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动区域"><!-- 记得使用v-model来绑定表单字段 --><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="即时配送"><!-- 记得使用v-model来绑定表单字段 --><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动形式"><!-- 记得使用v-model来绑定表单字段 --><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form>
</template>
<script>export default {data() {return {form: {region: '',// 区域delivery: false,// 是否及时配送desc: '' //活动形式描述}}},methods: {onSubmit() {console.log('submit!');}}}
</script>
效果如下
行内的表单
不难发现我们的组件都是再一个组件站一行,如果要使组件变为行内元素也肥肠简单。给el-form
组件添加:inline="true"
的属性即可(属性前加冒号才会认值为true是一个布尔,否将认为是字符串)
<el-form :inline="true"><!--// 如此即可 -->
</el-form>
对齐方式
**这里的对齐指的是label的文本对齐方式。**同样是加载el-form
组件的label-position
属性中
label-position
的可用值: left
,right
,top
(top为label在上,组件再下的显示,不在同一行)。如下
<el-form label-position="left"><!--// 如此即可 -->
</el-form>
表单验证
表单验证的关键点有三:
el-form
组件中添加:rules
="规则组对象"属性添加,值为验证规则的对象表单组件添加
prop
属性为组件指定验证规则。prop属性加在el-form-item
上定义验证规则的对象
验证一般用于输入框
如下代码:
<template>
<el-form ref="form" :rules="rules" :model="form" label-width="180px"><el-form-item label="活动名称,长度限制" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="url,类型限制" prop="u"><el-input v-model="form.url"></el-input></el-form-item>
</el-form>
</template>
<script>export default {data() {return {form: {name: '',url:'',},rules:{name:[{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],u:[{ type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' }]},}},}}
</script>
重点提一下,如过要验证数字类型,那么。需要把v-model
换成v-model.number
!!! 切记 !!!
<el-form-item label="url,类型限制" prop="u"><!-- 加上.number修饰符才会把输入值转为数字类型 --><el-input v-model.number="form.num"></el-input>
</el-form-item>
自定义的验证规则
自定义验证与预定义验证的不同在于一点(考考你,共有哪三个关键点):
自定义规则对象的编写形式
<script>
export default {data() {let checkNum = (rules,val,callback)=>{rules // 这里会得到定义的校验对象的属性if(!Number.isInteger(val)){// 如果要提示错误信息,那么通过第三个参数回调出去,参数值为Error实例callback(new Error('请输入数值'))}}return {// 校验规则rules:{u:[{ type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' },// 添加一条自定义的验证,值为函数名{validator:checkNum,targger:'change'}],},}}
}
</script>
表单内组件尺寸控制
通过给el-form
添加size属性,来指定表单元素的尺寸。很简单,如下
size
的可用值:medium / small / mini
<el-form size="miniz">
</el-form>
总结form模块的属性
属性 | 属性值 | 说明 |
---|---|---|
model |
object
|
表单数据对象 |
rules |
object
|
验证规则 |
inline |
Boolean 默认false
|
是否设置为行内元素 |
label-position |
right/left/top 默认right
|
表单域标签对齐方式 |
label-width |
string 例如150px
|
标签标签(label)的宽度 |
size | medium / small / mini | 表单组件尺寸 |
status-icon |
boolean 默认false
|
是否显示校验结果的icon |
disabled |
boolean 默认false
|
作用域为整个表单。不用多解释了 |
form模块的方法
Form Methods(官方文档的,了解一下)
方法名 | 说明 | 参数 |
---|---|---|
validate | 对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise | Function(callback: Function(boolean, object)) |
validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string)) |
resetFields | 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 | — |
clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验结果 | Function(props: array | string) |
如何使用这些方法?
<template><el-form ref="f"></el-form>
</template>
<script>// 重置表单const from = this.$refs.f.resetFields()
</script>
form-item模块的属性
参数 | 参数值 | 说明 |
---|---|---|
prop |
string
|
传入model的字段。在使用 validate、resetFields 方法的情况下,该属性是必填的 |
label |
string
|
tag text |
label-width |
string
|
例如150px。标签占用的框度 |
required |
boolean
|
是否必填 |
rules |
object
|
表单校验规则 |
size |
medium / small / mini
|
组件尺寸 |
show-message |
boolean 默认true
|
是否显示校验错误信息 |
inline-message |
boolean 默认false
|
以行内形式展示校验信息 |
vue基础:ElementUI的表单相关推荐
- 基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间 工作日志 正文 基于VUE的ElementUi可视化表单设计器布局器 顶 原 码农苦码农懂 发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
- vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
- ElementUI的表单验证及常用规则
element-cn.eleme.io/#/zh-CN/com- 在官网上有关于form组件的详细介绍 这里总结了几个常用的规则,方便下次使用 必填,必选,邮箱,手机号,时间,数字,数组,字符长度, ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- vue如何制作自定义表单校验样式
vue如何制作自定义表单校验样式 先上效果图 由于vue的优越性,所以衍生出很多与之匹配并非常受欢迎的ui组件库,比如最常见的element-ui和antvue,两者内容几乎相同,样式略有差异,所以在 ...
- Vue官网提供表单验证cnpm i vee-validate@2 --save
Vue官网提供表单验证 使用步骤: 1:安装vee-valadite,别安装最新版本@2 2:在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:注册插件 ...
- elementui 按钮 表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
- 基于springboot+vue的开源自定义表单问卷系统
一.项目简介 基于springboot+vue的开源自定义表单问卷系统 二.实现功能 支持表单拖拽 支持各种控件操作(基础组件.进阶组件等) 基础组件包含文本.多行文本.图片.图形.日历控件 支持拖拽 ...
- html5 前端动态加载后端,Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导 关键配置 template中,form和form-item的写法和绑定 data里的 ...
- 使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
最新文章
- 霍布森选择效应(Hobson choice Effect)
- LeetCode Excel Sheet Column Title(表格列数数字到英文转换)
- crontab定时执行python脚本_linux下使用crontab定时执行python脚本
- 函数的梯度方向和切线方向_高数下微课:11.3_6 二元函数的全微分求积例题
- 微软2008系列 (Orcas + Longhorn Server+SQL2008)将于2008年2月27日发布
- tomcat:sessionId生成机制导致tomcat启动过慢问题
- C++ 求一元二次方程的根
- mysql-5.7在CentOS-7下的rpm安装
- 初探C语言指针之何为指针变量
- 服务器系统记事本乱码,记事本乱码完美解决修复教程
- CREO:CREO软件之装配设计界面的简介、装配图设计流程、常见方法(主控件TOP DOWN设计、骨架模型TOP DOWN设计、记事本模型设计)、案例应用(图文教程)之详细攻略
- ps入门第10天_ps色彩平衡ps色相饱和度
- bilibili封面提取
- 三点定位法原理及实现——蓝牙定位
- 推荐跟Shell有关的有意思网站
- 普通最小二乘法回归 - OLS (ordinary least square)
- 31. Git与Github
- NAACL最佳方法论文 | 课本上的A*搜索算法可以提升文本生成效果!
- java 转化罗马数字._Java刷LeetCode:整数转罗马数字
- 六、MySQL 数据库练习题1(包含前5章练习题目及答案)