输入框指令,支持字节数限制;特殊字符禁止输入;特殊正则验证及回调
import Vue from 'vue'
const SPC_CHAR_REG = '[`~!@#$%^&*()+=<>?{}|·~!¥……()|《》?【】]'
const GBK_BYTE = 3
const NOMAL_BYTE = 1
Vue.directive('restrict', {
bind: function (el, binding) {
const dom = el.querySelector('input') || el.querySelector('textarea')
const maxByteLength = binding.value.maxLength
const specailCharRestrict = binding.value.specailCharRestrict ? binding.value.specailCharRestrict : true
const letter = binding.value.letter ? binding.value.letter : false
const errorCb = binding.value.errorCb
let regExp
if (binding.value.regExp instanceof RegExp) {
regExp = binding.value.regExp
}
if (!dom) return
el.dom = dom
el.specailCharRestrict = specailCharRestrict
el.letter = letter
el.regExp = regExp
const $$sliceByByte = (e) => {
const limitStr = sliceByByte(e.target.value, maxByteLength)
if (limitStr) {
let value = e.target.value
dom.value = value.slice(0, limitStr.length)
}
}
const $$trim = (e) => {
dom.value = e.target.value.trim()
}
const $$restrictSpecialChar = (e) => {
const reg = new RegExp(SPC_CHAR_REG)
dom.value = e.target.value.replace(reg, '')
}
const $$englishLetter = (e) => {
const reg = new RegExp(/^[a-zA-Z]+$/)
dom.value = e.target.value.replace(reg, '')
console.log(reg)
}
const $$regexpTest = (e) => {
if (!regExp.test(e.target.value)) {
dom.value = ''
errorCb && errorCb()
}
}
el.inputCb = (e) => {
console.log('限制特殊字符:' + el.specailCharRestrict)
console.log('限制英文字母:' + el.letter)
$$sliceByByte(e)
el.specailCharRestrict && $$restrictSpecialChar(e)
el.letter && $$englishLetter(e)
dom.dispatchEvent(new Event('input'))
}
el.changeCb = (e) => {
$$trim(e)
el.regExp && $$regexpTest(e)
dom.dispatchEvent(new Event('input'))
}
el.dom.addEventListener('keyup', el.inputCb)
el.dom.addEventListener('paste', el.inputCb)
el.dom.addEventListener('compositionend', el.inputCb)
el.dom.addEventListener('change', el.changeCb)
},
unbind (el) {
el.dom.removeEventListener('keyup', el.inputCb)
el.dom.removeEventListener('paste', el.changeCb)
el.dom.removeEventListener('compositionend', el.changeCb)
el.dom.removeEventListener('change', el.changeCb)
}
})
const sliceByByte = (str, maxByteLength) => {
let byteLength = 0
for (let i = 0, len = str.length; i < len; i++) {
let charCode = str.charCodeAt(i)
byteLength += (charCode >= 0 && charCode <= 128) ? NOMAL_BYTE : GBK_BYTE
if (byteLength > maxByteLength) {
return str.slice(0, i)
}
}
return null
}