【Element】el-form表单初始化，校验就报红提示

最新推荐文章于 2024-02-07 17:22:21 发布
最新推荐文章于 2024-02-07 17:22:21 发布
阅读量2.6k 收藏 2
点赞数
文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43951592/article/details/126642553
版权

一个弹窗里面的表单，每次点开来就报红
就算加上 :validate-on-rule-change=“false” 也不能完全解决

解决方法：
在el-form里加一个key，每次初始化 key = key + 1

har01d
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Element】el-form表单初始化，一进页面就校验就报红提示
qq_21048115的博客
08-17 1713
网上查阅的资料说加上:validate-on-rule-change=“false”就行，但我这边还是不能解决问题。在el-form里加一个key，每次初始化key++新开的一个单页面，一进入就会有几个校验标红。
elementUI的表单错误项在加载页面后自动标红并提示+自动定位到表单项的实现
商务合作 / 项目定制开发 / 前端一对一培训、答疑
02-07 1198
所以需要分两步做，先来判断是否有异常项，因为后端返回的数据是树状结构，会有多层级，我需要遍历递归数组的每一个节点对象是否有。的方法了，这里的问题就在于可能会有多个标红字段，那么只需要自动定位到第一个就行。弹框，询问用户是否需要自动定位，如果需要，则自动定位到第一处异常的表单控件这。表单控件，所以第一件事就是去该表单的文档页查看是否有加载页面就校验的方法。2、弹出框提示，询问用户是否自动定位到异常处，如果选择是，则自动滑动页面。属性给的，只要该属性的值不是""，就会自动显示红色的框。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
el-form-design 一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-form-design # 2. 导入 import elformdesign from 'el-form-design' # 因为是基于 element ui 的 所以可能需要用户提前安装 element ui 并全部导入 Vue.use(ElementUI); Vue.use(elformdesign); # 3 使用 # 直接在页面中 使用 标签 即可展示出 表单编辑页面 示列代码 (表单设计页面) <di
element ui 红点_element-ui的表单验证配合其他组件使用（wangEditor），显示出element表单验证的必填小红点...
weixin_39580041的博客
12-22 1304
在使用element-ui开发的时候，总感觉element-ui的组件不够用，这个时候总会需要配合其他的单独的组件来使用。这一次我就用到了富文本，然而element-ui中并没有富文本组件，而且是用在表单中，需要进行表单验证(就是简单的验证是否为空)。wangEditor安装、引入以及创建编辑器安装wangeditornpm install wangeditor引入、创建编辑器import Edi...
element-ui表单初始化校验报红
qq_45256497的博客
09-07 2453
在开发中，我们经常会遇到element-ui表单回显，初始化页面就报红的情况。在回显赋值的时候，加上以下代码就好啦。
elment-ui表单初始化校验报红提示
weixin_45536426的博客
11-22 906
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片
element - - - - - form表单rules初始化校验飙红？
Dark_programmer的博客
03-13 1516
element - - - - - form表单rules初始化校验飙红？
vue+element表单验证，初始化页面就显示验证错误
hhhppj的博客
10-15 3727
vue+element表单验证，初始化页面就显示验证错误 打开页面就显现验证错误，特别是当打开过页面，再关闭，再打开的时候，就显示验证错误。 这个问题在element-ui中已经给出了答案，我当时并没有注意到： 在关闭或提交表单时，一定要记得移除该表单项的校验结果。 完整代码如下： html代码： <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-butto
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
element-ui 表单自动验证问题的解决
热门推荐
胡萧徒的博客
07-28 1万+
element-ui 中的 el-form 组件自带了验证功能.当 表单初始化后,每次 赋值或进行 相应操作.就会触发 表单自动验证 在开发中,有一个不太友好的问题,就是 打开表单后,再打开 就会触发自动校验,报一片红. 目前有两种方案应对: 1. 是 使用 v-if 控制表单,这样 第二次点开后 表单 无值,也不会触发表单自动校验. 缺点 是 v-if 太消耗性能,频繁使用 会导致...
el-form的表单验证，有值却报红！
niTaoTaoa的博客
08-29 808
正确的写法是 el-form中的form用 :model绑定，各个输入项用 v-model绑定值。
页面触发表单校验
m0_47733490的博客
10-23 469
先给元素绑定ref节点 事件触发的时候，将ref节点用.validate方法校验，然后根据状态判断
el-form表单初始化赋值表单dataForm，，校验有问题，校验必填的也校验成功了
m0_59157023的博客
02-21 919
el-form表单初始化赋值表单dataForm，，校验有问题，校验必填的也校验成功了
vue element ui From表单校验 关闭模态框 重新打开 还存在标红校验
奔跑吧代码
11-17 3377
vue element ui From表单校验 关闭模态框 重新打开 重置表单解决标红校验 仅供参考 自我记录. 解决方案① 在关闭模态框是 调用this.$refs.ruleForm.resetFields()重置表单 collectPigeonConfigClose(){ this.collectPigeonConfigVisible = false // this.$nextTick(()=>{ this.$refs.ruleForm.resetF
element ui 表单确认提示红色，取消提示方法
宁夏前端工程师，马卫斌，wx：1457508895
01-29 1770
element ui 表单确认提示红色，取消提示方法
ElementUI form校验填入了数据仍红色提示输入
TarkuNi的博客
05-25 1283
如下图，经纬度明明有值了，点击确定提交仍然会提示经纬度缺失，我甚至在点击确定按钮的方法里打印form绑定数据（:model="editData"），打印的数据中经纬度绑定的数据也是有的，比较特别的是我的经纬度是我点击地图自动带出来的，不是手输的，查了好久都解决不了，直到一个大神提示说，是不是新增时，父组件传过来的参数即form绑定的editData没有经纬度绑定的lat和lng？
el-form 表单校验 不要在el-form-item下显示
最新发布
03-21
el-form 是 Element UI 提供的表单组件，用于快构建表单界面。el-form 表单校验是指对表单中的输入内容进行验证，确保用户输入的数据符合预期的格式和要求。 在 el-form 中进行表单校验时，可以通过设置 rules 属性来定义校验规则。每个表单项（el-form-item）可以设置 prop 属性来指定校验规则所对应的字段名。校验规则可以是一个数组，每个规则对象包含 validator 和 message 两个属性，validator 是一个函数，用于自定义校验逻辑，message 是校验失败时显示的错误提示信息。 以下是 el-form 表单校验的示例代码： ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符之间', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过，提交表单 // TODO: 提交表单的逻辑 } else { // 表单校验不通过，显示错误信息 return false; } }); } } }; </script> ``` 在上述示例中，通过设置 rules 属性来定义了两个校验规则，分别对应用户名和密码字段。在 submitForm 方法中，通过调用 this.$refs.form.validate 方法来触发表单校验，校验结果会通过回调函数的参数 valid 返回，如果 valid 为 true，则表示表单校验通过，可以提交表单；如果 valid 为 false，则表示表单校验不通过，需要显示错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值