@H_404_0@笔者近期在公司的项目中使用自定义指令完成了表单校验。
@H_404_0@这里将思路分享给大家，并写了一个小demo。这个自定义指令还需要大家自行完善。
@H_404_0@
demo可见Github:vue-form-param-check
@H_404_0@首先关于自定义指令的介绍可以参考
官网
。@H_404_0@首先，在github上已经有了一些开源组件可以支持表单校验。但是对于一些小项目而言，引入一个很大的东西实际上并不好。所以这里利用vue的自定义指令对表单校验进行了简单的实现。
@H_4040@<span style="background-color: #ccffcc">
分析
@H4040@<span style="color: #ff00ff">
在平时我们所见的表单中，常见的做法有2种：
@H4040@- input框输入时和提交时，立马进行校验；
@H4040@- 提交时，统一校验。
@H4040@针对这2种实现，笔者分别进行了实现。分别如下。
@H404_0@<span style="background-color: #ccffcc">
input框输入和提交时，进行校验
<div class="jb51code">
<pre class="brush:js;">
import Vue from 'vue'
const IP_REGEX = '^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])\.' +
'(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.' +
'(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.' +
'(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$'
// 注册一个全局自定义指令 v-checkParam
Vue.directive('checkParam',{
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el,binding,vNode) {
el.addEventListener('keyup',function (event) {
// 首先去除已有样式
el.className = el.className.replace('input-error','').trim()
// if (!event.keyCode) { // 加上这个判断就是在提交时，才会校验
// 判断是否是否必填
let isrequired = binding.value.required
if (isrequired) {
if (!el.value || el.value === '') {
el.className += ' input-error'
}
}
// 判断正则// debugger
let regex = binding.value.regex
if (regex === 'IpRegex') {
if (!el.value.match(IP_REGEX)) {
el.className += ' input-error'
}
} else if (!el.value.match(regex)) {
el.className += ' input-error'
}
// }
})
}
})
// 注册一个全局自定义指令 v-checkSubmit
Vue.directive('checkSubmit',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('input-error');
if(errorInputs.length === 0){
vNode.context.submit();
}
})
}
})
