有关elementUI el-form表单配置了校验规则但是反向校验问题

简介: 有关elementUI el-form表单配置了校验规则但是反向校验问题

先看一下我遇到的问题

这四项我配置了必填的规则

但是点击保存,即使我啥都没填也给通过了

反而我填了信息提示我信息未填写:

造成这种现象的原因也很简单,就是忘记给el-form加model属性了

<el-form  ref="ruleFormRef" :model="editStaff" :rules="rules" label-width="100px">

添加后就会恢复正常

总结:使用el-form组件的校验时需要配置

<el-form>的配置属性:

ref(指定组件唯一标识),model(表单数据对象),rules(校验规则对象)

<el-form-item>的配置属性:

prop(标识表单项的字段名)

prop属性的作用是在表单校验时,根据字段名来匹配需要校验的表单项。prop属性的值应该与表单数据对象中的字段名相对应。

目录
相关文章
|
存储 JavaScript 前端开发
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
4632 0
【前端系列】- 富文本组件(mavon-editor)
|
JavaScript 前端开发 C#
Select 下拉框切换拦截的三种方案|【Proxy】
Select 下拉框切换拦截的三种方案|【Proxy】
2189 0
|
前端开发
解决el-descriptions的label-class-name不生效问题
解决el-descriptions的label-class-name不生效问题
1552 0
uniapp 全局数据(globalData)的设置,获取,更改
uniapp 全局数据(globalData)的设置,获取,更改
3317 0
|
JavaScript 数据格式
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
1686 0
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
|
JavaScript
Vue中v-if失效问题(数据更新,页面没有发生变化)
Vue中v-if失效问题(数据更新,页面没有发生变化)
Vue中v-if失效问题(数据更新,页面没有发生变化)
Thymeleaf内置对象、定义变量、URL参数及标签自定义属性
Thymeleaf内置对象、定义变量、URL参数及标签自定义属性
532 0
|
26天前
|
Web App开发 人工智能 自然语言处理
快速搞定Dify+Chrome MCP:打造能操作网页的AI助手
用Dify+Chrome MCP,3分钟打造能“动手”操作网页的AI助手!无需编程,通过自然语言指令实现自动填表、数据抓取、网页点击等自动化任务。本地部署简单,支持搜索、登录、监控等场景,让AI成为你的7×24小时数字员工,高效处理重复性网页工作。
|
1月前
|
Web App开发 人工智能 自然语言处理
快速搞定Dify+Chrome MCP:打造能操作网页的AI助手
本文介绍了如何通过Dify和Chrome MCP在3分钟内打造一个能操作浏览器的AI助手。结合Dify的LLM能力与Chrome MCP的浏览器控制功能,用户可用自然语言指令让AI自动填写表单、抓取数据、点击按钮,实现网页自动化操作。无需复杂编程,适合本地部署,可应用于数据监控、内容抓取等多种场景。
|
JavaScript
解决Elementui输入框(text)与文本域(textarea)字体不一样问题
解决Elementui输入框(text)与文本域(textarea)字体不一样问题
941 5
下一篇
oss教程