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

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

在这里插入图片描述

相关推荐

  1. Element-UI el-select下拉定义过滤选项全选

    2024-01-03 17:40:02       11 阅读
  2. input,el-input输入正则验证输入的数字转为

    2024-01-03 17:40:02       11 阅读
  3. element ui 添加定义方法

    2024-01-03 17:40:02       17 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-03 17:40:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-03 17:40:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-03 17:40:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-03 17:40:02       20 阅读

热门阅读

  1. 数字孪生项目中的导航片及寻路实现算法的探索

    2024-01-03 17:40:02       38 阅读
  2. Unity 关于点击不同物品移动并触发不同事件

    2024-01-03 17:40:02       40 阅读
  3. Jenkinsfile构建

    2024-01-03 17:40:02       39 阅读
  4. 关于数据集的了解

    2024-01-03 17:40:02       39 阅读
  5. 前端工作细节提升总结

    2024-01-03 17:40:02       37 阅读
  6. 搭建golang开发环境

    2024-01-03 17:40:02       45 阅读
  7. 前端面试

    2024-01-03 17:40:02       35 阅读
  8. Python日期和时间详解

    2024-01-03 17:40:02       36 阅读
  9. React Proxy跨域配置(纯代码-可直接拉取使用)

    2024-01-03 17:40:02       39 阅读
  10. FreeRTOS任务通知

    2024-01-03 17:40:02       39 阅读
  11. 有效的APP推广策略:引领用户走向成功

    2024-01-03 17:40:02       43 阅读
  12. Python中的数据分析和数据处理

    2024-01-03 17:40:02       43 阅读
  13. 15、异常处理

    2024-01-03 17:40:02       32 阅读