`
yeluowuhen
  • 浏览: 155742 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Vue防止表单重复提交

 
阅读更多

       在提交表单时按钮点击一次后,为防止重复表单提交,需要将提交按钮置灰。直到处理后台处理完返回为止。这需要操作前端提交button的disabled属性。

 

   <el-button
          v-no-more-click
          type="primary"
          icon="el-icon-circle-check"
          :diabled = "isCommit"
          @click="checkProblemCreate('ruledFormNew')"
          size="small"
          >确定</el-button
 >

 在data定义中

 

 

  data: function () {
    return {
     isCommit: false
  },

 

checkProblemCreate(formName) {
  let _self = this;
  _self.$refs[formName].validate((valid) => {
    if (!valid) {
      _self.$notify.error("表单校验不通过,无法提交");
      return;
    } else {
      _self.saveProblemCreate();
    }
  });
},
saveProblemCreate() {
if(!this.isCommit){
 this.isCommit = true;
 setTimeout(()=>{this.isCommit = false},5000);
 _self.$axiospost("/problem/create", {})}
}

 

分享到:
评论

相关推荐

    防止Layui form表单重复提交的实现方法

    下面详细解释几种防止Layui表单重复提交的方法。 首先,在HTML表单中,为了避免在提交时页面刷新导致的重复提交,可以在标签中使用onsubmit="return false;"属性。这个属性的作用是在表单提交时返回false,阻止...

    element-ui如何防止重复提交的方法步骤

    在IT行业中,尤其是在前端开发领域,防止用户重复提交是一项重要的任务,这有助于避免因网络延迟或用户误操作导致的数据混乱。Element-UI,一个流行的Vue.js组件库,提供了多种方式来处理这个问题。以下是如何在使用...

    自定义标签防止表单重复提交

    在Web开发中,表单重复提交是一个常见的问题,可能导致数据不一致或服务器资源浪费。本文将深入探讨如何通过自定义标签来防止表单的重复提交,以确保数据的一致性和系统的稳定性。 首先,理解表单重复提交的问题。...

    防止用户重复提交表单的方法和组件.rar

    好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”,其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。

    解决vue 按钮多次点击重复提交数据问题

    在 Vue 项目中,按钮多次点击重复提交数据问题是一个常见的问题,本文将通过实例结合的形式详细介绍解决该问题的方法。 问题描述 在 Vue 项目中,我们经常会遇到按钮多次点击重复提交数据的问题。这是因为用户可以...

    JavaScript防止表单重复提交代码,指定时间内禁止重复点击.zip

    在Web开发中,防止表单重复提交是一个常见的需求,特别是在涉及关键操作如用户登录、支付等场景下。JavaScript作为客户端脚本语言,可以用来实现这一功能,以避免用户无意或恶意地连续点击提交按钮,导致服务器接收...

    【原创】jSubmitLoading防止重复提交 v1.0

    作用是禁用提交按钮,防止表单重复提交 1、禁用/启用按钮 $("#btnSub").subLoading({enabled:false}) $("#btnSub").subLoading({enabled:true}) 2、禁用后定时启用 $("#btnSub").subLoading({enabled:false,timeout:...

    关于vue表单提交防双/多击的例子

    为了解决这个问题,我们可以实现一个防止表单提交双击或多击的机制。本篇文章将介绍如何在Vue.js中创建这样一个功能。 首先,我们需要理解出现这个需求的场景。在实际应用中,用户在点击提交按钮后,通常会有一个...

    带验证的分步式注册表单

    3. 提升用户满意度:及时的反馈(如错误提示)让用户知道哪里出错,避免重复提交,提升用户体验。 三、分步式表单的技术实现 1. HTML结构:每个步骤用一个`&lt;form&gt;`标签封装,通过CSS和JavaScript控制显示与隐藏。 ...

    vue-hook-form使用详解

    - **防止多次提交**:在全局 `onSubmit` 钩子中,可以通过设置 `request.vm.disabled = true` 来禁用表单,待 AJAX 请求完成后恢复,以防止重复提交。 Vue-Hook-Form 作为 Vue.js 1.x 的辅助工具,它使得表单处理...

    vue倒计时刷新页面不会从头开始的解决方法

    在使用Vue框架开发Web应用时,倒计时功能是一个常见的需求,它可以在一定时间内重复执行某些操作,比如防止用户重复提交表单、限制投票次数、实现验证码获取等功能。然而,在实现倒计时功能时,常常会遇到一个问题:...

    VUE---常用工具类下载(表单验证、防抖、格式化时间等等)

    这些工具能够帮助我们在表单提交前检查数据,显示错误提示,并提供友好的用户体验。 2. **防抖(debounce)**: 防抖技术常用于事件处理,尤其是输入事件,例如搜索框的实时搜索。防抖函数能确保在用户停止操作一段...

    重复造轮子,表单验证

    这个过程确保了用户输入的数据符合预定的格式和规则,从而减少服务器端的处理负担,提升用户体验,防止无效或恶意的数据提交。 首先,让我们理解为什么这被称为“重复造轮子”。在软件开发中,"重复造轮子"指的是...

    vue element自定义表单验证请求后端接口验证

    在Vue.js框架中,尤其是使用Element UI库进行前端...通过这种方式,我们可以确保表单数据的准确性和唯一性,提高用户体验,避免因无效数据提交导致的问题。同时,这种方法也便于扩展,适应不同业务场景下的验证需求。

    Vue实验一源代码:登陆界面

    6. **表单提交与防止重复提交**: - 通过监听`submit`事件并调用`event.preventDefault()`来阻止表单的默认提交行为,然后自定义处理登录请求。 - 可以设置一个标志位来避免用户快速点击导致的重复提交。 7. **...

    漂亮的表单UI.rar

    这包括但不限于:表单字段的焦点状态、输入验证反馈、提交按钮的禁用逻辑(防止重复提交)、以及加载和错误状态的显示。通过JavaScript或者Vue、React、Angular等前端框架,可以实现这些动态效果和逻辑控制。 "漂亮...

    根据配置动态生成有验证的表单

    表单验证通常在用户提交表单前检查输入的数据,防止无效或恶意的数据进入系统。在JavaScript开发中,这可以通过在前端实现,避免不必要的服务器负载和提升用户体验。iview的Form组件支持表单验证,允许开发者定义...

    若依RuoYi框架剖析笔记,该笔记是在学习江南一点雨所录课程再结合自己的理解所写

    7、**幂等性处理**:防止表单重复提交是幂等性的一个应用场景,通过令牌机制或唯一标识确保同一操作多次执行结果相同。 8、**数据权限**:RuoYi提供了基于角色的数据权限控制,可以限制用户访问特定数据。 9、**...

Global site tag (gtag.js) - Google Analytics