背景

Vue 的 el-form 提供了表单校验功能,通过 :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则。通过封装,让前端校验更方便。具体使用过程中,有几个容易出错的地方,本文来整理一下。每一个坑都是笔者亲自趟过的,写完本文后,以后应该不会再踏入相同的坑。

el-form 的 model 属性

el-form 的 model 属性是用来指定表单使用的数据的,虽然 el-form 指定了 model 对象,理论上,vue 并没有限制 el-input 绑定的数据,el-form 内部的 el-input 组件依然可以绑定其他数据

需要注意的是,如果要用 rules 进行表单校验,那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性,否则会导致校验失败。

这段代码中 el-form 的 model 是 groupData,那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 groupData.xxx ,即 groupData 对象的直接属性。

el-from-item 的 prop 属性

el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致。

要校验的表单 model 是 data.strategyName,那么 prop 的值也必须是 strategyName,否则无法正确完成校验,出现明明已经已经输入了表单值,但是还是出现校验失败的提示信息。

多表单校验

el-form-item 内部如果包含多个表单,默认校验失败时会将所有表单高亮,例如:

默认情况多表单校验

虽然只有第二个表单没有输入,但是校验失败时会同时高亮两个表单。

怎么只对第二个表单高亮呢?

解决办法是用嵌套:外层 el-form-item 是正常的信息,内层对第二个表单再次嵌套 el-form-item 指定校验属性:

每小时每日每周每月

将日期输入框包裹在新的 el-form-item 中,外层的 el-form-item 添加 requred 显示前面的红星,就可以只对该属性校验了,将第二个表单再嵌套后,校验结果就正常了:

使用嵌套只针对一个进行校验

非直接子属性的校验问题

如果待校验的表单不是 el-form 的 model 的直接子属性,而是子属性的子属性,即子属性为对象,比如这段代码:

此处校验的是 data.config.gapTime 属性,那么该怎么对其进行校验呢?

答案是, rules 中定义的该属性也必须是对象,必须保证 el-form-item 的 prop 是和表单属性一样 prop="config.gapTime" 。

rules: {        config: {          gapTime: [            { required: true, message: '请输入执行周期', trigger: 'blur' },          ],        },      },

否则,就会出现明明已经输入了值,但是还是提示校验错误信息。

启示录

表单校验的时候,犯了几个低级错误,记录如下:

  1. el-form 下的 el-input 使用的数据不是 el-form 的 model 数据,导致校验失败;
  2. el-form 的 :rules 属性敲错了,忘记了冒号,导致传递的是个字符串;
  3. el-form-item 的 prop 和 el-input 表单的属性不一致导致校验失败。

表单校验还有三种常见问题:

  • please transfer a valid prop path to form item 属性绑定异常如何解决?
  • el-popover 中的 readonly 属性,如何进行校验?
  • v-for 动态生成的表单,如何校验?

下一节将继续介绍这两个问题的解决办法。

activeform表单中的旧数据怎么显示_三分钟为你细数 Vue el-form 表单校验的坑点相关推荐

  1. vue 给form表单赋值_vue获取form表单的值示例

    vue获取form表单的值示例 这里使用的是Element-ui组件 html: JS: var phone = this.phone; var password = this.password; v ...

  2. vue的form表单在提交成功后置空

    vue的form表单在提交成功后置空 form表单 说明 :form表单加上属性值 ref="form" 点击事件加入 roleManager.$refs['form'].rese ...

  3. el-table数据不显示_数据透视表,一篇就够了

    | 函数部分告一段落,这一篇文章助你学懂数据透视表目录:一.创建数据透视表二.数据透视表字段列表 值的显示方式 三.分析 1.切片器 2.计算字段 3.计算项 4.组合四.设计 1.分类汇总 2.报表 ...

  4. 什么标签用于在表单中构建复选框_以下 ( ) 标签用于在表单中构建复选框 。_学小易找答案...

    [单选题]不属于有齿轮曳引机的部件 ( ) [简答题]使用素材 1101.rar ,设计一个如下图所示的页面,要求在中小型屏幕下将12幅图片分两行显示 [名词解释]什么是组件? [单选题]某个物种同时 ...

  5. 表单验证通过输入框获取用户输入的密码,如果输入密码为“happy123”,则显示“密码输入正确”,否则提示“密码输入错误”,如果输入三次,显示提示信息“三分钟后在尝试”

    功能:简单的表单验证,密码输入次数控制,定时器控制可输入提醒,密码匹配 Html:请忽略界面设计,没时间做 <form><input id="userName" ...

  6. mysql慢查询 表级锁_三分钟了解Mysql的表级锁——《深究Mysql锁》

    延伸阅读: 五分钟了解Mysql的行级锁 一分钟深入Mysql的意向锁 mysql锁相关讲解及其应用--<深究mysql锁>了解锁前,一定要先看这篇,了解什么是MVCC,如果我们学习锁,没 ...

  7. vue中form表单支持回车键提交踩坑

    平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...

  8. vue动态form表单实现

    你只管复制粘贴,剩下交给代码(通过自己需求改代码) <!DOCTYPE html> <html lang="en"><head><meta ...

  9. Vue 使用form表单提交问题

    背景:公司的项目对接了一家第三方的支付机构,使用云闪付web移动端支付,对方要求form表单提交信息 1.一开始,使用接口使用Axios请求设置form格式提交 import axios from & ...

最新文章

  1. 基于Virtual DOM与Diff DOM的测试代码生成
  2. 偏见与人类大脑结构有关
  3. SQLAdvisor美团SQL索引优化建议工具
  4. 你需要知道的缓存击穿/穿透/雪崩
  5. (cljs/run-at (JSVM. :all) 一次说白DataType、Record和Protocol)
  6. mysql如何保证高可用_mysql怎么保证高可用
  7. 通过函数名字符串调用函数【C语言版】
  8. 功放前级的左右_TDG Audio达芬奇:什么是前级,后极?
  9. 泰康应用盒子Android,泰康医疗app下载-泰康医疗 安卓版v1.8.8-PC6安卓网
  10. 手把手教你用python写游戏
  11. QQ用户文件夹下即(user文件夹) 各个文件都是干什么的
  12. 宽带波束形成 matlab,关于均匀圆阵MVDR宽带波束形成的程序
  13. 技嘉服务器主板是什么型号,技嘉主板小型号字母代表什么意思?
  14. 微信小程序tab切换功能的实现
  15. java加载so包,undefined symbol处理方法
  16. java ibm notes_使用Java API从Lotus Notes NSF文件中提取电子邮件
  17. 俞敏洪沉默,新东方落泪
  18. 移动硬盘无法访问设备未就绪资料找到的法子
  19. 高通android q 通过backtrace,使用addr2ine工具,定位crash问题记录
  20. CISP 相关知识点梳理

热门文章

  1. 学python的好处-python有什么优点
  2. python 装饰器 参数-如何将额外的参数传递给Python装饰器?
  3. python需要php吗-C、C+、Java、PHP、Python分别用来开发什么?
  4. python运行软件-提高Python程序的运行速度
  5. python笔记本-如何用Python在笔记本电脑上分析100GB数据(上)
  6. python游戏脚本实例-使用Python写一个贪吃蛇游戏实例代码
  7. python爬百度翻译-python爬虫实现百度翻译
  8. python安装第三方库-安装第三方模块
  9. UVa1421 - Archery
  10. 一个高性能RPC框架原理剖析