elementUI 級聯選擇框 表單驗證

今天遇到了一個需求：進行級聯選擇框的表單驗證，忽然有點懵逼。感受應該和正常的表單驗證相似，但不是很清晰，後來仍是在博客園找到了相關參考文章。
先上代碼：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="選擇分類" prop="sorts">
     <el-cascader
       :options="options"
       change-on-select
       filterable
       v-model="ruleForm.sorts"
       clearable></el-cascader>
  </el-form-item>
</el-form>

data() {
  /*表單驗證*/
  ruleForm: {
    sorts: '',
  },
  /*驗證規則*/
  rules: {
    sorts: [
        { type: 'arary', required: true, message: '請選擇分類', trigger: 'change'}
    ],
  }
}

實際上看上面的代碼和表單驗證並沒有太大區別，只是將 el-table-item 裏面的 el-input 標籤換成了 el-cascader，其表單驗證以及規則都是類似的。

須要注意的是：

1. 級聯選擇框驗證規則的觸發事件是 change 事件，當級聯選擇器的內容發生變化時會觸發驗證。

2. 若是驗證沒法生效，首先須要檢查 prop 是否綁定了表單的驗證規則，以及 el-cascader 裏面的 v-model 是否綁定了表單驗證屬性；而後因爲級聯選擇器選中的內容是以數組的形式存在，要注意 設置驗證規則裏面的 type 值爲 array。

參考文章：http://www.javashuo.com/article/p-tofafnai-ng.html