Vue+iview表单验证失效

iview表单验证的步骤：

1. 第一步：给 Form 设置属性 rules :rules
2. 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=" "
3. 第三步：注意：Form标签里面是 :model
4. 第四步：注意：在Form标签里面必须添加 ref,这个作用相当于id,在此范围内的表单验证有效
5. 第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败。

<Form ref="formValidate" :model='formValidate' :label-width='100' :rules="ruleValidate">
    <FormItem label='学生姓名' prop='name'>
        <Input v-model.trim="addForm.name" type='text' placeholder='请输入学生姓名'
               style='width: 300px'/>
    </FormItem>
</Form>

下边是data里需要写的表单验证

ruleValidate: {
    name: [
        {required: true, message: '学生姓名不能为空', trigger: 'blur'}
    ],
}

调用方法有两种，如果你的方法是要带参数的，像下边这样：

  <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>

那就要在methods里边写验证的时候用一个变量来接收这个参数

handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },

如果你的方法不带参的，像这样：

  <Button type="primary" @click="handleSubmit">Submit</Button>

那就要在写验证时加上model所绑定的它：'formValidate '：

  handleSubmit() {
                this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                    }
                })
         }           

最后还有一点要提醒，不要让两个modal框的表单验证的ref一样，写一样会更难受，后果很可怕，避坑！！！！
分享就到这里了，希望大家以后不要踩坑，以后有新的发现会继续更新。

最后

以上就是眯眯眼小蝴蝶为你收集整理的Vue+iview表单验证失效的全部内容，希望文章能够帮你解决Vue+iview表单验证失效所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。