evObj.initEvent('blur', true, true)
for (let element of elements) {
// 给所有v-check元素绑定blur事件
element.dispatchEvent(evObj);
}
// 获取当前组件下的所有错误提示元素
let errorInputs = vNode.context.$el.getElementsByClassName('input-error');
// 如果组件中没有错误提示元素，则执行当前组件实例中的submit()函数
if(errorInputs.length === 0){
vNode.context.submit();
}
})
}
})
}
}
这里需要着重说明一下 validateSubmit 指令，这个指令绑定到提交按钮上，在点击的时候执行校验，校验通过之后执行提交操作。但是这里的实现方式不是特别友好:
1.需要获取当前组件中的所有input元素，给他们绑定并执行 blur 事件，以此来执行 validateParams 指令中的校验逻辑。
2.需要获取当前组件中的所有错误提示元素，如果他们存在就不能执行提交操作。
3.当组件内不含任何错误提示元素时，就表示校验通过，执行当前组件内的 submit 函数，所以每个表单组件的提交函数都只能命名为 submit
然后我们再看下指令 validateParams ，该指令需要绑定到表单 input 元素上，并把校验规则当作参数写入。当该input元素失焦时，会执行指令中给当前元素绑定的事件中的逻辑。这些逻辑分为三个步骤，我已经写在注释里了，现在我们来看下具体实现。
重置所有错误提示
/**
* 重置当前节点样式
* @param el: HTMLElement，传入当前绑定的input元素
*/
const resetError = (el: HTMLElement) => {
el.className = el.className.replace('input-error', '').trim();
if ( el.parentNode ) {
const ErrorNode = el.parentNode.querySelector('.error-tips');
if (ErrorNode) {
el.parentNode.removeChild(ErrorNode);
}
}
};获取自定义指令中传入的校验规则参数和表单输入的值
// binding.value是传入自定义指令的参数，以数组的形式
for (const rule of binding.value) {
// 分别获取到自己定义的校验规则并执行
const { min, max, message, required, pattern } = rule;
if ( min && InputEl.value.length < min ) {
// 如果不符合校验，执行报错函数
validateError(InputEl, message);
break;
}
if ( max && InputEl.value.length > max ) {
validateError(InputEl, message);
break;
}
if ( !!required && !InputEl.value ) {
validateError(InputEl, message);
break;
}
if ( pattern && !pattern.test(InputEl.value) ) {
validateError(InputEl, message);
break;
}
if ( rule && typeof rule === 'function' ) {
rule(vNode.context, InputEl.value, validateError, InputEl);
