vue指令應用--實現輸入框常見過濾功能

前端開發最常碰到的就是輸入框，經常要做各種驗證，本公司慣用的需求是直接屏蔽特定字符的輸入，如禁止非數字輸入，特殊符號輸入，空格輸入等，這些功能反復使用，做成指令的形式，直接調用，非常方便，上代碼：

目錄結構很簡單：

　　1、項目文件夾里新建directives文件夾，所有指令都放在這個文件夾里

　　2、input-filter文件夾放具體指令，在其下建兩個文件：

　　　　a、inputFilter.js實現主體功能

　　　　b、index.js負責封裝，職責分明

inputFilter.js代碼：

/**
 *  實現功能
 *  1、默認情況下只禁止空格輸入
 *  2、限制只能輸入整數
 *  3、限制只能輸入整數和小數（價格類）
 *  4、限制只能輸入手機號
 *  5、限制最大值和最小值(拋出錯誤給回調函數)
 */
const addListener = function(el, type, fn) {
  el.addEventListener(type, fn, false)
}
const spaceFilter = function(el) {
  addListener(el, 'keyup', () => {
    el.value = el.value.replace(/\s+/, '')
  })
}
const intFilter = function(el) {
  addListener(el, 'keyup', () => {
    el.value = el.value.replace(/\D/g, '')
  })
}
const priceFilter = function(el) {
  addListener(el, 'keyup', () => {
    el.value = el.value.replace(/[^\d.]*/g, '')
    if (isNaN(el.value)) {
      el.value = ''
    }
  })
}
const specialFilter = function(el) {
  addListener(el, 'keyup', () => {
    el.value = el.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '')
  })
}
const phoneFilter = function(el) {
  addListener(el, 'blur', () => {
    if (!el.value) {
      return
    }
    const phoneReg = new RegExp('^(13|14|15|16|17|18|19)[0-9]{9}$')
    if (!phoneReg.test(el.value)) {
      alert('手機號輸入錯誤')
      el.value = ''
    }
  })
}
const urlFilter = function(el) {
  addListener(el, 'blur', () => {
    if (!el.value) {
      return
    }
    const urlReg = /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
    if (!urlReg.test(el.value)) {
      alert('url輸入錯誤')
      el.value = ''
    }
  })
}
export default {
  bind(el, binding) {
    if (el.tagName.toLowerCase() !== 'input') {
      el = el.getElementsByTagName('input')[0]
    }
    spaceFilter(el)
    switch (binding.arg) {
      case 'int':
        intFilter(el)
        break
      case 'price':
        priceFilter(el)
        break
      case 'special':
        specialFilter(el)
        break
      case 'phone':
        phoneFilter(el)
        break
      case 'url':
        urlFilter(el)
        break
      default:
        break
    }
  }
}

　　

index.js代碼：

import inputFilter from './inputFilter'

const install = function(Vue) {
  Vue.directive('inputFilter', inputFilter)
}

if (window.Vue) {
  window.inputFilter = inputFilter
  Vue.use(install)
}

inputFilter.install = install
export default inputFilter

　　

組件引用：

import inputFilter from '@/directives/input-filter/index.js'  // 引入

<el-input v-input-filter v-model="inputSpaceFilter" placeholder="空格無法輸入"></el-input>
<el-input v-input-filter:int v-model="inputIntFilter" placeholder="只能輸入整數"></el-input>
<el-input v-input-filter:price v-model="inputPriceFilter" placeholder="只能輸入價格"></el-input>
<el-input v-input-filter:special v-model="inputSpecialFilter" placeholder="過濾特殊字符"></el-input>
<el-input v-input-filter:phone v-model="inputPhoneFilter" placeholder="只能輸入手機號"></el-input>
<el-input v-input-filter:url v-model="inputUrlFilter" placeholder="只能輸入網址"></el-input>

export default {
  directives: {
    inputFilter
  }
}

　　

　　

效果圖：