VUE+elementUI步骤表单验证坑

最新推荐文章于 2023-12-23 11:40:46 发布
最新推荐文章于 2023-12-23 11:40:46 发布
阅读量1.6k 收藏 3
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangJinPing_/article/details/105115624
版权

问题：如图所示，在步骤表单中我设置了两个表单并都做了校验，但当我在第一个表单输入时出现的校验信息，填写正确后点击下一步后，在第二个表单却也出现上一步的校验信息；

解决办法：Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需在第二个表单的“el-form”标签添加一个具有唯一值的 “key” 属性即可

附上代码

前端愤怒的菜鸟
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
vue+element-ui简单的自定义表单验证步骤
weixin_47746653的博客
09-03 431
vue+element-ui简单的自定义表单验证步骤
element-ui表单_每日UI挑战强加-登录表单（分步教程）
weixin_26732881的博客
08-05 839
element-ui表单A step by step journey to create a good design from the daily UI challenge 一步步走，从日常的UI挑战中创建出色的设计 内容 (Content) Introduction 介绍 Result demo 结果演示 Prerequisite 先决条件 Step by step guide 逐步指南 C...
【Vue新手必看】ElementUI表单实战教程，轻松掌握！
最新发布
weixin_64051447的博客
12-23 1391
自定义规则对象的编写形式data() {rules // 这里会得到定义的校验对象的属性if(!// 如果要提示错误信息，那么通过第三个参数回调出去，参数值为Error实例callback(new Error('请输入数值'))return {// 校验规则rules:{u:[{ type: 'url', required: true, message: '必须为规范的url地址', trigger: 'change' },// 添加一条自定义的验证，值为函数名],
elementUI 表单项自定义校验设置必填项required的问题
m0_37406045的博客
01-30 4780
使用elementUI的表单校验有时需要用到默认校验和自定义校验的组合规则，比如下面这种部分表单项需要根据其他非input内容是否为空进行校验。
ElementUI 表单的基本用法
u014265398的博客
05-25 1807
文章目录前言一.基本使用示例1.el-form 容器，通过model绑定数据2.el-form-item 容器，通过label绑定数据标签3.表单组建通过v-model绑定model中的数据官方文档 前言 ElementUI 表单的基本用法 提示：以下是本篇文章正文内容，下面案例可供参考 一.基本使用示例 1.el-form 容器，通过model绑定数据 2.el-form-item 容器，通过label绑定数据标签 3.表单组建通过v-model绑定model中的数据 官方文档 https://el
vue+elementUI实现表单和图片上传及验证功能示例
12-28
本文实例讲述了vue+elementUI实现表单和图片上传及验证功能。分享给大家供大家参考，具体如下： 最终实现需求如下图： form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有： 1、表单...
基于vue + elementUI的管理系统模板
02-22
基于vue + elementUI的管理系统模板
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下
element-ui | 第一次表单验证的结果，在第二次表单验证时仍然存在
前端笔记
05-15 8055
今天来看个问题：第一次表单验证的结果，在第二次表单验证时仍然存在。怎么解决呢？ 解决办法： 在窗口打开时，对该表单项进行重置，将其值重置为初始值并移除校验结果 if (this.$refs.editForm) this.$refs.editForm.resetFields(); 注意！！！！一定要加if (this.$refs.editForm)，因为第一次打开是undefine...
vue+elementUI 复杂表单的验证、数据提交方案问题
10-16
主要介绍了vue+elementUI 复杂表单的验证、数据提交方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
步骤条Demo
09-07
步骤条的示例代码，单独的步骤条的实例以及将步骤条应用到页面上的实例。
在使用elementui的表单验证时，明明输入了字符，却仍然弹出验证错误提示栏
Better_me_1996的博客
06-02 1118
在使用elementui自带的表单验证时需要注意，需验证的表单项el-form-item要添加prop属性，而且表单项prop的名字必须和表单model传入对象的属性名一致，否则表单验证就会报错。
vue+element ui多表单统一验证
weixin_47534571的博客
11-30 722
场景 每个产品对应多个应用,当对产品进行修改的时,可同时修改应用相关参数,从后端接受应用参数集合,每个应用生成动态表单,点击确认按钮,对所有表单进行统一认证,验证成功再将数据保存至数据库; HTML代码 <el-collapse v-if="active === 1" v-model="activeNames" accordion> <div v-for="(application,index) in dialogApplicationList">
vue+elementui 自定义常用校验规则
jwq
12-23 507
vue+elementui 自定义常用校验规则 暂时先发四种，业务亲测有效，会更新的 邮箱校验 var checkEmail = (rule, value, callback) => { const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ if (!value) { return callback(new Error('邮箱不能为空')) }
vue+elementui 表单回车到下一项
小武的博客
10-11 928
util.js中定义方法：nextFocus /** * 表单：回车到下一项 * @param {表单名称} formName * @param {提交方法}} callback */ export function nextFocus(formName, callback) { // 获取到表单的所有input输入框 const inputDoms = document.querySelectorAll(`#${formName} .el-input__inner`); // 遍
vue+elementUi之表单
进一步，有一步的欢喜。
07-23 540
这连天在做vue的组件封装，遇到的一个问题是，公用的模态框组件中的表单需要清空上次的表单验证规则，于是经过大佬的指点，我get到一个技能，特此记录一下，希望大家指正。 export default { data () { return { }; }, watch: { /...
Element-Ui 表格输入框回车进入下一行
weixin_44356010的博客
10-13 800
Element-Ui 表格输入框回车进入下一行 <template slot-scope="scope"> <div id="tab_list"> <el-input type="text" placeholder="" v-model="scope.row.OrderQuantity" @keyup.native.enter="nextFocus($event,scope.$index,scope.row)"
vue+elementUI分步表单验证问题
liuv587的博客
09-04 6398
   有这样一个表单,内容有十几项,放在一页不太好看,所以用步骤条分开,但是在表单验证的时候出了问题.问题如下:    第一步,填写表单,点击下一步,没有问题,来到了第二步,结果如下    结果表单验证结果直接出来了.这里的trigger设置为'change',只有input中内容发生改变之后才会触发表单验证. 这说明表单内容被改过,可是我根本没有手动改过,问题出在哪里? 猜想: V...
elementui的表单验证
09-11
Element UI 提供了一套简单易用的表单验证功能。你可以使用 Element UI 提供的验证规则对表单进行...以上就是使用 Element UI 进行表单验证的基本步骤，你可以根据自己的需求定义更多的验证规则和定制错误提示信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值