vue 自定义input检测指令及提交

作者: yimi珊 | 来源:发表于2020-12-03 16:26 被阅读0次

vue 自定义input检测指令及提交
Vue2 & ElementUI实现管理后台之input
vue中自定义组件、指令、插件
Vue 自定义指令
season2-全局API
Vue div节点滚动事件-加载更多
uniapp实现自动聚焦
VUE-2：自定义指令、事件
vue入门6---vue基本指令、自定义指令、插件
vue自定义指令初探

简介

写一个全局注册指令，用来验证input
包含：非空验证，email，phone，密码，最小值，最大值，最小长度，最大长度，自定义正则
提交时，当前页面做一个验证

效果图

全局注册指令

assets/js 下边新建一个directive.js文件，用来放置验证，及注册指令

input组件：本文使用的Ant Design of Vue(也可以自己修改成其他input组件，或者自己写)，提示信息的添加和移除需要针对修改

import Vue from 'vue'

var elArr = [];//保存所有input的el
// 全局注册input验证
Vue.directive('validate', {
  inserted: function (el, validateStr) {
    // 将验证规则拆分为验证数组
    let validateRuleArr = validateStr.value.split("|");
    var el = el;
    var elInput = el;
    if (el.className.indexOf('ant-input-password') !== -1) {
      elInput = el.firstChild;
    }
    // 监听失去焦点的时候
    elInput.addEventListener('blur', function () {
      //失去焦点进行验证
      checkedfun();
    });
    
    //用于提交的时候验证
    for(let a in elArr){
      if(elArr[a].outerHTML==elInput.outerHTML){
        elArr.splice(a,1);
      }
    }
    elArr.push(elInput);
   
    

    // 循环进行验证
    function checkedfun() {
      for (var i = 0; i < validateRuleArr.length; ++i) {
        let requiredRegex = /^required$/; // 判断设置了required
        let emailRegex = /^email$/; // 判断设置了email
        let phoneRegex = /^phone$/; // 判断设置了 phone
        let pwdRegex = /^pwd$/; // 判断设置了 pwd
        let minRegex = /min\(/; //判断设置了min 最小值
        let maxRegex = /max\(/; //判断设置了max 最大值
        let minlengthRegex = /minlength\(/; //判断设置了 minlength 最大长度
        let maxlengthRegex = /maxlength\(/; //判断设置了 maxlength 最大长度
        let regexRegex = /regex\(/;
        // 判断设置了required
        if (requiredRegex.test(validateRuleArr[i])) {
          if (!required()) {
            break;
          } else {
            removeTips();
          }

        }

        // 判断设置了email
        if (emailRegex.test(validateRuleArr[i])) {
          if (!email()) {
            break;
          } else {
            removeTips();
          }

        }

        // 判断设置了 phone
        if (phoneRegex.test(validateRuleArr[i])) {
          if (!phone()) {
            break;
          } else {
            removeTips();
          }

        }
        // 判断设置了 pwd
        if (pwdRegex.test(validateRuleArr[i])) {
          if (!pwd()) {
            break;
          } else {
            removeTips();
          }

        }
        // 判断是否设置了最小值
        if (minRegex.test(validateRuleArr[i])) {
          if (!eval(validateRuleArr[i])) {
            break;
          } else {
            removeTips();
          }

        }

        // 判断是否设置了最大值
        if (maxRegex.test(validateRuleArr[i])) {
          if (!eval(validateRuleArr[i])) {
            break;
          } else {
            removeTips();
          }

        }

        // 判断设置了最小长度
        if (minlengthRegex.test(validateRuleArr[i])) {
          if (!eval(validateRuleArr[i])) {
            break;
          } else {
            removeTips();
          }

        }

        // 判断设置了最大长度
        if (maxlengthRegex.test(validateRuleArr[i])) {
          if (!eval(validateRuleArr[i])) {
            break;
          } else {
            removeTips();
          }

        }

        // 判断测试正则表达式
        if (regexRegex.test(validateRuleArr[i])) {
          if (!eval(validateRuleArr[i])) {
            break;
          } else {
            removeTips();
          }

        }

      }

    }

    // 验证是否是必填项
    function required() {
      if (elInput.value == '' || elInput.value == null) {
        // console.log("不能为空");
        tipMsg("该输入框不能为空哦~");
        return false;
      }

      return true;
    }

    // 验证是否是邮箱
    function email() {
      let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      if (!emailRule.test(elInput.value)) {
        tipMsg("请输入正确的邮箱地址");
        return false;
      }

      return true;
    }

    // 验证是否是手机号码
    function phone() {
      let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!phoneRule.test(elInput.value)) {
        tipMsg("请输入正确的手机号码");
        return false;
      }
      return true;
    }

    // 进行密码的验证
    function pwd() {
      let pwdRule = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z._*#$@]{6,12}$/;
      if (!pwdRule.test(elInput.value)) {
        tipMsg("密码必须由6-12位数字和字母组成。\n特殊字符包含（. _ * # $ @）");
        return false;
      }
      return true;
    }

    // 最小值验证
    function min(num) {
      if (elInput.value < num) {
        tipMsg("最小值不能小于" + num);
        // console.log('最小值不能小于'+num);
        return false;
      }

      return true;
    }

    // 最大值验证
    function max(num) {
      if (elInput.value > num) {
        tipMsg("最大值不能大于" + num);
        //console.log('最大值不能大于'+num);
        return false;
      }

      return true;
    }

    // 最小长度验证
    function minlength(length) {
      if (elInput.value.length < length) {
        // console.log('最小长度不能小于' + length);
        tipMsg("最小长度不能小于" + length);
        return false;
      }

      return true;
    }

    // 最大长度进行验证
    function maxlength(length) {
      if (elInput.value.length > length) {
        tipMsg("最大长度不能大于" + length);
        return false;
      }
      return true;
    }

    // 进行正则表达式的验证
    function regex(rules) {
      if (!rules.test(elInput.value)) {
        tipMsg("请输入正确的格式");
        return false;
      }
      return true;
    }

    // 添加提示信息
    function tipMsg(msg) {
      removeTips();
      elInput.classList.add('tip_el');
      let tipsDiv = document.createElement('div');
      tipsDiv.innerText = `${msg}`;
      tipsDiv.className = 'tip_msg';
      let parent = el.parentNode;
      if (parent.lastChild == el) {
        parent.appendChild(tipsDiv);
      }
    }

    // 移除提示信息
    function removeTips() {
      elInput.classList.remove('tip_el');
      let parent = elInput.parentNode;
      if (parent.lastChild.className == 'tip_msg') {
        parent.removeChild(parent.lastChild);
      }
      //password
      if (el.className.indexOf('ant-input-password') !== -1) {
        let parent = el.parentNode;
        if (parent.lastChild.className == 'tip_msg') {
          parent.removeChild(parent.lastChild);
        }
      }

    }
  },
});

// 提交验证
Vue.directive('checkSubmit', {
  inserted: function (el, binding, vNode) {
    el.addEventListener('click', function (event) {
      var evObj = document.createEvent('Event');
      evObj.initEvent('blur', true, true);
      for (let elArrChild of elArr) {
        elArrChild.dispatchEvent(evObj);
      }
      /*
      *有一个参数
      *eg: v-checkSubmit="submitBtn"
      *参数为时间名
      */
     let doc = document;
     let submitEvent = binding.value;
     /*
     *有两个参数
     *用于一个页面有两个确定，或者有其他因素干扰了确定按钮时使用
     *eg: v-checkSubmit="{submitEvent:submitBtn,cls:'backups_all_input'}"
     *submitEvent:事件名称
     *cls：需要检测的class名下的input
     */
      if(binding.value.hasOwnProperty('cls')){
        doc = document.getElementsByClassName(binding.value.cls)[0];
        submitEvent = binding.value.submitEvent;
      }

      let errorInputs = doc.getElementsByClassName('tip_el');//tip_el 检测不通过的input
      if(errorInputs.length === 0){
        submitEvent();//执行提交事件
      }
    })
  }
});

css

css部分我写在reset.scss全局文件中了

//input 提示样式
.tip_msg{
    color: $danger_color;
    padding-left: 0;
    display: inline-block;
    // margin-top: -20px;
    animation:  tips .5s linear forwards;
}
.tip_el{
    border :1px solid $danger_color !important;
    border-radius: 4px;
}
.tip_el:focus{
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}
@keyframes tips{
    0%{
        opacity: 0;
        // margin-top: -20px;
        padding-left: 0;
    }
    100%{
        opacity: 1;
        // margin-top: 0;
        padding-left: 10px;
    }
}

全局引入

main.js

//全局注册input验证
import './assets/js/directive.js'

使用方式

//鼠标离开时验证
<a-input size="large" placeholder="用户名" v-model="username" v-validate="'required'"/>
<a-input-password size="large" placeholder="登录密码" v-model="password" @blur="blurPwd" v-validate="'required|pwd'"/>

//提交验证 
//将@click替换成v-checkSubmit，并将submitBtn实践传过去
//只有一个验证
<a-button type="primary" size="large" v-checkSubmit="submitBtn"> 提交 </a-button>
//如果有多个提交按钮，为了不让多个按钮冲突需要多传一个class参数
//submitEvent:事件名称
//cls：需要检测的class名下的input
<a-button type="primary" size="large"  v-checkSubmit="{submitEvent:okBtn,cls:'popup_check_input'}" >提交 </a-button>

参考资料：# vue 自定义指令input表单的数据验证
在此，抱拳感谢~

转载请著名出处~
-----*13

vue 自定义input检测指令及提交
简介写一个全局注册指令，用来验证input包含：非空验证，email，phone，密码，最小值，最大值，最小长度...
Vue2 & ElementUI实现管理后台之input
在Vue中要给input设置焦点，需要注册自定义指令。由于ElementUI中的el-input是一个自定义组件...
vue中自定义组件、指令、插件
组件全局组件局部组件自定义插件提供install方法，挂载到Vue 指令使用指令实现input自动获取焦...
Vue 自定义指令
Vue自定义指令定义通过directive方法，配合钩子函数及参数定义指令定义全局自定义指令定义局部自定义...
season2-全局API
第1节：Vue.directive 自定义指令 Vue.directive自定义指令自定义的指令：changec...
Vue div节点滚动事件-加载更多
使用Vue.directive注册全局指令绑定事件对于Vue自定义指令不明白的同学请移步: Vue自定义指令 ...
uniapp实现自动聚焦
uniapp中无法使用vue的自定义指令，例如想在input中实现 v-focus ，是无法实现的。但uniapp...
VUE-2：自定义指令、事件
directive自定义指令我们还可以通过`Vue`提供的directive方法来自定义指令注册指令 `vue...
vue入门6---vue基本指令、自定义指令、插件
一、vue常用指令概览二、vue自定义指令注册全局指令Vue.directive('my-directive'...
vue自定义指令初探
vue自定义指令初探一、什么是自定义指令自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非...