angularjs实现

app.directive('checkDomainCommon', function () {  return {    restrict: 'A',    require: 'ngModel',    link(scope, ele, attrs, ctrl) {      ctrl.$validators.checkDomainCommon = function (modelVal) {        // reg为域名的正则的正则        let reg =/^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][--a-zA-Z0-9]{0,62})+\.?/        if (attrs['required'] === undefined || attrs['required'] === false) {          return true        }        else if(!modelVal){          return false;        }else {          //退出输出类型判断，避免谬误的将指令绑定在如number类型的输入框上          if(typeof modelVal !== 'string'){            console.error('the type of input value is not string,can not check domain format!');            return false;          }          // 零碎中现有用逗号分隔的，和分号分隔的做兼容。都是英文符号          // 中横线隔开的是domain范畴，也须要验证是否合乎输出标准          let domainArr = attrs['separatorReg']? modelVal.split(new RegExp(attrs['separatorReg'])):modelVal.split(/,|;|-/);          let domain = "";          let isOk = false;          for (let i = 0; i < domainArr.length; i++) {            domain = domainArr[i];            if (reg.test(domain)) {              isOk = true;            } else {              // 只有一个不合符，未通过验证，间接break              isOk = false;              break;            }          }          return isOk;        }      }    }  }});

vue实现

import Vue from 'vue'const domianReg = '';// 注册一个全局自定义指令 `v-checkDomain`Vue.directive('checkDomain', {    // 当被绑定的元素插入到 DOM 中时……    inserted: function (el, binding, vNode) {        el.addEventListener('keyup', function (event) {            // 首先去除已有款式            //removeErrorStyle                        // 判断是否是否必填            let isRequired = binding.value.required            if (isRequired) {                if (!el.value || el.value === '') {                    //do something with error                 }            }            // 判断正则            let regex = binding.value.regex            if (regex === 'IpRegex') {                if (!el.value.match(domainReg)) {                    //do something with error                 }            } else if (!el.value.match(regex)) {                //do something with error             }        })    }})// 注册一个全局自定义指令 `v-checkSubmit`Vue.directive('checkSubmit', {    // 当被绑定的元素插入到 DOM 中时……    inserted: function (el, binding, vNode) {        el.addEventListener('click', function (event) {            let elements = document.getElementsByClassName('v-check')            var evObj = document.createEvent('Event')            evObj.initEvent('keyup', true, true)            for (let element of elements) {                element.dispatchEvent(evObj)            }            let errorInputs = document.getElementsByClassName('errorClssDom');            if (errorInputs.length === 0) {                vNode.context.submit();            }        })    }})