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'}],
}