iview中的form表单进行多层嵌套对象的校验

最新推荐文章于 2024-05-07 10:21:25 发布

原创最新推荐文章于 2024-05-07 10:21:25 发布 · 4.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #iview #表单校验

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在iview框架下利用form表单进行多层嵌套对象的验证。通过将校验规则绑定到model和rules中，并在form-item的prop上设置对应键值，可在保存时调用方法实现表单的自动校验功能。

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