Vue+iview表单验证失效

最新推荐文章于 2025-03-25 16:53:47 发布

Logan星

最新推荐文章于 2025-03-25 16:53:47 发布

阅读量3.1k

点赞数 1

分类专栏：笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45222558/article/details/124381999

版权

笔记专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在Vue项目中使用iView进行表单验证时遇到的问题及解决方案，包括设置rules、prop属性，使用Form的ref进行验证，以及在按钮点击事件中调用验证方法确保表单有效。强调了不同modal框中表单验证ref不能相同以避免错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iview表单验证的步骤：

第一步：给 Form 设置属性 rules :rules
第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=" "
第三步：注意：Form标签里面是 :model
第四步：注意：在Form标签里面必须添加 ref,这个作用相当于id,在此范围内的表单验证有效
第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 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) {
                    }
                })
         }