位置: 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 使用)

  • 税务师考试考几门几年考完
  • 公司购买银行理财产品怎么做账
  • 房屋合同印花税税率属于个人交的吗
  • 金蝶旗舰版的现金流量表怎么导出
  • 刚成立的公司没有营业额怎么报税
  • 所得税汇算清缴分录怎么做
  • 票面3个点的增值税发票是交几个点的税金
  • 合并后税务局的全称是什么
  • 自然人税收系统生产经营怎么申报
  • 电梯合同属于什么合同
  • 承租方收到融资租赁款会计处理
  • 建筑安装业什么时候确认收入
  • 税法规定固定资产折旧残值率
  • 跨年度取得增值税发票
  • 怎么看公司行不行
  • 个人房产税征收标准
  • 银行账户设置数大于纳税人向税务机关提供数
  • 有线电视基本收视维护费免征增值税
  • 教资认定流程详细步骤2023
  • 固定资产停止使用还计提折旧吗
  • 利息发票能开专票吗
  • 事业单位研发支出资本化
  • 专用发票可以重复盖章吗
  • 销项税额是负数是怎么回事
  • 办公软件无形资产的确认条件有哪些
  • 外籍人员工资个税
  • 资产负债表要填年初余额吗
  • 做内账收入含税吗
  • 如何在windows11上打开蓝牙
  • Win10任务栏图标居中
  • 研发费中废料收入怎么处理
  • win8.1怎么用
  • 计提增值税的会计科目
  • 没有抵扣的增值税怎么做账
  • linux web gui
  • linux命令tar zcvf
  • 什么叫非同一控制下
  • 卡齐兰加国家公园地理位置
  • 税法中一年按多少天算
  • 将自产的应税消费品用于连续生产应税消费品
  • 外贸公司出口退税率是多少
  • 详解php处理字符的方法
  • 微信小程序游戏手游排行榜
  • yolo v5 github
  • 小程序微信认证
  • php怎么实现输入数字
  • 去年的普票可以开红字吗
  • 有问题的原始凭证是什么
  • 按月申报的税种
  • mysql命令的常用参数包括什么
  • mongodb建立索引的命令
  • 自产用于捐赠的会计处理
  • 股权转让会计分录借银行存款
  • 公司账户转法人个人账户需要交税吗
  • 购买方已认证销售方能开红字信息表吗
  • 进料加工转内销会计处理
  • 销售返利可以计入销售费用吗
  • 付款后没有发票怎么办
  • 仓储费计入哪个部门的费用
  • 其他货币资金属于什么类科目
  • 长期股权投资是什么类的科目
  • jdbc取数据
  • vistaie9安装所需更新补丁
  • ubuntu 16.04 u盘安装
  • win7通过组策略阻止应用程序安装
  • win8使用教程和技能
  • pycharm远程调试linux
  • 安卓中的多线程
  • nodejs中的session
  • 地盘正针的详解使用
  • python 系统监控
  • python网络编程从入门到精通
  • 国家税务局通用定额发票查询
  • 国税登录不了
  • 银行流水怎么查
  • 企业个税申报系统密码忘记了在哪能找回呢?
  • 税务局追缴社保流程及办理期限
  • 数字经济与实体经济融合发展的理论探索
  • 种植业税收优惠政策2023
  • 城镇土地使用税税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设