位置: IT常识 - 正文

【vue2】使用elementUI进行表单验证实操(附源码)(vue el-)

编辑:rootadmin
【vue2】使用elementUI进行表单验证实操(附源码)

推荐整理分享【vue2】使用elementUI进行表单验证实操(附源码)(vue el-),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue el-menu,vue2-elm,vue el-dialog,ele vue,vue el-dialog,vue el-dialog,vue2-elm,vue2-elm,内容如对您有帮助,希望把文章链接给更多的朋友!

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:vue使用elementUI进行表单验证实操(附源码)

【前言】我们在构建一个项目中,基本是无法避免不使用表单来收集数据的。比如登录注册页面,我们需要验证输入者的用户名与密码当都具有合法性与正确性的时候我们才可以进行注册以及登录的操作。当登录进页面之后,还会涉及到数据的增删改查操作,这都无一例外需要我们通过某一个载体来接收我们的数值,因此表单在项目中是很常见的,大家物必得学会呦。

目录

一、表单校验流程发请求流程

二、使用elementUI框架进行表单校验


一、表单校验流程发请求流程

收集数据、进行验证、处理验证通过与错误

二、使用elementUI框架进行表单校验

关于vue的UI库介绍的文章大家请移步下面这个超链接:

UI与Vant组件库的导入、注册、使用方法

2.1.我们使用表单组件来讲解,翻阅文档看表单怎么用

组件 | Element

我们重点放在这样的几个点上面:model、rules、validate、prop、ref

model:用于绑定表单数据rules:用于表单验证规则validate:任一表单项被校验后触发(被校验的表单项 prop 值,校验是否通过)prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的ref用于选中我们的form表单

 此刻我们的表单长这个样子

此时关键源码截图:

【vue2】使用elementUI进行表单验证实操(附源码)(vue el-)

2.2给每个<el-form-item>通过prop进行绑定下props,我们才能开启校验规则

类似于下图这样:绑定我们的数据进去

 2.3写下我们的rules校验规则

2.4rules校验写在data当中

required:必选项,message:错误提示,trigger:触发方式(blur是失去焦点的时候触发)

 当我写下校验规则之后,我们的图标发现有了新的变化。左上角有了红色星号

那我们来测试以下吧!

现在表单的一层数据校验就完成了,接下还需要一层兜底校验。这一层校验是收集所有表单数据进行检测,当检测都通过了再执行相应的规则。在这就是当我点击 立即创建 的时候收集数据我们进行其他操作,比如发请求到服务器中,这里为了演示的难度就不写发送请求的操作啦。发送ajax请求的文章请看博主vue专栏喔

2.5绑定点击事件

<el-button type="primary" @click="onSubmit">立即创建</el-button>

2.6写下校验方法

onSubmit () { this.$refs.form.validate(valid => { console.log(valid) if (valid) { console.log('submit!,校验通过') console.log('这是FormData:', this.FormData) } }) }

2.7点击查看

 嘿,可以看到当我们校验通过了,valid形参打印的true,因此我们才获取到了我们想看到的值。当我们表单数据但凡有一个有错误时,都不能走这个if为true的条件,这样就完成了兜底校验。一般这个表单是那里用?一般是登陆页面用或者我们后管系统做增删改查操作的时候会使用上表单验证等技术。等验证通过了我们再去发请求或者存储数据等等操作。

【附上源码】

<template><el-form ref="form" :model="FormData" label-width="80px" :rules="ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="FormData.name"></el-input> </el-form-item> <el-form-item label="活动时间" prop="date1"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="FormData.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="FormData.type" prop="type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="FormData.desc" prop="desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> </el-form-item></el-form></template><script>export default { data () { return { ruleForm: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 2, max: 50, message: '活动名称字数为2-50个字', trigger: 'blur' } ], date1: [ { required: true, message: '请选择活动事件', trigger: 'blur' } ], type: [ { required: true, message: '请确定活动活动性质', trigger: 'blur' } ], desc: [ { required: true, message: '活动形式', trigger: 'blur' } ] }, FormData: { // 一定需要在data中
本文链接地址:https://www.jiuchutong.com/zhishi/300215.html 转载请保留说明!

上一篇:KITTI数据集可视化(一):点云多种视图的可视化实现

下一篇:什么是异步(什么是异步函数)

  • 当月不发工资会影响社保吗
  • 一般纳税人和小规模纳税人哪个合适
  • 出口货物退免税政策
  • 已申报税额是指啥
  • 合伙企业分配利润如何纳税
  • 印花税按什么金额吗
  • 小微企业要缴纳印花税吗
  • 暂估入库发票回收怎么办
  • 所得税申报时成本数据填错怎么办
  • 个人独资企业转个体户怎么办理
  • 事务所和公司的专利工程师
  • 已认证的进项税发票要退回,怎么操作
  • 外贸企业一般纳税人申报
  • 普通发票可以改明细吗
  • 其他应收款通俗
  • 企业所得税减免税额包括哪些
  • 物业管理专票税点
  • 税收分类编码选错了有事吗
  • 7月1日起税务新规
  • 大额联行号和开户行号是一样的吗
  • 一卡通充值计入什么费
  • 生产活动产生的正的消费外部效应
  • 已使用固定资产出售增值税
  • 公益性捐赠所得税处理
  • 非主营业务收入记什么
  • 拍卖市场拍售的旧机动车价格是公平市价
  • 上个月退货会计分录
  • win7缓存设置方法
  • 支付宝花呗服务升级有什么用
  • win10怎么找应用程序
  • Mac SIP系统完整性保护开启及关闭的方法介绍
  • 单位交社保是不是比个人交社保以后退休金要多
  • 交易性金融资本
  • vue 自动部署
  • 大沼泽地国家公园位于哪个城市
  • ts基础
  • 信托融资放在哪个科目
  • php 自动加载类
  • 织梦好用吗
  • 人力为主的公司名称
  • 小企业固定资产折旧方法
  • 培训机构账务处理
  • 移动平均法适用范围
  • 公司租用员工的车辆交什么税
  • 织梦如何开启会员功能
  • go语言ui
  • 免税公司专用发票是什么
  • 汇兑损益的现金流量
  • 物业增值服务主要有哪些
  • 企业所得税的成本怎么填?
  • 土地使用税是新征税吗
  • 原材料出库怎么做分录
  • 房屋租赁印花税计税金额含税吗
  • 建筑劳务公司的会计账务处理
  • 房地产企业怎么交房产税
  • 房地产企业城建税和教育费附加怎么算
  • 取现发放劳务费怎么做账
  • 银行手续费发票未到怎样做账
  • 按照现行会计制度的规定,下列票据中
  • 企业进项构成比例
  • 生产成本和制造费用期末有余额吗
  • fedora linux安装教程
  • win10系统玩dnf闪退
  • centos7.5安装桌面
  • hp电脑系统win8系统
  • linux双网卡双ip配置
  • android 动态布局
  • linux中退出
  • unity怎么用
  • 安卓性能测试主要测试的是
  • linux中shell脚本编写
  • vue 父子组件通信
  • unity引擎占用内存多少
  • 安卓手机管家推荐
  • mysql数据类型大全
  • js立即执行函数作用
  • 小米电脑安装ubuntu
  • 深圳发票真伪查询入口
  • 四川省税务局税费服务支持中心工作人员编制
  • 国税软件下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设