提供一种嵌套表单的校验姿势

一、表单校验

表单校验，前端经常遇到的校验场景，可以说，只要有表单的地方基本都少不了。工作中有时还会遇到表单嵌套表单的场景，那这种场景下怎么去校验表单，使得用户拥有很好的体验。

• 以前的方式：一层一层的校验，先校验最外面一层，然后再校验最里面的一层，不是不行，就是视觉体验上有点拉跨
• 最近灵感：使用Promise.all的方式，将嵌套的表单，全部整成Promise对象，然后全部执行，返回结果，搭配数组的includes方法，判断是否含有false即可。

1. 代码演示

• 封装成一个校验方法

  validateAll(){
    const project = new Promise((resolve) => {
      this.$refs['project-form'].validate((valid) => {
        resolve(valid)
      })
    })
    const build = new Promise((resolve) => {
      this.$refs['build-form'].validate((valid) => {
        resolve(valid)
      })
    })
    const invitation = new Promise((resolve) => {
      this.$refs['invitation-form'].validate((valid) => {
        resolve(valid)
      })
    })
    return Promise.all([project, build, invitation])
  }
  

• 业务逻辑方法中调用逻辑

  investmentSubmit() {
    this.validateAll().then(valid => {
      if (!valid.includes(false)) {
        // 处理业务逻辑
      }
    })
  },