ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Element-ui自定义input框非空校验

2026/9/16 17:25:58 拓冰建站 浏览量
Element-ui自定义input框非空校验

1、vue自定义非空指令:

main.js中自定义非空指令
当input框或下拉框中数据更新时,触发校验

Vue.directive('isEmpty',{update:function(el,binding,vnode){if(vnode.componentInstance.value==""){el.classList.add("is-required");}else if(vnode.componentInstance.value||vnode.componentInstance.value==0){el.classList.remove("is-required");}}
})

2、css 全局添加必填样式:

.is-required input{border-color:red!important
}

3、具体应用:

<el-select placeholder="请选择" v-isEmpty v-model="form.name"></el-select><el-input v-isEmpty v-model="form.age" />

4、寄语:

过去这一年,你最大的收获是什么呢?
不一定要“战绩赫赫”,
不一定要“大有所成”,
捞出属于你的“星星”即可!
拥有那些“不负生活”的闪亮时刻即可!

在这里插入图片描述