iview 表单动态校验，required: true

最新推荐文章于 2025-11-08 10:51:47 发布

原创最新推荐文章于 2025-11-08 10:51:47 发布 · 7.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iview

框架库点滴知识专栏收录该内容

96 篇文章

订阅专栏

本文探讨了在Vue中如何实现表单字段的动态显示与隐藏，并通过代码示例展示了如何使用v-if和$nextTick进行字段的条件渲染，同时介绍了表单验证规则的动态调整方法。

部署运行你感兴趣的模型镜像

<form-item label="主机记录" prop="name" v-if="showName">
                                            <i-input v-model="dataConfig.name" placeholder="请输入主机记录"></i-input>
                                        </form-item>

this.showName = false;
            this.$nextTick(()=>{
                this.showName = true;
            })
            this.dataConfig.name = '';
            this.ruleValidate.name = []
            if(val=='NS'){
                this.ruleValidate.name = [{ validator: (rule, value, callback)=>{
                    if(!isEmpty(value)&&this.dataConfig.type!='NS'){
                        callback(new Error('请输入主机记录'));
                    }else{
                        callback();
                    }
                },trigger: 'blur' }]
            }else{
                this.ruleValidate.name = [{ required: true,message: '请输入主机记录' ,trigger: 'blur' }]
            }

您可能感兴趣的与本文相关的镜像