element中async-validator異步請求驗證怎么使用

本文小編為大家詳細介紹“element中async-validator異步請求驗證怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“element中async-validator異步請求驗證怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

異步請求驗證

Attention： asyncValidator 是1.11.0 才支持的，而我下文的結論源于我自己使用了1.8.0 的版本，故而失敗。

// PROMISE USAGE
validator.validate({
  name: "muji",
  asyncValidator: (rule, value) => axios.post('/nameValidator', { name: value }),
}, (errors, fields) => {
  if(errors) {
    // validation failed, errors is an array of all errors
    // fields is an object keyed by field name with an array of
    // errors per field
    return handleErrors(errors, fields);
  }
  // validation passed
})
  .then(() => {
    // validation passed
  })
  .catch(({ errors, fields }) => {
    return handleErrors(errors, fields);
  })

如上readme 中一直說使用asyncValidator, 所以一直以為接收asyncValidator作為關鍵字，結果試了很久就是不行。其實還是使用validator關鍵字就行。具體使用如下就行…

使用定義

validatorFieldRule: [
          { required:true, validator: checkEmpty, trigger: "change"} ]

驗證規則定義

var checkEmpty= (rule, value, callback) => {
      axios.get('/api/file').then( res => {
          callback();
      })
      .catch( err => {
          callback(err);
      })
    };

讀到這里，這篇“element中async-validator異步請求驗證怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。