首页 > 其他分享 >validate方法进行表单异步校验时,回调函数内部避免使用全局变量

validate方法进行表单异步校验时,回调函数内部避免使用全局变量

时间:2024-06-05 17:48:53浏览次数:18  
标签:回调 indexName indexCode pos 表单 校验 validate 全局变量

对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise

问题代码:

save(){
        console.log(that.pos.indexName)
        console.log(that.pos.indexCode)
        this.$refs['from'].validate((valid) => {
          if (valid) {
            debugger
            that.pos.indexName = that.pos.indexName + "_" +that.pos.indexNum;
            that.pos.indexCode = that.pos.indexCode + String(that.pos.indexNum).padStart(4, '0');
            var pos = Object.assign({},that.pos);
            console.log(pos)
            this.$emit("loadLines",pos);
            this.closeDialog();
          }
        })
      },

情景再现:save方法中,第一行和第二行代码都有值,但是在回调方法内部,that.pos.indexName和that.pos.indexCode的确没有值。后来才得知由于validate方法是异步的,回调函数内部如果使用全局变量,一旦其他地方修改了全局变量,that.pos.indexName和that.pos.indexCode的值也会被修改。

没想到后面的closeDialog方法确实修改了全局变量that.pos.indexName和that.pos.indexCode,如下所示:

resetTemp() {
        this.pos.indexName = "";
        this.pos.indexCode = null;
      },
closeDialog() {
        this.resetTemp()
        this.$nextTick(() => {
          this.$refs['from'].clearValidate();
          this.dialogFormVisible = false;
        })
      }

正是由于closeDialog方法对全局变量that.pos.indexName和that.pos.indexCode进行了置空,导致我认为回调函数内没有值。

正确的做法是回调函数内使用局部变量,而不是全局变量,即使发生其他地方修改全局变量的情况,也不会影响到回调函数内的值。

save(){
        let indexName = that.pos.indexName
        let indexCode = that.pos.indexCode
        this.$refs['from'].validate((valid) => {
          if (valid) {
            that.pos.indexName = indexName + "_" +that.pos.indexNum;
            that.pos.indexCode = indexCode + String(that.pos.indexNum).padStart(4, '0');
            var pos = Object.assign({},that.pos);
            this.$emit("loadLines",pos);
            this.closeDialog();
          }
        })
      },

 

标签:回调,indexName,indexCode,pos,表单,校验,validate,全局变量
From: https://www.cnblogs.com/zwh0910/p/18233457

相关文章

  • 数据库初识、介绍、SQL语句的由来(库、表、记录表头、表单)、SQL语句基础(注释以及修
    【一】数据库初识【1】文件存储(1)基于内存保存一开始做员工系统是基于列表或字典(内存)来存储数据(2)文件操作在Python指令中学习文件操作,将一些数据都保存到了本地的文本文件中。因为先前学习了如何搭建TCP的客户端和服务端并且在这之中TCP服务端作为存储服务,TCP客户......
  • 实现流程化办公,可以相信拖拽表单设计器!
    当前,竞争压力越来越大,利用什么样优良的办公软件实现流程化办公?可以一起来了解低代码技术平台、拖拽表单设计器的优势特点,看看它们是如何助力企业降本、增效、提质的。低代码技术平台的优势特点多,可以助力企业用拖拽式搭积木的方式实现各种应用场景的定制,因此,深得大家的喜爱与支持......
  • HTML20_HTML表单标签4
    一、概念用于采集用户输入的数据的。用于和服务器进行交互。二、form标签用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围1、form属性:action:指定提交数据的URLmethod:指定提交方式......
  • 使用form-create时修改表单数据
    FormCreate是一个可以通过JSON生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何Vue组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定FormCreate官网:https://www.form-create.com帮助文档:https://form-create.c......
  • vue 动态表单
    一、动态表单数据集1、原始数据集varjson="[{\"key\":\"id\",\"text\":\"id\"},{\"key\":\"name\",\"text\":\"姓名\"},{......
  • 使用form-create生成表单组件
    FormCreate是一个可以通过JSON生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何Vue组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定FormCreate官网:https://www.form-create.com帮助文档:https://form-create.c......
  • 微信小程序开发中的表单验证与数据提交
    表单验证和数据提交在微信小程序开发中是非常常见的功能。表单验证用于确保用户输入的数据符合指定的格式要求,数据提交用于将用户输入的数据发送到服务器端进行处理。下面是一个示例,演示了如何在微信小程序中进行表单验证和数据提交。首先,让我们创建一个简单的表单,包含用户名......
  • 嵌入式开发中广泛采用全局变量的考虑
    嵌入式开发中广泛采用全局变量的考虑2024-06-0210:26:57星期日在知乎上看到这个问题,C语言开发单片机为什么大多数都采用全局变量的形式?,才发觉在嵌入式开发中,使用全局变量的广泛程度远远高于纯软开发。在最近半年的TICC2530Zigbee开发和在实习单位的开发工作过程中,对全局变量......
  • HTML+CSS+JS 熊猫登录表单
    效果演示实现了一个可爱的熊猫登录界面,页面背景使用了渐变色,熊猫的头部和身体使用了圆形和椭圆形的边框,使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局,包括用户名和密码的输入框和登录按钮,使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个......
  • 开源表单流程设计器有哪几个突出的优势特点?
    当前,传统的表单制作已经无法满足现在企业的发展需求了。想要实现高效率发展,需要引进先进的低代码技术平台、开源表单流程设计器等优秀软件平台助力发展。它们具有可视化操作界面、灵活好操作、易维护、效率高等诸多优势特点,在推动企业实现流程化发展的过程中应用价值高,一起来看看......