最近，笔者在公司项目中使用自定义指令完成了表单验证。

在这里我将与大家分享我的想法，并写一个小演示。这个定制指令需要每个人完善。

演示请参见github : vue-form-param-check

首先，你可以参考官网了解定制说明的介绍。

首先，github上已经有一些开源组件可以支持表单验证。但是对于一些小项目来说，引入一个大的东西是不好的。因此，表单验证简单地通过使用vue的自定义指令来实现。

分析

在我们平时看到的形式中，有两种常见的做法：

-输入框输入并提交，立即检查；

-提交时统一检查。

鉴于这两个实现，作者分别实现了它们。它们如下。

输入和提交输入框时检查

从“Vue”const IP _ regex='^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])\.导入vue'(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] 。{//当绑定元素插入DOM时.插入了：函数(El，binding，vnode) {El。addeventlistener ('keyup ')，函数(event) {//首先移除现有样式El . class name=El . class name . replace(' input-error '，' ')。trim ()//if(！Event.keyCode) {//添加此判断检查//判断是否需要let=binding . value . required if(必选){if(！埃尔。值| | El。value==='') {El。=' input-error'}}//judge正则//调试器让regex=binding。价值。regex if(regex==' ipregex '){ if(！El . value . match(IP _ REGEX)){ El . class name=' input-error ' } } else if(！埃尔。value.match (regex)) {El。类名=' input-error ' }//} })})//当绑定元素插入DOM时，注册一个全局自定义指令` v-check submit ` vue . directive(' check submit '，{//即可.插入了：函数(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(elements的let元素){ element . dispatchevent(evObj)} let error inputs=document . getelementsbyclassname(' input-error ')；if(error inputs . length===0){ Vnode . context . submit()；}})})，然后统一检查

从“vue”const IP _ regex='^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])\.导入vue '(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。指令(' CheckParam '，{ //当被绑定的元素插入到数字正射影像图中时……插入：函数(el，binding，Vnode){ El。addeventlistener('键向上'，函数(事件){ //首先去除已有样式埃尔。类名=El。类名。替换('输入错误'，' ').trim() if(！event.keyCode) { //加上这个判断就是在提交时，才会校验//判断是否是否必填let IsRequired=binding。价值。if(IsRequired){ if(！埃尔。值| | El。value===' '){ El。类名=' input-error ' }//判断正则让regex=绑定。价值。regex if(regex==' IpRegex '){ if(！埃尔。价值。匹配(IP _ REGEX)){ El。class name=' input-error ' } } else if(！埃尔。价值。match(regex)){ El。类名=' input-error ' } } })})//注册一个全局自定义指令` v-CheckSubmIt ` Vue。指令(' CheckSubmIt '，{ //当被绑定的元素插入到数字正射影像图中时……插入了：函数(el，binding，Vnode){ El。addeventlistener(' click ')，function(Event){ let elements=document。getelementsbyclassname(' v-check ')var evObj=document。createevent(' Event ')evObj。(元素)的initevent(' key up '，true，true)的让元素){元素。dispatchevent(evObj)}让错误输入=document。getelementsbyclassname(' input-error ')；if(错误输入。长度===0){ Vnode。语境。submit()；} }) }})区别

其实大家很容易发现，上面的2种实现只有一个如果的区别，这个的含义是：由提交按钮触发的键盘，是没有键码的，所以在if(！event.keyCode)满足时，进行校验（也就是在仅提交时，进行校验)。

用法说明

下面给出用例。

模板div div标签类=' star '名称：/标签输入类=' v-check ' v-checkparam='{required:true,regex:'^[abcde]*$'}'类型=' text '/div div label class=' star ' IP :/label input class=' v-check ' v-check param=' { required 3360 true，regex : ' ipregex ' } ' type=' text '/div div button v-check submit提交/button/div/div/templatescript导出默认值{ name : ' demo '，methods: { submit () { alert('通过校验)} } }/脚本样式scopedinput { height : 22px}.输入错误{背景色：红色；} .星：在{ content:'* '之前；color:red}/样式所有绑定了class="v-check "的输入，都会在v-checkSubmit被点击时进行校验，而其校验规则是v-checkParam对应的规则。

全部校验通过后，会回调到使服从方法。进行触发接下来的事务。

效果截图

以上这篇某视频剪辑软件使用自定义指令实现表单校验的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。