vue同时检验两个表单后再进行提交

校验两个表单:

首先想到的方法就是 引入两个 flag 来标志两个表单验证成功,思路如下:

submitManual () {
        this.$refs.obscuredForm.validate().then(() => {
          console.log('验证成功')
          this.obscuredFlag = true //表示第一个表单验证成功
        }).catch(err => {
        // 验证失败
          console.log(err, '验证失败')
        })
        this.$refs.occludeForm.validate().then(() => {
          console.log('验证成功')
          this.occludeFlag = true  //表示第二个表单验证成功
        }).catch(err => {
        // 验证失败
          console.log(err, '验证失败')
        })
        if (this.obscuredFlag && this.occludeFlag) {
             //表示两个表单同时验证成功
            //再进行接口请求
        }
}

当然上述的方法不够优雅,此时运用ES6的Promise就可以优雅又简便的解决此问题,代码如下:

Promise.all([this.$refs.obscuredForm.validate(), this.$refs.occludeForm.validate()]).then(() => {
  //表示两个表单同时验证成功  进行接口请求操作
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容