vue はマルチフォーム検証に Promise.all を使用します

序文

• プロジェクトの開発では、必ずフォーム検証が行われます。プロジェクトのインターフェイス上に多くのフォームがある場合、フォームを検証するために各フォームを記述する必要があります。繰り返しコードが肥大化して見えます。ここでは、次のメソッドを使用します。この問題を解決してくださいPromise.all()。

Promise.all()方法

• Promise.all()メソッドは、非同期操作を並行して実行し、すべての非同期操作が実行された後にのみコールバックを実行する機能を提供します。Promise複数のインスタンスを新しいPromiseインスタンスにパッケージ化できる

複数のフォーム検証を実装する

• まず検証メソッドを記述し、次にコールバック関数Promise.allを介して検証する必要があるフォーム ループをthenそのメソッドに組み込み、その中で実行する必要がある操作を記述する必要があります。

const formName = [form1, form2, form3, form4]

//创建一个验证方法
const validates = (item) => {
    
    
  return new Promise((resolve, reject) => {
    
    
    if (!this.$refs[item]) {
    
    
      resolve()
      return false
    }
    this.$refs[item].validate((valid) => {
    
    
      if (valid) {
    
    
        resolve()
      } else {
    
    
        reject()
      }
    })
  })
}

//将验证方法放入promise.all
Promise.all(formName.map((item) => validates(item)))
.then((=>{
    
    
  console.log('验证成功');
}))
.catch((=>{
    
    
  console.log('验证失败');
}))

• フォーム検証のリセットも同様の操作で、validatesメソッドをリセットメソッドに変更するだけですresetFields。