位置: 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数据集可视化(一):点云多种视图的可视化实现

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

  • 企业发生的印花税计入什么科目
  • 企业房产税怎么计算
  • 注册资本金入账需要缴税么
  • 增值税有定额税率吗
  • 期末资产负债
  • 小规模房产税减免
  • 营业成本增加会导致
  • 以房抵顶工程款有效吗
  • 房产继承是不是谁照顾谁的
  • 年末增值税结转账务处理流程
  • 固定资产抵债要交税吗怎么交
  • 财产损失怎么办
  • 核定征收企业注销后安全吗
  • 出口退税没有进项就退不了税吗?
  • 设备税款
  • 银行美元账户调汇会计分录
  • 行政单位要纳税吗
  • 一般纳税人预交税款算法
  • 增值税一般纳税人认定标准
  • 工会发放员工福利的通知
  • 收到的专票都必须开吗
  • 业务招待费怎么调整应纳税所得额
  • 从租计征的房产税减半政策
  • 单位的审计
  • 法人股东获得分红的规定
  • 外经证过期没报验
  • 公司注销后股东承担责任的法律规定
  • 工厂产品研发代码是多少
  • 旅游业小规模差额计税的能开1%
  • 招待审计人员
  • sdi是什么文件
  • 其他综合收益属于什么科目借贷
  • 拍卖本人文字作品原稿
  • 税收滞纳金可以抵税吗
  • 企业税务罚款标准
  • 企业定率征收的税率是多少
  • 经营租入的设备为什么不属于资产
  • 招待费专票可以抵扣进项吗
  • php采集源码
  • spring bootcsdn
  • vue和react差别
  • “php”
  • 房地产代理公司资质证书
  • sql 覆盖索引
  • 出口结汇有哪些常用方法?
  • 固定资产清理损益表怎么填
  • 长期股权投资中同一控制和非同一控制的区别
  • 股东借款的利息收入
  • 没有计提坏账准备的情况下,应收账款的计税基础
  • 自建生产线的入账价值
  • 加油预付卡发票新规定文件
  • 单位临时账户可以取现吗
  • 跨服务器访问数据库
  • windows server 2008 r2激活密钥
  • xp管理员账号密码
  • yum下载已安装的包
  • 日历显示不全
  • vim如何复制粘贴
  • 直线画画
  • opengl context for format
  • node.js编译
  • cocos2d-x教程
  • 批量替换在哪
  • 关于加载失败壁纸
  • cocos2dx引擎
  • js按照指定顺序排序
  • prototype用法
  • nodejs项目搭建
  • apache使用端口
  • python编程判断一千以内含88的数的方法
  • web.py 十分钟创建简易博客实现代码
  • Genymotion首次运行程序出现错误Installation error: INSTALL_FAILED_CPU_ABI_INCOMPATIBLE
  • 全面解析A型天秤座男
  • 江西国税局电子税务局
  • 北京海淀大集一览表?
  • 亏损企业能否给补偿
  • 内蒙古国家税务局网上电子税务局官网
  • 广东电子税务局中山税务局网
  • 企业不做审计会有什么后果?
  • 江之都财税服务集团有限公司地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设