vue自定义指令——实现input内容校验不通过边框变红

模板

<input type="text" class="demo" v-check ref="cjy">

JS

 // 组件内部指令
  directives: {
    // 指令名称
    check: {
      // 钩子。被绑定元素插入父节点时调用
      inserted: (el) => {
        // 正则-验证数字
        const r = /^[0-9]*$/
        // input 添加失焦时间
        el.addEventListener('blur', (e) => {
          // 未匹配成功
          if (!r.test(e.target.value)) {
            el.style.borderColor = '#f00'
          } else {
            el.style.borderColor = '#000'
          }
        })
      }

    }
  },

效果

输入数字

 

输入非数字