多表单验证，清空

最新推荐文章于 2024-05-20 15:17:08 发布

秦悸

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量227

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/GikQxx21_wen/article/details/129689913

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.应用场景：当需要使用到多个form表单；每个form绑的ref值不同；可以理解为这个ref是这个form的id。
2.校验方法：this.$refs[“form”].validate,这个是element ui框架里面自带的校验方法；
使用ES6的新特性，promise；promise其实就是一个构造函数

代码如下

data() {
  return {
    form:{},
    form2:{}
  }
}

onSubmit() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs['form'].validate(valid => {
          if (valid) {
            resolve()
          }
        })
      })

      const p2 = new Promise((resolve, reject) => {
        this.$refs['form2'].validate(valid => {
          if (valid) {
            resolve()
          }
        })
      })

      const p3 = new Promise((resolve, reject) => {
        this.$refs['form1'].validate(valid => {
          if (valid) {
            resolve()
          }
        })
      })

      Promise.all([p1, p2, p3]).then(() => {
        // 表单验证通过，写业务代码
        const obj1 = {
          isMaster: this.form.isMaster,
          ipCommand: this.form.ipCommand,
          agentPort: this.form.agentPort,
          rootName: this.form.rootName,
          rootPassword: this.form.rootPassword,
          deviceName: this.form.deviceName,
          ipData: this.form.ipData,
          currentPort: this.form.currentPort,
          sshPort: this.form.sshPort,
          groupName: this.form.groupName
        }
        const obj = {
          isMaster: this.form2.isMaster,
          ipCommand: this.form2.ipCommand,
          agentPort: this.form2.agentPort,
          rootName: this.form2.rootName,
          rootPassword: this.form2.rootPassword,
          deviceName: this.form2.deviceName,
          ipData: this.form2.ipData,
          currentPort: this.form2.currentPort,
          sshPort: this.form2.sshPort,
          groupName: this.form.groupName
        }
        const array = [obj1, obj]
        addVE(array).then(res => {
          console.log(res, '添加')
          if (res.result === '添加设备成功') {
            this.$message({
              type: 'success',
              message: '添加设备成功'
            })
            this.handleClose()
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      })
    },

表单清空

handleClose() {
      const p1 = new Promise((resolve, reject) => {
        if (this.$refs.form) {
          resolve()
        }
      })
      const p2 = new Promise((resolve, reject) => {
        if (this.$refs.form2) {
          resolve()
        }
      })
      const p3 = new Promise((resolve, reject) => {
        if (this.$refs.form1) {
          resolve()
        }
      })
      Promise.all([p1, p2, p3]).then(() => {
        this.$refs['form'].resetFields()
        this.$refs['form2'].resetFields()
        this.$refs['form1'].resetFields()
      })
      this.dialogVisible = false
    },