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

  • 退票凭证什么样子
  • 预算会计无偿调拨净资产
  • 其他应收款要做账吗
  • 增值税申报错误如何重报
  • 房地产公司销售商品房属于增值税征收范围吗
  • 应收票据和应收账款的区别举例
  • 行政事业性收据上面的角分无是右下划线吗
  • 多交税款如何处罚
  • 企业未能实施个人所得税代扣代缴是否会罚款呢?
  • 代扣个税手续费返还怎么申请
  • 发票有误多交的钱怎么办
  • 企业生产成本核算的一般程序为
  • 银行贷款利息可以减免吗
  • 一般纳税人选择简易计税进项税可以抵扣吗
  • 租赁合同印花税计税依据含税吗
  • 总分机构账务处理
  • 津贴证明是让单位开吗
  • 收到分包公司工程发票收入怎么做账
  • 医用酒精出口 需要什么条件
  • 离职后绩效奖金应该按照整月发吗
  • iphone无法打开网页怎么办
  • 加速折旧以后年度如何填报调减额
  • win11如何降到win10
  • PHP:curl_copy_handle()的用法_cURL函数
  • php pulsar
  • 废品损失科目的期末余额在借方表示什么?
  • 成本法变为权益法剩余股权
  • PHP:mcrypt_module_get_algo_key_size()的用法_Mcrypt函数
  • 偿还债券本金和利息
  • 韦罗尼卡
  • laravel 关联
  • php 邮件发送
  • 工会经费计入什么费用明细科目
  • vue基础知识
  • 强大的图片预览软件
  • html+php
  • 指令获取
  • 需要缴纳企业所得税的企业类型
  • python requests读取服务器响应
  • 百度ai修复照片
  • 流动比率中的流动资产包括哪些科目
  • mongodb的redo日志为
  • vue2响应式原理面试回答
  • 关于种植养殖的手抄报
  • 开了的发票应该如何在丁字帐里记录?
  • 处置资产增值税纳税义务发生时间
  • 员工意外伤害险入什么会计科目
  • 新手任务税控设备申请
  • 固定资产改良支出
  • 应付账款长时间收不回怎么处理呢
  • 周转材料计入现金流量表
  • 应收款项减值的备抵法及其会计处理
  • 抵货款怎么做账
  • 进项跟销项金额一样是否可行
  • 账面价值,账面净值,账面余额三者的区别
  • 纳税人和负税人区别通俗易懂
  • 如何为报表指定数据源?
  • 税收会计采用什么记账法
  • sql中nullif
  • win7 组织
  • macbook如何使用word
  • 进程lsass.exe
  • 将程序桌面图标放到桌面
  • windows 隐藏软件
  • linux怎么用shell
  • win7系统播放器在哪
  • win10 64位系统提示0x80070643错误代码的解决方法
  • unity3d读取gis数据
  • 教你用纸折一只会跳的小兔子,非常好玩,小朋友都喜欢
  • unity_jail
  • jquery图片放大效果
  • jquery输出语句
  • 国家税务总局2012年20号公告
  • 重庆电子税务局网页版登录
  • 辽宁社保网上申报流程图
  • 关于税收的问题及答案
  • 上海嘉定南翔房子
  • 美国各州地税税率
  • 买车购置税去哪里交钱
  • 河北省社保证明网上查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设