vue 使用自定義指令實現表單校驗的方法

2019-11-19 13:07:45

字體：大中小

來源：轉載

供稿：網友

筆者近期在公司的項目中使用自定義指令完成了表單校驗。

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

demo可見Github:vue-form-param-check

首先關于自定義指令的介紹可以參考官網。

首先，在github上已經有了一些開源組件可以支持表單校驗。但是對于一些小項目而言，引入一個很大的東西實際上并不好。所以這里利用vue的自定義指令對表單校驗進行了簡單的實現。

分析

在平時我們所見的表單中，常見的做法有2種：

- input框輸入時和提交時，立馬進行校驗；

- 提交時，統一校驗。

針對這2種實現，筆者分別進行了實現。分別如下。

input框輸入和提交時，進行校驗

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', { // 當被綁定的元素插入到 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('input-error');   if(errorInputs.length === 0){    vNode.context.submit();   }  }) }})

提交時，再統一校驗

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'     }    }    // 判斷正則    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', { // 當被綁定的元素插入到 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('input-error');   if(errorInputs.length === 0){    vNode.context.submit();   }  }) }})

區別

其實大家很容易發現，上面的2種實現只有一個if的區別，這個的含義是：由提交按鈕觸發的keyup,是沒有keycode的，所以在if(!event.keyCode)滿足時，進行校驗（也就是在僅提交時，進行校驗）。

用法說明

下面給出用例。

<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('通過校驗')  } }}</script><style scoped>input{  height: 22px;}.input-error{ background-color: red;}.star:before{ content:"*"; color:red;}</style>

所有綁定了class=”v-check”的input，都會在v-checkSubmit被click時進行校驗，而其校驗規則是v-checkParam對應的規則。

全部校驗通過后，會回調到submit方法。進行觸發接下來的事務。

效果截圖