iview中的form表單進行多層嵌套對象的校驗

iview的form表單校驗

iview是常用的vue的ui組件，其中實現了許多的功能，其中一個最常用的還是表單功能，iview自帶了表單的校驗功能，在保存的時候通過調用validate方法就可以進行表達校驗。

• 將form中綁定的值放在model上面，將每個需要進行校驗的規則寫在rules中
• 在form-item的prop上寫上相應的鍵值
• 在需要校驗的時候調用validate方法進行規則校驗

 <Form ref="formValidate" :model="model" :rules="rules" :label-width="80">
        <FormItem label="Name" prop="name">
            <Input v-model="model.name" placeholder="Enter your name"></Input>
        </FormItem>
        // 多層對象的校驗，prop中是model裏面的所有層級直到最裏層
        <FormItem label="Name" prop="user.tel">
            <Input v-model="model.user.tel" placeholder="Enter your name"></Input>
        </FormItem>
 </form>
 // 校驗規則
 rules:{
    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'}],
}