vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法
筆者近期在公司的項(xiàng)目中使用自定義指令完成了表單校驗(yàn)。
這里將思路分享給大家,并寫了一個(gè)小demo。這個(gè)自定義指令還需要大家自行完善。
demo可見Github:vue-form-param-check
首先關(guān)于自定義指令的介紹可以參考官網(wǎng)。
首先,在github上已經(jīng)有了一些開源組件可以支持表單校驗(yàn)。但是對于一些小項(xiàng)目而言,引入一個(gè)很大的東西實(shí)際上并不好。所以這里利用vue的自定義指令對表單校驗(yàn)進(jìn)行了簡單的實(shí)現(xiàn)。
分析
在平時(shí)我們所見的表單中,常見的做法有2種:
- input框輸入時(shí)和提交時(shí),立馬進(jìn)行校驗(yàn);
- 提交時(shí),統(tǒng)一校驗(yàn)。
針對這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)$' // 注冊一個(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í),才會校驗(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' } // } }) } }) // 注冊一個(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)$' // 注冊一個(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í),才會校驗(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' } } }) } }) // 注冊一個(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,是沒有keycode的,所以在if(!event.keyCode)滿足時(shí),進(jìn)行校驗(yàn)(也就是在僅提交時(shí),進(jìn)行校驗(yàn))。
用法說明
下面給出用例。
<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('通過校驗(yàn)') } } } </script> <style scoped> input{ height: 22px; } .input-error{ background-color: red; } .star:before { content:"*"; color:red; } </style>
所有綁定了class=”v-check”的input,都會在v-checkSubmit被click時(shí)進(jìn)行校驗(yàn),而其校驗(yàn)規(guī)則是v-checkParam對應(yīng)的規(guī)則。
全部校驗(yàn)通過后,會回調(diào)到submit方法。進(jìn)行觸發(fā)接下來的事務(wù)。
效果截圖
以上這篇vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue使用ArcGis?API?for?js創(chuàng)建地圖實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue使用ArcGis?API?for?js創(chuàng)建地圖實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解
這篇文章主要為大家介紹了buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)5
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01前端vue2?element?ui高效配置化省時(shí)又省力
這篇文章主要為大家介紹了前端高效配置化vue2?element?ui省時(shí)又省力,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07