关于javascript:angularjsvue表单验证1域名校验指令

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();
            }
        })
    }
})