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