element el-form如何避免打开模态框时就进行表单验证

最新推荐文章于 2023-11-21 10:55:35 发布
最新推荐文章于 2023-11-21 10:55:35 发布
阅读量6.8k 收藏 3
点赞数 5
文章标签： element el-form避免打开模态框就进行验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37471721/article/details/98869106
版权

在项目中，经常需要一些校验字段名是否存在的表单验证，比如新增修改用户时需要校验所填写的用户名是否已存在，避免出现重复的用户名。
问题描述
最近遇到一个奇怪的问题，在打开修改模态框未做任何修改时，就自动触发了一次校验，提示用户名已存在或者刚打开新增模态框未进行任何操作，就自动进行了校验，提示各个字段不能为空。

解决办法
通过查看element文档，发现el-form有一个属性
在这里插入图片描述
在这里插入图片描述
设置此属性之后就解决上述问题，希望我的问题记录能帮到你哟！

孟孟~
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
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表单验证踩坑
weixin_46847662的博客
03-02 337
今天在写项目时遇到一个问题：每次打开模态框操作之后再次打开模态框有时候会出现表单验证没有重置的情况（在模态框的关闭事件里写了表单验证重置） 解决过程：经过多次试验发现每次有验证的都是trigger为change，验证为下拉列表不为空 且都是点击新增打开模态框（点击新增先清空表单），所以问题应该就是新增先清空表单触发了表单验证 解决方法：在点击新增的事件内，在清空表单之后再次重置表单验证就没问题了（这个操作要在表单存在的情况下用，可以将这两个操作放入一个if内，if为判断表单绑定的form是否为空对象，否，则
element ui表单验证坑
m0_37115637的博客
03-18 548
相信很多人的项目都有在使用element ui这套ui框架，因为真的很好用，但是再美好的东西也是存在缺点的，最近我司新开发的就在用这套ui框，其中表单验证占了很大一部分，element ui有自带的表单验证，非常方便我们使用，但是我们通常都会把数据量不大的编辑和新增用同一个表单显示，比如以下这个列表。 新增和编辑都在公用一个表单验证： 在新增或者编辑完前，我们肯定要清空表单来达到我们想...
解决vue element - ui 弹窗打开表单自动校验问题
最新发布
qq_44716001的博客
11-21 814
1 打开弹窗清除自动校验 在data 里面把所有表单字段都定义一下 2 弹窗关闭事件 清除校验。
vue element ui From表单校验 关闭模态框 重新打开 还存在标红校验
奔跑吧代码
11-17 3374
vue element ui From表单校验 关闭模态框 重新打开 重置表单解决标红校验 仅供参考 自我记录. 解决方案① 在关闭模态框是 调用this.$refs.ruleForm.resetFields()重置表单 collectPigeonConfigClose(){ this.collectPigeonConfigVisible = false // this.$nextTick(()=>{ this.$refs.ruleForm.resetF
解决el-form打开弹框时就进行表单验证问题
m0_57997609的博客
01-30 1917
解决el-form打开弹框时就进行表单验证问题
解决el-form一进页面就会触发表单校验问题
weixin_41262185的博客
05-12 3580
进来页面就触发校验，解决方案：设置初始值为空数组即可
element关闭弹窗清除表单验证的方法
前端精髓
04-23 1万+
<template> <div> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @closed="handleClose"> <el-form :model="ruleForm" ...
【element-ui】表单验证 避免模态框打开时就进行表单验证
weixin_46447553的博客
11-16 843
解决打开弹窗时el-form组件自动触发表单验证
element中打开对话框表单验证就已经存在的解决办法
my466879168的博客
03-09 7227
打开对话框表单验证已存在 原因可能是打开对话框的时候会给表单赋值，赋值的时候为空值，这个时候就触发了一次校验，所以打开对话框的时候表单校验就已经存在了 解决办法: 在对话框打开或者关闭的时候使用clearValidate方法移除表单的校验 clearcheck(formName){ if(this.$refs[formName]){ this.$refs[formName].clear...
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element表单一打开就校验的问题解决办法分享
我爱美女S的博客
06-26 6020
表单弹框一打开就校验的问题解决分享
element-ui 表单自动验证问题的解决
热门推荐
qq_36437172的博客
03-04 1万+
element-ui 中的 el-form 组件自带了验证功能，在开发中经常会遇到一些莫名其妙的问题，比如表单一出来就触发了验证等等。在项目中，需要弹出表单框并填入旧数据。然而，我只要拿到旧数据并赋值到表单上时，就会触发el-form的验证，非常恼人。顺着调用栈（下图）我们可以发现是el-form-item组件的一个叫onFieldChange的方法触发了validate。应该是我们每次给表单绑定...
vue使用element表单出现自动验证问题
weixin_61597234的博客
09-30 3492
解决form表单自动验证的问题（没输入任何内容，刚打开表单就出现红色验证信息）
Element Plus 的from表单验证问题--点击取消按钮取消表单验证的blur验证
AiGarry的博客
04-21 3283
对表单中的字段进行验证 <el-dialog :model-value="isShow" top="40px" title="表单" style="margin: 0 auto" @close="isShow= false" > <div style="width: 100%; margin-left: 5%"> <el-form ref="ruleFormRef" :model="
在Vue3中使用element-plus,如何进行el-form的表单验证
04-19
可以使用Vue3中内置的v-model以及element-plus中提供的el-form和el-form-item组件，设置相应的验证规则和提示信息即可。 示例代码如下： ```html <template> <el-form ref="form" :model="formData" :rules="formRules"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElMessage } from 'element-plus'; export default { name: 'FormValidation', setup() { const formData = ref({ username: '', password: '', }); const formRules = ref({ username: [{ required: true, message: '请输入用户名', trigger: 'blur', }], password: [{ required: true, message: '请输入密码', trigger: 'blur', }], }); const submitForm = () => { // 提交表单操作 const form = ref('form'); form.value.validate((valid) => { if (valid) { // 验证通过执行提交操作 ElMessage.success('提交成功'); } else { ElMessage.warning('请填写完整信息'); return false; } }); }; return { formData, formRules, submitForm, }; }, }; </script> ``` 在这个示例中，我们使用了ref来创建响应式对象formData和formRules，formData用于存放表单数据，formRules用于存放表单的验证规则。 el-form组件作为表单容器，通过ref="form"指定参考名称，然后通过:model绑定formData数据模型，用:rules绑定表单验证规则。 el-form-item组件作为表单元素的包裹容器，通过label属性指定标签文字，再使用prop属性命名表单元素的key，与表单验证规则对应。 验证规则定义可包括以下属性： - required：表示是否为必填字段 - message：表示验证不通过时的提示信息 - trigger：表示触发验证的事件，默认为blur 最后，在提交表单时，我们使用validate方法对表单进行验证，需要在回调函数中判断验证结果并作出相应操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值