Vue 自定义指令输入校验过滤

/*** 过滤字符串* @param {*} filterCharRule* @param {*} newVal* @returns*/
function filterCharForValue(filterCharRule, newVal) {if(!filterCharRule || !newVal) returnconst isArray = filterCharRule instanceof Arrayconst isRegExp = filterCharRule instanceof RegExpif (isArray) {for (let i = 0; i < filterCharRule.length; i++) {const ele = filterCharRule[i]const regrex = new RegExp(ele, 'g')newVal = String(newVal).replace(regrex, '')}} else if (isRegExp) {newVal = String(newVal).replace(filterCharRule, '')}return newVal
}/*** 转换大小写* @param {*} type* @param {*} newVal* @returns*/
function transformCharCase(type, newVal) {if (!type || !['upper', 'lower'].includes(type)) return newValif (type === 'upper') {newVal = newVal.toLocaleUpperCase()} else {newVal = newVal.toLocaleLowerCase()}return newVal
}/*** 获取光标当前位置* @param {*} inputNode* @returns*/
function getInputCursorPos(inputNode) {if (!inputNode) return 0return inputNode.selectionStart || 0 // 记录当前光标位置
}/*** 修正输入光标* @param {*} inputNode* @param {*} result* @param {*} newVal* @returns*/
function fixInputCursorPos(inputNode, result, newVal) {if (result === newVal) returnif(inputNode !== document.activeElement) return // 没focus绝对不能修正，因为会setSelectionRange，导致某些场景永远失焦不了// 因为filterCharForValue和transformCharCase会导致光标踢到末尾去，所以需要修正光标let cursorPos = getInputCursorPos(inputNode)// 修正偏移 - 记录原来光标位置// 如果filterCharForValue过滤了某些字符，比如银行卡号输入框不允许输入`.`，光标这时取到的还会是`.`之后的坐标，所以需要修正// 如果为经过formatterInput前的值，经过formatterInput之后的值去格式化后不相同，才需要偏移cursorPos -= newVal.length - result.length// 修正偏移 - 移动光标到正确位置setTimeout(() => {if (!inputNode) return 0// 有些类型比如type为email，不支持这个方法，不支持就罢了try {inputNode.setSelectionRange(cursorPos, cursorPos)// eslint-disable-next-line no-empty} catch {}})
}export default {bind() {},inserted() {},update(el, binding, vnode) {const rule = binding.value // 规则const modifiers = binding.modifiers // 默认是 {}const currentValue = vnode.data.model.valueconst maxValue = vnode.data.attrs['max-value']const minValue = +vnode.data.attrs['min-value']if(currentValue === '' || currentValue === undefined ) returnlet result = ''if(rule) {result = filterCharForValue(rule, currentValue)if((modifiers.upper || modifiers.lower) && result) {Object.keys(modifiers).forEach((key) => {result = transformCharCase(key, result)})}const targetResult = + resultif(!!el.__previousValue && !isNaN(targetResult) && (minValue || maxValue)) {if(minValue && targetResult < minValue) {result = el.__previousValue}if(maxValue && targetResult > maxValue) {result = el.__previousValue}}} else {if((modifiers.upper || modifiers.lower)) {Object.keys(modifiers).forEach((key) => {result = transformCharCase(key, currentValue)})}}if(result !== currentValue) {el.__previousValue = resultfixInputCursorPos(el.children[0], result, currentValue)vnode.componentInstance.$emit('input', result)} else {el.__previousValue = currentValue}},componentUpdated() {},unbind() {}
}

使用：

  // 只允许输入字母和数字， 字母转成大写v-filter-char.upper="/[^\da-zA-Z]/g"