el-form的入门学习

最新推荐文章于 2024-05-16 03:08:46 发布
最新推荐文章于 2024-05-16 03:08:46 发布
阅读量1.8w 收藏 141
点赞数 28
分类专栏： element-ui 文章标签： 学习 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40765784/article/details/125167724
版权

el-form的入门学习

知识点

el-form标签的核心元素

  1. :model用于保存表单的数据对象
  2. :rules用于对表单数据对象的校验
  3. ref指定表单对象名称
  4. label-width指定label的宽度
  5. :label-position指定label的位置
  6. :inline指定是否同行
  7. size指定所有组件大小

el-form-item标签的核心元素

  1. label设置内容
  2. prop指定:rules中的属性
  3. required指定必填
  4. :rules可以设置当前prop的校验，一般数值类型的校验可在此单独设置，要指定type:'number'，与v-model.number配合使用,注意点有提及
  5. size指定单一组件大小

注意点

  1. :model的数据属性和:rules的属性相对应
  2. 一个el-form-item中有多个输入框，每个输入框都需要单独嵌套在el-form-item中，此操作可以单独校验每个输入框
  3. 日期类型的数据，校验要指定type:'date'
  4. 选择框的value为数值，校验需要指定type:'number'
  5. 单选按钮和多选按钮为数值，校验需要指定type:'number'
  6. 输入框想要转换成为数值类型，可以使用v-model.number，校验需要指定type:number'
  7. 输入框想要校验邮箱格式，只需要指定type:'email'
  8. 嵌套在el-input中的el-select不能实现联动校验，若想实现联动校验，需要@change自定义调用校验
  9. rules的简单校验有三个属性：required,message,trigger,分别为：是否必填，校验失败提示信息，校验时机
  10. 如果要自定义校验规则，需要属性validator:(rule,value,callback)=>{手动校验代码块},rule参数数据很丰富，为一个Object类型的数据，有field,type,validator,required等属性，value为:model属性的值，callback(str)为要返回的信息
  11. 单选框，多选框，日期框，选择框的校验时机都应该指定为change,符合业务场景
  12. 动态添加或删除form表单的组件，需要动态配置好label,prop,rule的数据，删除按钮需要注意代码let index = array.indexOf(item)和array.splice(index,1)
  13. 重置按钮：this.$refs['refName'].resetFields();，清空了校验，表单数据也恢复初始值
  14. 校验单个组件：this.$refs['refName'].validateField('propName');进行了单个校验
  15. 校验全部：this.$refs['refName'].validate(valid=>{});表单整体校验，一般提交按钮需要触发全部校验

效果图

在这里插入图片描述

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id='app'>
        <el-form :model='formData' label-width='80px' :rules='formRule' ref='formRef'>
            <el-form-item label='活动名称' prop='name'>
                <el-input v-model='formData.name' placeholder='输入活动名称'></el-input>
            </el-form-item>
            <el-form-item label='活动区域' prop='area'>
                <el-select v-model='formData.area' placeholder='输入活动区域'>
                    <el-option label='地区1' :value='1'></el-option>
                    <el-option label='地区2' :value='2'></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label='开始时间' required>
                <el-col :span='11'>
                    <el-form-item prop='date1'>
                        <el-date-picker v-model='formData.date1' type='date' placeholder='选择日期'></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class='line' :span='2'>-</el-col>
                <el-col :span='11'>
                    <el-form-item prop='date2'>
                        <el-time-picker v-model='formData.date2' placeholder='选择时间'></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label='活动天数' prop='dateNum' :rules="[{required:true,message:'活动天数不能为空'},{type:'number',message:'活动天数为数值型'}]">
                <el-input v-model.number='formData.dateNum' placeholder='输入活动天数' >
                    <el-select v-model='formData.dateType' slot='append'>
                        <el-option label='天' value='D'></el-option>
                        <el-option label='月' value='M'></el-option>
                    </el-select>
                </el-input>
            </el-form-item>
            <el-form-item label='及时配送' prop='flag'>
                <el-switch v-model='formData.flag'></el-switch>
            </el-form-item>
            <el-form-item label='活动性质' prop='xingzhi'>
                <el-checkbox-group v-model='formData.xingzhi'>
                    <el-checkbox :label='1'>线上王者开黑</el-checkbox>
                    <el-checkbox :label='2'>线下旅游</el-checkbox>
                    <el-checkbox :label='3'>线下聚餐</el-checkbox>
                    <el-checkbox :label='4'>线下KTV</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label='特殊资源' prop='ziyuan'>
                <el-radio-group v-model='formData.ziyuan'>
                    <el-radio :label='1'>线上礼品赞助</el-radio>
                    <el-radio :label='2'>线下场地免费</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='活动形式' prop='xingshi'>
                <el-input type='textarea' v-model='formData.xingshi'></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='onSubmit'>立即创建</el-button>
                <el-button @click='resetFields("formRef")'>重置</el-button>
            </el-form-item>
        </el-form>
        <el-form :inline='true' :model='formData2'>
            <el-form-item label="审批人">
                <el-input v-model='formData2.name' placeholder='审批人'></el-input>
            </el-form-item>
            <el-form-item label='活动区域'>
                <el-select v-model='formData2.area' placeholder='活动区域'>
                    <el-option label='区域1' :value='1'></el-option>
                    <el-option label='区域2' :value='2'></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='onSearch'>查询</el-button>
            </el-form-item>
        </el-form>
        <el-button-group>
            <el-button @click='labelPosition="left"'>左对齐</el-button>
            <el-button @click='labelPosition="right"'>右对齐</el-button>
            <el-button @click='labelPosition="top"'>顶部对齐</el-button>
        </el-button-group>
        <el-form :label-position='labelPosition' label-width='120px'>
            <el-form-item label='用户名'>
                <el-input v-model='username'></el-input>
            </el-form-item>
            <el-form-item label='密码'>
                <el-input v-model='password'></el-input>
            </el-form-item>
        </el-form>
        <el-form status-icon :model='formData4' :rules='formRule4' label-width='80px' ref='formRef4'>
            <el-form-item prop='pass' label='密码'>
                <el-input v-model='formData4.pass'></el-input>
            </el-form-item>
            <el-form-item prop='checkPass' label='确认密码'>
                <el-input v-model='formData4.checkPass'></el-input>
            </el-form-item>
            <el-form-item prop='age' label='年龄'>
                <el-input v-model.Number='formData4.age'></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click='onSubmit4'>提交</el-button>
                <el-button @click='resetFields("formRef4")'>重置</el-button>
            </el-form-item>
        </el-form>
        <el-form status-icon :model='formData5' label-width='80px' ref='formRef5'>
            <el-form-item label="邮箱" prop='email' 
            :rules="[
            {required:true,message:'请输入邮箱地址',trigger:'blur'},
            {type:'email',message:'请输入正确的邮箱地址',trigger:['change','blur']},
            ]">
                <el-input v-model="formData5.email"></el-input>
            </el-form-item>
            <el-form-item v-for='(domain,index) in formData5.domains' 
            :label='"域名"+index' 
            :key='domain.key' 
            :prop="'domains.'+index+'.value'"
            :rules="{required:true,message:'域名不能为空',trigger:'blur'}">
                <el-input v-model="domain.value"></el-input>
                <el-button @click='removeDomain(domain)'>删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='onSubmit5'>提交</el-button>
                <el-button @click='addDomain'>新增域名</el-button>
                <el-button @click='resetFields("formRef5")'>重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>

</html>

<style>
    .el-input .el-select {
        width: 130px;
    }
</style>

<script>
    new Vue({
        el: '#app',
        data() {

            return {
                name: '',
                formData: {
                    name: '',
                    area: '',
                    xingzhi: [],
                    ziyuan: '',
                    xingshi: '',
                    date1: '',
                    date2: '',
                    dateNum: '',
                    dateType: '',
                },
                formRule: {
                    name: [{ required: true, message: '请输入活动名称', triggle: 'blur' }],
                    area: [{ type: 'number', required: true, message: '请选择活动区域', triggle: 'change' }],
                    date1: [{ type: 'date', required: true, message: '请输入活动日期', triggle: 'change' }],
                    date2: [{ type: 'date', required: true, message: '请输入活动时间', triggle: 'change' }],
                    xingzhi: [{ type: 'array', required: true, message: '请选择活动性质', triggle: 'change' }],
                    ziyuan: [{ type: 'number', required: true, message: '请选择特殊资源', triggle: 'change' }],
                    xingshi: [{ required: true, message: '请选择活动形式', triggle: 'blur' }],
                },
                formData2: {},
                username: '',
                password: '',
                labelPosition: 'right',
                formData4: {
                    pass: '',
                    checkPass: '',
                    age: '',
                },
                formRule4: {
                    pass: [{ required: true, validator: this.validatorPass, trigger: 'blur' }],
                    checkPass: [{ required: true, validator: this.validatorCheckPass, trigger: 'blur' }],
                    age: [{ required: true, validator: this.validatorAge, trigger: 'blur' }],
                },
                formData5:{
                    email:'',
                    domains:[
                        {key:"domain0",value:''}
                    ]
                },
            }

        },
        methods: {
            removeDomain(domain){
                let index = this.formData5.domains.indexOf(domain)
                if(index!== -1){
                    this.formData5.domains.splice(index,1)
                }
            },
            addDomain(){
                let len = this.formData5.domains.length
                this.formData5.domains.push({
                    key:"domain"+len,
                    value:'',
                })
            },
            validatorPass(rule, value, callback) {
                if (!value) {
                    callback(new Error('密码不能为空'))
                }
                if (this.formData4.checkPass != null) {
                    this.$refs['formRef4'].validateField("checkPass")
                }
                callback()
            },
            validatorCheckPass(rule, value, callback) {
                if (!value) {
                    callback(new Error('确认密码不能为空'))
                }
                if (value != this.formData4.pass) {
                    callback(new Error('密码不一致'))
                }
                callback()
            },
            validatorAge(rule, value, callback) {
                if (!value) {
                    callback(new Error('年龄不能为空'))
                }
                if (!Number.isInteger(value)) {
                    callback(new Error('必须为整数型'))
                }
                if (value < 18) {
                    callback(new Error('年龄未达标'))
                }
                callback()
            },
            onSubmit() {
                this.$refs['formRef'].validate(valid => {
                    if (valid) {
                        console.log(this.formData)
                    }
                })
            },
            onSubmit4() {
                this.$refs['formRef4'].validate(valid => {
                    if (valid) {
                        console.log('success4')
                    }
                })
            },
            onSubmit5(){
                this.$refs['formRef5'].validate(valid => {
                    if(valid){
                        console.log("success5")
                    }
                })
            },
            resetFields(formRef) {
                this.$refs[formRef].resetFields();
            },
            onSearch() {
                console.log(this.formData2)
            },
        }
    })
</script>

官网地址

el-form官网地址

自律最差的编程狗
关注
  • 28
    点赞
  • 踩
  • 141
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element标签弹窗_elementUI中的el-xxx标签解释
weixin_28793831的博客
12-23 1459
el-col ：整体，el-container: 主体区域el-tooltip ：提示框信息el-header : 内容头部区域el-aside : 左侧内容区域el-main: 主要内容区域el-submenu ： 单独一个导航栏，el-menu-item : 单独一个导航栏里面的单独一个栏目，el-menu-item-group：一组导航栏el-date-picker 组件时间格式化方式el-...
Element el-form 表单详解
热门推荐
程序员大阳
10-15 4万+
本文目录1. 前言2. 基本用法3. 行内表单4. 标签对齐方式5. 调整尺寸6. 小结 1. 前言 表单是使用频率非常高的组件了，HTML默认提供的表单是没啥样式的，而Element对表单提供了封装形成了el-form组件，使整个表单的样式整齐划一。 本篇就来介绍下表单的使用，主要介绍的是样式方面的使用。 2. 基本用法 代码： 基本用法： <el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padd
＜el-form＞的使用总结
LH2HA3的博客
06-29 1296
的使用
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法_el-form-item 必填项校验
最新发布
2401_84619245的博客
05-16 537
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）+正则校验
工作中遇到问题记录
07-08 9238
el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）
＜el-form＞的＜el-form-item＞使用自定义label的写法
An滴饭儿的博客
03-08 1万+
如果不需要自定义，直接下面这样写就可以。 <el-form ref="ruleForm" label-width="100" class="formStyle"> <el-form-item label="工作说明"> <el-input type="textarea" v-model="editOrder.workDesc" class="textareaRate" resize="none" size="mini"></el-input> <
前端el-from的学习
qq_40293731的博客
01-13 2928
前端el-from的学习 element组件官网 <template> <el-form :model="ruleForm" //绑定ruleForm表单 :rules="rules" //绑定验证规则,通过rules属性传入约定的验证规则 :class="className" //绑定样式 status-icon //e...
element-ui的el-form表单一行两个显示效果
m0_48957210的博客
06-23 6616
element的form表单一行显示两个
el-form动态增减表单项==＞ el-table自定义列数并动态加载列
05-12
【Vue入门实战6】【ElementUI组件使用优化】el-form动态增减表单项==＞ el-table自定义列数并动态加载列 ==＞ 处理后端复杂数据结构==＞回显动态列数据 本功能主要是实现【新建自定义配置】，输入配置基本信息，...
JSP入门教程
07-24
JSP入门教程主要分为以下几个核心知识点： 1. **JSP基本结构**： - JSP文件本质上是一个HTML文件，但可以包含Java代码片段。例如，在`helloworld.jsp`中，`<%@ page info="a hello world example" %>`是一个指令...
Java/JavaEE 学习笔记
03-20
第一章 Hibernate入门.....................180 第二章 对象/关系映射基础.............183 第三章 关联关系映射......................185 第四章 操纵持久化对象..................190 第五章 事务控制...191 第六...
EXT入门详解.docx
11-26
EXT的组件模型是其核心特性之一，它包括了Grid、Form、Panel、Window等丰富的组件，这些组件可以组合使用，构建出复杂的企业级应用界面。EXT还支持Ajax通信，使得与服务器的数据交换变得简单高效。总的来说，EXT是一...
JSF开发的入门以及关键文件face-config.xml的配置
08-22
- `<h:inputText>`用于创建输入字段，其值与`UserLogin`中的属性绑定，使用EL（Expression Language）表达式`#{userBean.username}`和`#{userBean.password}`。 - `<h:commandButton>`定义了一个按钮，其`action`...
el-form中el-input输入框的宽度问题
weixin_47169270的博客
09-13 2万+
问题：要解决lable和input水平排列且input宽度可以自定义 1、el-form有个属性inline默认为false，故而input输入框占了整行 <el-form :model="addDialogForm" :rules="addDialogRules" > <el-form-item prop="attr_name" :label="addTitle"> <el-input v-model="addDialogForm.attr_name"
el-form表单验证的一些方法总结
AC_Surprise的博客
01-23 6806
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 知识点 根据文档说明，model为表单的数据对象，el-form通过model绑定数据。 reles为表单验证规则对象，其中字段名要与model中的字段名一一对应 el-form-item 容器，通过 label 绑定标签，prop属性设置为需要验证的字段名 表单组件通过 v-model 绑定 model 中的数据 表单校验相关属性 hide-re
el-form size=“mini“ 输入框的字号是12px
我爱美女S的博客
10-21 945
el-form size="mini" 输入框的字号是12px
el-form的model、prop属性和表单校验等详解
weixin_45063953的博客
10-11 2823
Vue 的 el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。组件封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。el-form 的 model 属性 el-form 的 model 属性是用来指定表单使用的数据的，虽然 el-form 指定了 model 对象，但是，理论上，vue 并没有限制 el-input 绑定的数据，
java计算CRC16校验码
qingshui_qs的博客
10-27 1855
java计算校验和的一个公式，亲测可行有效 /** * 计算CRC16校验码 * * @param data 需要校验的字符串 * @return 校验码 */ public static String getCRC(String data) { data = data.replace(" ", ""); int len = data.length(); if (!(len % 2 == 0)) { return "0000"; } int num = le
element——form表单规则验证总结
xiaoququ的博客
01-19 2190
【代码】element——form表单规则验证总结。
手写 el-form el-form-item
08-31
<> <el-form ref="myForm" :model="form" label-width="120px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', age: '' } }; }, methods: { submitForm() { this.$refs.myForm.validate((valid) => { if (valid) { // 在这里处理表单提交逻辑 console.log(this.form); } else { console.log('表单校验失败'); return false; } }); } } }; </script>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自律最差的编程狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值