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

  • 网站推广方法系列之网站内容(网站推广的几种方法)

    网站推广方法系列之网站内容(网站推广的几种方法)

  • 微信行程轨迹记录在哪里看(微信行程轨迹记录可以记录帮别人买的吗)

    微信行程轨迹记录在哪里看(微信行程轨迹记录可以记录帮别人买的吗)

  • 携程订单删除了能恢复吗(携程订单删除了还能看到评价吗)

    携程订单删除了能恢复吗(携程订单删除了还能看到评价吗)

  • 小米体脂称2和1区别(小米体脂称2和八电极体脂称)

    小米体脂称2和1区别(小米体脂称2和八电极体脂称)

  • 佳能m50闪光灯怎么开(佳能m50 闪光灯)

    佳能m50闪光灯怎么开(佳能m50 闪光灯)

  • 苹果锁屏声音越来越小(为什么苹果手机的锁屏声音越用声音越小)

    苹果锁屏声音越来越小(为什么苹果手机的锁屏声音越用声音越小)

  • 华为p20pro怎么设置微信美颜(华为P20Pro怎么设置短信密码自动填写)

    华为p20pro怎么设置微信美颜(华为P20Pro怎么设置短信密码自动填写)

  • 为什么文件夹不能直接通过QQ发送(为什么文件夹不能重命名)

    为什么文件夹不能直接通过QQ发送(为什么文件夹不能重命名)

  • 抖音提高播放量的方法(抖音提高播放量的新方法)

    抖音提高播放量的方法(抖音提高播放量的新方法)

  • 华为手机的云空间在哪里(华为手机的云空间怎么关闭)

    华为手机的云空间在哪里(华为手机的云空间怎么关闭)

  • 说说评论权限哪里设置的(说说评论怎么设置私密)

    说说评论权限哪里设置的(说说评论怎么设置私密)

  • 为什么苹果11的面部突然用不了(为什么苹果11的网络老是特别差)

    为什么苹果11的面部突然用不了(为什么苹果11的网络老是特别差)

  • 小米9有没有无线反向充电(小米9有没有无线)

    小米9有没有无线反向充电(小米9有没有无线)

  • 荣耀v30有呼吸灯吗(华为荣耀v30手机呼吸灯在哪里设置)

    荣耀v30有呼吸灯吗(华为荣耀v30手机呼吸灯在哪里设置)

  • wifi直连设备是什么意思(wifi直连设备选择)

    wifi直连设备是什么意思(wifi直连设备选择)

  • 拼多多关联店铺代码(拼多多关联店铺资金限制了)

    拼多多关联店铺代码(拼多多关联店铺资金限制了)

  • 淘宝信息发不出去(淘宝信息发不出去显示感叹号是被拉黑了吗)

    淘宝信息发不出去(淘宝信息发不出去显示感叹号是被拉黑了吗)

  • cdr渐变工具在哪(cdr2019渐变工具怎样用)

    cdr渐变工具在哪(cdr2019渐变工具怎样用)

  • 局域网的特点是什么(以下不是无线局域网的特点是)

    局域网的特点是什么(以下不是无线局域网的特点是)

  • 拼多多链接怎么发朋友圈(拼多多链接怎么发)

    拼多多链接怎么发朋友圈(拼多多链接怎么发)

  • 外接显示器间歇性黑屏(外接显示器间歇性黑屏几秒)

    外接显示器间歇性黑屏(外接显示器间歇性黑屏几秒)

  • 8p耳机怎么用(苹果8p耳机怎么用)

    8p耳机怎么用(苹果8p耳机怎么用)

  • qq里面的小耳朵是什么(qq里面的小耳朵图标是什么啊)

    qq里面的小耳朵是什么(qq里面的小耳朵图标是什么啊)

  • 抖音限流怎么办(抖音限流怎么办?可以恢复吗?)

    抖音限流怎么办(抖音限流怎么办?可以恢复吗?)

  • 【哈士奇赠书活动 - 24期】-〖前端工程化:基于Vue.js 3.0的设计与实践〗(哈士奇新手礼包)

    【哈士奇赠书活动 - 24期】-〖前端工程化:基于Vue.js 3.0的设计与实践〗(哈士奇新手礼包)

  • 什么是价外税价外税有哪些
  • 税务行政复议是税务行政复议机关的裁决活动
  • 残保金滞纳金能超过本金吗
  • 金税盘递减税款2022
  • 跨年度退货可以开红字发票吗
  • 离线开票时间超时
  • 出售闲置材料账务怎么做
  • 赊销固定资产会计科目
  • 怎么处理善意取得的大头小尾发票?
  • 已经发生的费用
  • 补缴所得税要调账吗
  • 出口发票金额和备注了差了1分钱
  • 餐饮会员充值赠送内帐怎么做账务处理
  • 应收账款平均余额公式
  • 发票入账后查出金额错误
  • 差旅费补贴需要缴纳个人所得税吗需要发票
  • 单位装饰
  • 去新建的外贸公司好不好
  • 电子账本excel模板
  • 公积金贷款利息现在是多少
  • 对方公司税务注销了发票没有开给我怎么办
  • 出口50万货物退多少税
  • 合伙人退伙资产清算需要交税吗
  • 自行研发的专利权计入
  • 无法手动设置时区
  • 无票业务如何处理
  • 监事会成员是什么人
  • 栈定义代码
  • 员工的出差补贴计入什么科目
  • 长期待摊费用的概念
  • 劳务资质办理需要什么条件
  • 营改增全面推开为什么还叫试点
  • 小企业会计准则调整以前年度费用分录
  • 固定资产转让出去租赁收入怎么入账
  • 利息收入如何会计分录
  • vue中created和mounted
  • node使用axios
  • chattr i
  • php array search
  • uname命令功能
  • 公司处理固定资产汽车的账务处理
  • 事务所的账务处理
  • 各种账簿的登记依据和登记方法分别是什么
  • 收到项目资本金入什么科目
  • 两处取得工资薪金如何申报
  • 工会费可以发现金吗
  • 发票红冲重开是退个税吗
  • 发货快递费多少钱
  • 打样费入什么科目
  • 会计的视频教程
  • 2018城镇医疗保险缴费
  • 取得的政府补助收入计入
  • 生育保险基金的筹集原则是
  • 自制产品无偿赠送合法吗
  • 修建的道路怎么做账
  • 长期无法收回的应收账款如何处理
  • 关闭terminal monitor
  • windows任务管理器命令
  • openmpi编译
  • windows字幕软件
  • Linux系统开源VPN Openvpn进程异常退出解决方法
  • Android游戏开发打砖块
  • jquery手机号码正则表达式
  • jquery添加兄弟元素
  • 数据结构 二叉树什么是孩子数
  • 批处理列出文件名
  • python神奇的小海龟
  • angular.js
  • python中tab
  • jquery使用教程
  • shape form的区别
  • python 设计
  • 税务文书档案保管期限
  • 陕西税务局官网登录
  • 黄金消费税税率是多少
  • 如何查询企业税务评级
  • 税务工会费缴费标准
  • 公安驻税务联络办公室
  • 电子税务局密钥不一致
  • 税务局实地核查内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设