element中async-validator異步請(qǐng)求驗(yàn)證怎么使用

本文小編為大家詳細(xì)介紹“element中async-validator異步請(qǐng)求驗(yàn)證怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“element中async-validator異步請(qǐng)求驗(yàn)證怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

異步請(qǐng)求驗(yàn)證

Attention： asyncValidator 是1.11.0 才支持的，而我下文的結(jié)論源于我自己使用了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作為關(guān)鍵字，結(jié)果試了很久就是不行。其實(shí)還是使用validator關(guān)鍵字就行。具體使用如下就行…

使用定義

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

驗(yàn)證規(guī)則定義

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

讀到這里，這篇“element中async-validator異步請(qǐng)求驗(yàn)證怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。