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

发布时间:2024年01月02日

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、寄语:

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

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_41238459/article/details/135338964
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。