位置: IT常识 - 正文

结合表单验证谈el-form中model、prop、rules属性(表单验证用什么方法实现)

编辑:rootadmin
结合表单验证谈el-form中model、prop、rules属性 目录前言modelproprules验证总结前言

推荐整理分享结合表单验证谈el-form中model、prop、rules属性(表单验证用什么方法实现),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:表单验证trigger,表单验证方法一般有哪几种,表单验证实验报告,表单验证实验报告,表单验证原理,如何实现表单验证,如何实现表单验证,表单验证两种方式,内容如对您有帮助,希望把文章链接给更多的朋友!

最近写vue项目需要用element ui中的表单组件显示一些信息呈现在页面上,但在使用提供的一些属性时有些困惑——这三者之间有什么关系,必须要同时存在吗?于是在这里做一些记录。

model

官方说是表单中的数据对象,于是有

<el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label="用户名" prop="name"> <el-input v-model="form.name"></el-input></el-form-item></el-form>

其中form数据已存于date

form: { name: '',//这里是空的但截图有值 因为该项目需要拿取后端传来的用户信息 但不影响阅读 },prop

prop是form-item里的属性:

rules结合表单验证谈el-form中model、prop、rules属性(表单验证用什么方法实现)

这个应该最好理解 就是传入对表单内容的约束条件 比如date下面的rules里就有对name的约束

rules: { name: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' } ], }

配置完后的效果图:(上面代码只针对name项,也就是用户名,这里只针对name项讨论。截图含有写的其他项,但不影响阅读) 当触发约束条件时也奏效:

验证

把model去掉后: 页面的数据都能渲染,就是验证失了控,不管你做什么仿佛它都看不见值,显示的是没有任何输入信息才会触发的红字。看来model的作用是为rules校验传递一个能提供被检测内容的源数据。 去掉prop 把prop去掉后直接失去验证效果 prop与model不同名和rules匹配

上面el-form-item里的prop改成了na,下面date里的rules相应改成na:效果和第一种情况一样。

总结

验证表单的过程可以拆解为取值和验证两个过程。 取值是通过model获取源数据、借助prop进而获取被检测的信息。因此没有model自然没了内容,但是验证的过程是存在的,只是一直拿的空值去验证,所以一直都是“请输入用户名”的红字出现。没了prop也是影响到了这一过程。 验证是通过prop与rule的内容进行比对,但prop仅仅是找到rule的相关“条例”,与条例比较的始终还是model借助prop获取的信息。因此没了prop同样影响这一过程——又没源数据又没供你依照的规则,自然就毫无验证功能可言。 而当prop和form表单中的key值不一样但又能和rules匹配时(上图第三种情况),第一条取值的现走不通,第二条验证的线能走通,还是出现了第一种情况的后果。

精简一点就是,model和rules就像一个对象,prop就是两者的属性值,通过prop取值取“条例”进行验证。 然后看到这位博主的理解:

所以我们大致了解的el-form 中 model的作用:目前看来主要是为了配合表单验证。里面的逻辑大概是,在el-form-item上写一个prop,这个prop左手对应着数据源(即用model.prop找到对应的数据源),右手对应着验证规则(即用rules.prop找到对应的规则),然后才能快乐的验证。

也是很形象哒!

本文链接地址:https://www.jiuchutong.com/zhishi/298429.html 转载请保留说明!

上一篇:没有关系的话,那就去建立关系吧(没有关系怎么表达)

下一篇:Layui的基本使用(前端登录操作步骤)(layui 使用)

  • 笔记本降温(笔记本降温)(笔记本降温神器有用吗)

    笔记本降温(笔记本降温)(笔记本降温神器有用吗)

  • 抖音怎么把日常转为转发(抖音怎么把日常删除)

    抖音怎么把日常转为转发(抖音怎么把日常删除)

  • 苹果11pro和max有什么区别(苹果11pro跟max的区别)

    苹果11pro和max有什么区别(苹果11pro跟max的区别)

  • 网易云音乐文件夹在哪(iphone网易云音乐文件)

    网易云音乐文件夹在哪(iphone网易云音乐文件)

  • 怎么不用密码打开手机(怎么不用密码打开苹果平板)

    怎么不用密码打开手机(怎么不用密码打开苹果平板)

  • oppo相机防抖怎么设置(oppo手机相机防抖功能在哪里找?)

    oppo相机防抖怎么设置(oppo手机相机防抖功能在哪里找?)

  • 全民k歌送花能删掉吗(全民k歌送花能赚钱吗)

    全民k歌送花能删掉吗(全民k歌送花能赚钱吗)

  • 小米mix2有红外功能吗(小米mix2红外线功能怎么开)

    小米mix2有红外功能吗(小米mix2红外线功能怎么开)

  • 抖音怎么看收藏的视频(抖音怎么看收藏时间)

    抖音怎么看收藏的视频(抖音怎么看收藏时间)

  • cpu换液态金属弊端(cpu液金多久换一次)

    cpu换液态金属弊端(cpu液金多久换一次)

  • 电脑任务栏没反应怎么关机(电脑任务栏没反应双击会刷新)

    电脑任务栏没反应怎么关机(电脑任务栏没反应双击会刷新)

  • 微信朋友圈提醒某人对方显示什么(微信朋友圈提醒谁看别人能看到吗)

    微信朋友圈提醒某人对方显示什么(微信朋友圈提醒谁看别人能看到吗)

  • 朋友圈怎么全部清空(朋友圈怎么全部清空别人发的)

    朋友圈怎么全部清空(朋友圈怎么全部清空别人发的)

  • magicbox魔盒是什么(魔盒使用视频)

    magicbox魔盒是什么(魔盒使用视频)

  • 单片机的组成(单片机的组成有哪些)

    单片机的组成(单片机的组成有哪些)

  • word如何输乘号(如何在word中输入乘号)

    word如何输乘号(如何在word中输入乘号)

  • 安卓微信回车键发送怎么换行(安卓微信回车键发送消息怎么换行)

    安卓微信回车键发送怎么换行(安卓微信回车键发送消息怎么换行)

  • 华为受限应用怎么解决(华为手机应用被限制使用如何恢复正常)

    华为受限应用怎么解决(华为手机应用被限制使用如何恢复正常)

  • 苹果x耳机怎么连接(苹果x耳机怎么连接电脑)

    苹果x耳机怎么连接(苹果x耳机怎么连接电脑)

  • 酷我音乐如何k歌(酷我音乐如何看听歌时间)

    酷我音乐如何k歌(酷我音乐如何看听歌时间)

  • 怎么取消微博自动续费(怎么取消微博自动发生日)

    怎么取消微博自动续费(怎么取消微博自动发生日)

  • 勿扰模式打电话提示什么(勿扰模式打电话会是怎样)

    勿扰模式打电话提示什么(勿扰模式打电话会是怎样)

  • 迅雷如何解除安全模式(迅雷如何解除安装限制)

    迅雷如何解除安全模式(迅雷如何解除安装限制)

  • 汽车网站设计的技巧有哪些(汽车网站的分类及其特点)

    汽车网站设计的技巧有哪些(汽车网站的分类及其特点)

  • 怎么看电脑型号 华硕(怎么看电脑型号和配置)

    怎么看电脑型号 华硕(怎么看电脑型号和配置)

  • 某煤矿将自采原煤用于投资的业务应缴纳资源税
  • 化妆品销售公司简介
  • 股权转让主要交什么税
  • 在外地设立分公司如何办理
  • 定额扣除个税什么意思
  • 结转完工入库产品成本计算
  • 其他债权投资减值准备影响账面价值吗
  • 火车票抵扣进项税怎么计算
  • 从小规模纳税人购进产品进项税怎么计算
  • 采购货款属于什么会计科目
  • 城建税纳税申报表
  • 自然人管理系统银行信息
  • 印刷配件有哪些
  • 免税的农业企业可以抵扣专票吗
  • 酒店筹建是什么意思
  • 发票丢失可以冲销吗
  • 个体户进货需要发票吗?
  • 私立医院增值税税率是多少
  • 什么发票 既可以抵扣又可以退税
  • 股东投资设备一定要评估吗
  • 新注册公司什么时候报个税
  • 企业减免企业所得税怎么算
  • 联想thinkpad安装win7方法
  • 苹果系统中怎么删除软件
  • 驾校收入与成本的关系
  • 建筑业主营业务成本包括哪些
  • 原始凭证的内容有哪些
  • ospf区域间路由和区域内路由
  • 企业以非货币性资产投资
  • 存货跌价准备减少
  • 西西弗书店主管级
  • “Ninja is required to load C++ extensions”解决方案
  • pytorch1.9.0
  • php使用正则表达式提取abcdef
  • diff命令参数
  • php中array怎么用
  • 终止pppoe会话
  • 车保险费中的车险是什么
  • 以前年度损益调整借贷方向
  • 增值税发票完税证明图片
  • 普通发票增量需要什么资料
  • 如何设置linux
  • 酒店低值易耗品怎么摊销
  • 进货该怎么进
  • MySQL数据库存储引擎
  • 增值税发票抵扣期限是多久
  • sql server 2016使用
  • 税法的个人所得税
  • win10!
  • 小规模纳税人工程款税率是多少
  • 房地产营业税率是多少
  • 公司支付宝账户提现需要手续费吗
  • 应交税费应交增值税已交税金怎么用
  • 旅游公司怎么交增值税
  • 减免税款属于政府补助利得吗
  • 电脑买了四个月折旧多少
  • 现金日记账1月份本年累计吗
  • windows11技术预览版
  • xp系统弹出广告怎么处理
  • IPad怎么连接电视机看看影视
  • badcommandorfilename是什么意思
  • linux进程运行的两种方式
  • xp系统怎么和win7系统共享
  • win10 mobile 1709
  • SFC无需光盘出马,硬盘搞定
  • win8.1介绍
  • win8运行速度慢怎么办
  • 解决的英文
  • linux常见的启动方式
  • Linux 压缩某个文件夹的实现方法
  • opencv与pil
  • oracle安装使用
  • js数组洗牌
  • jquery mobile demo
  • 英语流利说的简单介绍
  • 福建省地方税务局杨静
  • 深圳地税电子税务局
  • 国家税务总局手工发票查询平台
  • 个人所得税减免标准及明细
  • 准生证网上查询码是个什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设