vue中多个子组件form表单的校验可以使用Promise.all

最新推荐文章于 2024-05-07 01:53:44 发布

小智玩前端

最新推荐文章于 2024-05-07 01:53:44 发布

阅读量2.4k

点赞数 3

文章标签： vue.js javascript typescript

本文链接：https://blog.csdn.net/m0_50441807/article/details/125493622

版权

当父组件中有多个子组件的form表单都需要校验，父组件点击提交按钮，应该触发每个子组件中的校验方法，等所有的子组件都校验通过，才能提交；
如果每个子组件的校验方法中返回的是Promise，那么父组件则可以使用Promise.all来统一做判断，只有所有的子组件中的Promise都通过，才能提交；
先看看Promise.all方法的使用：

let p1 = new Promise((resolve, reject) => {
  resolve(1)
})
let p2 = new Promise((resolve, reject) => {
  resolve(2)
})
Promise.all([p1, p2]).then(res => {
  console.log("111", res);  // 打印出的是[1,2]
}).catch(error => {
  console.log(error);
})

all方法的参数是一个数组，数组里面放promise对象，只有当数组里面的promise都通过了，才会执行all的then方法，这样就可以对所有的子组件的promise做校验的判断了；
下面看个例子：

<body>
  <div>
    <span>姓名：</span>
    <input type="text" id="ipt1">
  </div>
  <div>
    <span>年龄：</span>
    <input type="text" id="ipt2">
  </div>
  <button onclick="save()">提交</button>
</body>
<script>
  const ipt1 = document.getElementById('ipt1')
  const ipt2 = document.getElementById('ipt2')

  // 假设这是子组件1中定义的方法
  function validate1() {
    return new Promise((resolve, reject) => {
      if (ipt1.value) {
        resolve(true)
      } else {
        console.log(ipt1.value);
        reject(false)
      }
    })
  }

  // 假设这是子组件2中定义的方法
  function validate2() {
    return new Promise((resolve, reject) => {
      if (ipt2.value) {
        resolve(true)
      } else {
        console.log(ipt2.value);
        reject(false)
      }
    })
  }

  // 假设这是父组件中的提交方法
  function save() {
    const p1 = validate1()  // 子组件1中的promise
    const p2 = validate2()  // 子组件2中的promise
    Promise.all([p1, p2]).then((res) => {
      alert('验证通过！')
    }).catch(error => {
      alert('验证不通过！')
    })
  }
</script>

小智玩前端

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue中多个子组件form表单的校验可以使用Promise.all

当父组件中有多个子组件的form表单都需要校验，父组件点击按钮，应该触发每个子组件中的校验方法，等所有的子组件都校验通过，才能提交；如果每个子组件的校验方法中返回的是，那么父组件则可以使用来统一做判断，只有所有的子组件中的Promise都通过，才能提交；先看看Promise.all方法的使用：all方法的参数是一个数组，数组里面放promise对象，只有当数组里面的promise都通过了，才会执行all的then方法，这样就可以对所有的子组件的promise做校验的判断了；下面看个例子：...
复制链接

扫一扫