el-form的model、prop属性和表单校验等详解
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" :rules="rules" ref="groupForm"><el-form-item label="分组名称:" prop="name"><el-input v-model="groupData.name"/></el-form-item>
</el-form>
这段代码中 el-form 的 model 是 groupData,那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 groupData.xxx ,即 groupData 对象的直接属性。
el-from-item 的 prop 属性
el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致。
<el-form-item label="策略名称" prop="strategyName"><el-input v-model="data.strategyName" />
</el-form-item>
要校验的表单 model 是 data.strategyName,那么 prop 的值也必须是 strategyName,否则无法正确完成校验,出现明明已经已经输入了表单值,但是还是出现校验失败的提示信息。
多表单校验
el-form-item 内部如果包含多个表单,默认校验失败时会将所有表单高亮,例如:
虽然只有第二个表单没有输入,但是校验失败时会同时高亮两个表单。怎么只对第二个表单高亮呢?
解决办法是用嵌套:
外层 el-form-item 是正常的信息,内层对第二个表单再次嵌套 el-form-item 指定校验属性:
<el-form-item label="任务执行时间:" required><el-select v-model="data.executeCycle"><el-option label="每小时" value="hour">每小时</el-option><el-option label="每日" value="day">每日</el-option><el-option label="每周" value="week">每周</el-option><el-option label="每月" value="month">每月</el-option></el-select><el-form-item prop="executeTime"><el-date-picker v-model="data.executeTime"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"placeholder="选择日期时间"default-time="00:00:00"></el-date-picker></el-form-item>
</el-form-item>
将日期输入框包裹在新的 el-form-item 中,外层的 el-form-item 添加 requred 显示前面的红星,就可以只对该属性校验了,将第二个表单再嵌套后,校验结果就正常了:
复杂属性
<el-form-item label="执行周期 " prop="config.gapTime"><el-input type="number" :min="1" v-model="data.config.gapTime"></el-input><el-form-item>
此时,该属性对应的 rules 定义也必须是对象:
rules: {config: {gapTime: [{ required: true, message: '请输入执行周期', trigger: 'blur' },],},},
否则,就会出现明明已经输入了值,但是还是提示校验错误信息。
注意
表单校验的时候,犯了几个低级错误,记录如下:
- el-form 下的 el-input 使用的数据不是 el-form 的 model 数据,导致校验失败;
- el-form 的 :rules 属性敲错了,忘记了冒号,导致传递的是个字符串;
- el-form-item 的 prop 和 el-input 表单的属性不一致导致校验失败。
本文转载于:https://wojiushiwo945you.blog.csdn.net/article/details/108977668
el-form的model、prop属性和表单校验等详解相关推荐
- HTML中的表格和表单控件详解
文章目录 前言 表格和表单控件的作用? 一.表格控件的语法 1.tr标签和td标签 2.表格的属性 二.表单控件的用法 1.创建表单 2.表单的常用属性 3.表单常用控件(input控件) 4.文本域 ...
- java中form用法_SpringMVC表单标签使用详解
在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需 ...
- php 判断提交表单提交,php判断form表单是否提交详解
php判断表单是否提交 我们一般通过 submit 提交表单时,会在乎在表单中填写的一大堆数据是否提交到后台.这里就需要做个判断,使用php代码来判断表单数据是否被提交一般采用如下的形式:<?p ...
- Spring MVC的表单标签库详解
表单标签库中包含了可以用在 JSP 页面中渲染 HTML 元素的标签.在 JSP 页面使用 Spring 表单标签库时,必须在 JSP 页面开头处声明 taglib 指令,指令代码如下: <%@ ...
- jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...
- HTML 5新增表单元素(案例详解)
●datalist datalist元素定义输入框的选项列表,选项列表是通过该元素内的option元素进行创建的. 该元素与input元素配合使用,来定义input可能的值. 要把这个datalist ...
- Validform表单验证框架详解
Validform是另外一种表单验证框架,也是基于jQuery框架,用法比较灵活. 这里使用该框架的版本号为: Validform_v5.3.2 官网:http://validform.rjboy.c ...
- 前端:表单以及BFC详解
表格的创建:之前表格是用来布局的,现在只用来展示数据 表格中的计算属性:像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格 一:表格创建的标签 1.ta ...
- html表单最全详解,初学必看
大家去面试,去开户都要填各式各样的表单,填好之后给工作人员,他们会按照表单项目与你填的内容来帮你完成业务. 同样的,在互联网冲浪也需要填各种各样的表单,比如用户问卷调查,新注册账号等.那么我们填好的表 ...
- 最有范儿的H5制作工具—应用之星之表单控件详解
H5页面在线制作平台大家应该都很熟悉了,它的出现使招聘.邀请.宣传都变得很精致.最近,应用之星也推出了H5页面制作,这个平台的功能很强大,不仅能做H5页面,还能制作App.其中,平台的表单控件功能具有 ...
最新文章
- php 新闻列表,php原生开发新闻站之新闻列表(二)
- C++编程思想:C++string
- redis-稿件-python连接redis-使用连接池的方式来创建
- 十、MySQL的应用大全
- 合并基因表达水平(merge gene expression levels, FPKM)
- 2022-渗透测试-口令破解-几款暴力破解和字典生成的工具
- java heapdump 分析工具_Heapdump分析软件
- matlab 画电路图,硬件大杀器:能画PCB还能替代MATLAB?!
- java 设置表头字体_Java将数据按列写入Excel并设置格式(字体、背景色、自动列宽、对齐方式等)...
- Advanced Javascript outlining插件说明
- 触摸屏:Linux输入子系统:多点触控协议
- 嵌入式系统那些事-一张图秒懂系统启动流程
- Excel重复编号,1万个数据重复1到100编号
- it企业实习_it公司实习心得体会
- Python——turtle(海龟绘图)
- 索骥馆-网络营销之《锦囊妙计 网站推广101招 第7版》扫描版[PDF]
- 什么是 MIME ?
- 浅谈在实验室的一个作品---8x8x8光立方
- Flash动画学习指南:帧频(Frame rates)
- 教你如何识别DWG文件版本