VUE+自定义表单验证组件

在使用vue写了几个项目之后，发现为了某一个功能而引入一个组件不值得，于是便学习了一下，写自定义标签也便于自己去理解大团队们的组件运行机制。

man.js中定义

Vue.directive('checkParam',{
    //从官方文档中可知inserted为钩子函数
   // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
   inserted:function(el,binding){
     // el：指令所绑定的元素，可以用来直接操作 DOM 。
     el.addEventListener('keyup',function(event){
       //input 发生改变时触发事件，改变class的绑定值来改变用户的体验
       el.className = el.className.replace('input-error','').trim();
       //只有点击提交按钮时，才进行如下操作的限制条件
       if (!event.keyCode) {
          let isRequired = binding.value.required
          if(isRequired){
            if(!el.value||el.value===''){
              el.className += ' input-error'
            }
          }
          //binding：一个对象; 
          //binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
          let regex = binding.value.regex
          if(regex === 'IpRegex'){
            if(!el.value.match(IP_REGEX)){
              el.className += ' input-error'
            }
          }else if(!el.value.match(regex)){
            el.className += ' input-error'
          }
        }
     })
   }
})

Vue.directive('checkSubmit',{
  inserted:function(el,bingding,vNode){
    el.addEventListener('click',function(){
      let elements = document.getElementsByClassName('v-check')
      //合成 Event 新对象
      var evObj = document.createEvent('Event')
      //初始化新事件对象的属性
      evObj.initEvent('keyup', true, true)
      for (let element of elements) {
        //Element 对象的 dispatchEvent() 方法进行分派
       element.dispatchEvent(evObj)
      }
      let errorInputs = document.getElementsByClassName('input-error');
      if(errorInputs.length === 0){
       vNode.context.submit();
      }
    })
  }
})

HTML代码

    <div>
      <div>
	      <label class="star">Name:</label>
	      <input class='v-check' v-checkParam="{required:true,regex:'^[\u4e00-\u9fa5]*$'}" type="text">
      </div>
      <div>
	      <label class="star">IP:</label>
	      <input class='v-check' v-checkParam="{required:true,regex:'IpRegex'}" type="text">
      </div>
      <div>
	      <button v-checkSubmit>提交</button>
      </div>
    </div>
    

<script>
	export default {
	  methods: {
	    submit () {
	      alert('通过校验')
	    }
	  }
	}
</script>

来源：CSDN

作者：空、

链接：https://blog.csdn.net/weixin_43311271/article/details/91379170