vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法

更新時(shí)間：2018年08月28日 11:28:57 作者：mapw1993

今天小編就為大家分享一篇vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

筆者近期在公司的項(xiàng)目中使用自定義指令完成了表單校驗(yàn)。

這里將思路分享給大家，并寫了一個(gè)小demo。這個(gè)自定義指令還需要大家自行完善。

demo可見(jiàn)Github:vue-form-param-check

首先關(guān)于自定義指令的介紹可以參考官網(wǎng)。

首先，在github上已經(jīng)有了一些開(kāi)源組件可以支持表單校驗(yàn)。但是對(duì)于一些小項(xiàng)目而言，引入一個(gè)很大的東西實(shí)際上并不好。所以這里利用vue的自定義指令對(duì)表單校驗(yàn)進(jìn)行了簡(jiǎn)單的實(shí)現(xiàn)。

分析

在平時(shí)我們所見(jiàn)的表單中，常見(jiàn)的做法有2種：

- input框輸入時(shí)和提交時(shí)，立馬進(jìn)行校驗(yàn)；

- 提交時(shí)，統(tǒng)一校驗(yàn)。

針對(duì)這2種實(shí)現(xiàn)，筆者分別進(jìn)行了實(shí)現(xiàn)。分別如下。

input框輸入和提交時(shí)，進(jìn)行校驗(yàn)

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)$'

// 注冊(cè)一個(gè)全局自定義指令 `v-checkParam`
Vue.directive('checkParam', {
 // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
 inserted: function (el, binding, vNode) {
  el.addEventListener('keyup', function (event) {
   // 首先去除已有樣式
   el.className = el.className.replace('input-error', '').trim()
   // if (!event.keyCode) { // 加上這個(gè)判斷就是在提交時(shí)，才會(huì)校驗(yàn)
    // 判斷是否是否必填
   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'
   }
   // }
  })
 }
})

// 注冊(cè)一個(gè)全局自定義指令 `v-checkSubmit`
Vue.directive('checkSubmit', {
 // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
 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('input-error');
   if(errorInputs.length === 0){
    vNode.context.submit();
   }
  })
 }
})

提交時(shí)，再統(tǒng)一校驗(yàn)

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)$'

// 注冊(cè)一個(gè)全局自定義指令 `v-checkParam`
Vue.directive('checkParam', {
 // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
 inserted: function (el, binding, vNode) {
  el.addEventListener('keyup', function (event) {
   // 首先去除已有樣式
   el.className = el.className.replace('input-error', '').trim()
   if (!event.keyCode) { // 加上這個(gè)判斷就是在提交時(shí)，才會(huì)校驗(yàn)
    // 判斷是否是否必填
    let isRequired = binding.value.required
    if (isRequired) {
     if (!el.value || el.value === '') {
      el.className += ' input-error'
     }
    }

    // 判斷正則
    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'
    }
   }
  })
 }
})

// 注冊(cè)一個(gè)全局自定義指令 `v-checkSubmit`
Vue.directive('checkSubmit', {
 // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
 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('input-error');
   if(errorInputs.length === 0){
    vNode.context.submit();
   }
  })
 }
})

區(qū)別

其實(shí)大家很容易發(fā)現(xiàn)，上面的2種實(shí)現(xiàn)只有一個(gè)if的區(qū)別，這個(gè)的含義是：由提交按鈕觸發(fā)的keyup,是沒(méi)有keycode的，所以在if(!event.keyCode)滿足時(shí)，進(jìn)行校驗(yàn)（也就是在僅提交時(shí)，進(jìn)行校驗(yàn)）。

用法說(shuō)明

下面給出用例。

<template>
 <div>
  <div>
  <label class="star">Name:</label>
   <input class='v-check' v-checkParam="{required:true,regex:'^[abcde]*$'}" type="text">
  </div>
  <div>
  <label class="star">IP:</label>
   <input class='v-check' v-checkParam="{required:true,regex:'IpRegex'}"
   type="text">
   </div>
  <div>
   <button v-checkSubmit>提交</button>
  </div>
 </div>
</template>
<script>
export default {
 name: 'demo',
 methods: {
  submit () {
   alert('通過(guò)校驗(yàn)')
  }
 }
}
</script>

<style scoped>
input{
  height: 22px;
}
.input-error{
 background-color: red;
}
.star:before
{
 content:"*";
 color:red;
}
</style>

所有綁定了class=”v-check”的input，都會(huì)在v-checkSubmit被click時(shí)進(jìn)行校驗(yàn)，而其校驗(yàn)規(guī)則是v-checkParam對(duì)應(yīng)的規(guī)則。

全部校驗(yàn)通過(guò)后，會(huì)回調(diào)到submit方法。進(jìn)行觸發(fā)接下來(lái)的事務(wù)。

效果截圖