vue elementUI 表單校驗（多層嵌套）

嵌套對象的校驗

項目中使用的vue+elementUI進行開發，已經用了有一段時間了，感受表單校驗是每個前端開發人員都避免不了的需求。在一些前端能夠自行校驗的狀況下，先經過前端校驗，校驗不經過不發送請求，直到知足校驗規則，再發送請求給後端，從而提高用戶體驗。

elementUI對錶單的校驗有本身的方法，要求傳入model的必須爲一個對象。但若是數據結構比較複雜，對象裏面又嵌套對象，該如何校驗？本文給出多層對象嵌套的方法。

example

```html
<template>
  <el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
        <el-form-item prop="name" label="姓名">
            <el-input v-model="formData.name" ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密碼">
          <el-input v-model="formData.password" ></el-input>
        </el-form-item>
        <el-form-item prop="user.tel" label="手機號" >
          <el-input v-model="formData.user.tel" ></el-input>
        </el-form-item>
        <el-form-item prop="phones[0].model" label="手機號">
          <el-input v-model="formData.phones[0].model"></el-input>
        </el-form-item>
        <el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
         required: true, message: 'model不能爲空', trigger: 'blur'
         }">
            <el-input v-model="phone.model"></el-input>
            <el-form :model="formData.phones[index]" label-width="100px">
                 <el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 +  '.data1'" label="data1" :rules="{
                 required: true, message: 'data1不能爲空', trigger: 'blur'
                 }">
                     <el-input v-model="item.data1"></el-input>
                 </el-form-item>
           </el-form>
        </el-form-item>
    </el-form>
    <el-button @click="handleSubmit">提交</el-button>    
</template>

```
```javascript
data () {
    return {
      formData:{
          name: '',
          password: '',
          user: {
              tel: ''
          },
           phones: [
              { brand: "華爲", model: "", arr: [{ data1: "" }] },
              { brand: "小米", model: "", arr: [{ data1: "" }] }
          ] 
      },
      formRule:{
        name: [{required: true, message: '不能爲空', trigger: 'blur'},
                {pattern: /^[\u4E00-\u9FA5]+$/, message: '用戶名只能爲中文', trigger: 'blur'}],
        password: [{required: true, message: '不能爲空', trigger: 'blur'},
          {validator: Verify.validatePassword, trigger: 'blur'},
        ],
        'user.tel' : [{required: true, message: '手機號碼不能爲空', trigger: 'blur'}],
        'phones[0].model': [{required: true, message: 'model不能爲空', trigger: 'blur'}],
      },
    }
  },

methods: {
    handleSubmit(){
        const t = this;
        t.$refs['formData'].validate((valid) => {
            if(valid){
              console.log(this.formData);
            }
        })
    }
  }
```
複製代碼

校驗方法

model綁定的formData中內層user也是一個對象，如今想要對tel進行校驗，在prop中傳遞user.tel，而且在rules中也要指定user.tel便可。

對於子對象裏面又嵌套數組的數據結構，若是想校驗數組裏的元素，須要在寫一層form，用子對象做爲新form表單再從新走一遍流程便可，具體例子請看上面的代碼

對於驗證規則，能夠經過pattern或者validator來實現，pattern裏面能夠直接寫正則表達式，不知道爲啥文檔中沒有提到這點。以前的驗證通常都是經過validator來實現的，驗證方法單獨寫在一個文件中，這樣能夠作到整個項目公用，用到時只需經過import引一下便可。

校驗效果