【Vue】iview 表单验证

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