element-ui中form驗證雜記

最近接觸的商戶後臺項目居多，天然而然就涉及到了大量的表單驗證，
也就對一些經常使用的el-form表單驗證和問題進行下梳理。

當咱們添加required驗證後，輸入一些數據後再刪除完時，會出現 xxx is required，以下圖所示

你可能很納悶，已經爲form表單傳入了rules了啊，在不所有刪除時，驗證規則都沒問題。這個問題是由於在html中使用了required字段，而在rules的規則沒有設置required爲true，

// html
<el-form-item label="角色名稱" required prop="roleName">
  <el-input v-model="params.roleName"></el-input>   
</el-form-item>

// js
{ trigger: 'blur', message: '角色名稱爲必填項' }

這種狀況下就會爲輸入框添加一條默認驗證規則，就致使了上面圖片狀況的發生。
爲了解決這種狀況，咱們只須要把卸載html裏的required去除，並把他移動到rules的規則之中便可。

// js
{ required: true, trigger: 'blur', message: '角色名稱爲必填項' }

級聯提交表單驗證

對於一些複雜的表單，咱們常常會遇到在提交前須要驗證多個表單的狀況。
因爲element的最後validate方法是異步的。
若是每一個表單都是相互獨立的話，咱們不必同步的去驗證全部的表單。

所以能夠將每一個獨立的表單封裝成Promise，再使用Promise.all進行回調處理。
能夠參考下面使用了async/await的vue代碼。

// 進行異步表單驗證
async validateData () {
  this.formValidatePromiseArr = []
  this.formList.map((form, index) => {
    this.validateEachForm(form, `form${index}`)
  })
  // 若是沒有所有驗證成功，則進入捕獲的錯誤處理
  try {
    await Promise.all(this.formValidatePromiseArr)
    console.log('finish')
    this.next()
  } catch (error) {
    console.log(error)
  }
},
// 校驗每一個獨立表單數據
validateEachForm (form, name) {
  let formResult = new Promise((resolve, reject) => {
    // 利用ref取到要驗證的表單
    this.$refs[name][0].validate((valid) => {
      if (valid) {
        resolve()
      } else {
        console.log(`${name}的數據不完整`)
        reject()
      }
    })
  })
  this.formValidatePromiseArr.push(formResult)
}

嵌套屬性校驗

對於複雜表單，咱們不免須要進行更深層級的驗證。
對於明確知道要驗證的嵌套屬性，能夠在rules對象定義時，使用字符串形式指定要驗證的屬性，同事在prop綁定相應值。

// html
<el-form-item label="年齡信息" prop="info.age">
  <el-input v-model="form.info.age"></el-input>   
</el-form-item>

// js
rules: {
  name: [{required: true, trigger: 'blur', message: 'required'}],
  'info.age': [{required: true, trigger: 'blur', message: 'required'}]
},

對於在循環之中動態綁定的屬性，則須要進行動態的prop綁定(必須是字符串形式的屬性取值)，再綁定指定的rules，例如

// html
<div v-for="info in form.infoList">
  <el-form-item label="年齡信息" :prop="`infoList[${index}].age`" :rules="rules.age">
    <el-input v-model="info.age"></el-input>   
  </el-form-item>
</div>

// js
rules: {
  age: [{required: true, trigger: 'blur', message: 'required'}]
},

這樣就能順利的綁定上咱們須要的驗證規則。