vue指令规范 input 输入

import Vue from 'vue'

const regTyps = {
    noSpecial: /[^a-zA-Z0-9\u4E00-\u9FA5\u3400-\u4DBF_@.·-\s]/g,
}

Vue.directive('regFilter', {
    inserted: function (el, binding) {
        if (binding.value) {
            let [ruleNames, vue] = binding.value
            el.oninput = (e) => {
                let warnings = ruleNames.reduce((pre, cur) => {
                    let c = e.target.value.match(regTyps[cur])
                    return pre + (c ? c[0] : '')
                }, '')
                if (warnings) {
                    // vue.$message.destroy()
                    // vue.$message.warning(`不能输入 ${warnings[0]}`)
                    ruleNames.forEach(ruleName => {
                        e.target.value = e.target.value.replace(regTyps[ruleName], '')
                    })

                    e.target.dispatchEvent(
                        new InputEvent('input', {
                            bubbles: true,
                            cancelable: true
                        })
                    )
                }
            }
        }
    },
    unbind: function (el) {
        el.oninput = null
    }
})

2024.05.31 上面的方法在使用微软输入法时会存在问题，下面的方法更稳定

/**
* @ fileOverview 指令，方便输入框限制
*
*/
/* eslint-disable */
import Vue from 'vue'
import vue from '@/main.js'

const regTyps = {
    noSpecial: /[^a-zA-Z0-9\u4E00-\u9FA5\u3400-\u4DBF_@.·-\s]/g
}

Vue.directive('regFilter', {
    inserted: function (el, binding) {
        if (!binding.value || binding.value.length !== 3) return
        let rules = binding.value[0].split(',')
        let obj = binding.value[1]
        let field = binding.value[2]
        el.oninput = () => {
            // console.log('obj[field]', obj[field])
            let warnings = rules.reduce((pre, cur) => {
                let c = obj[field].match(regTyps[cur])
                return pre + (c ? c.join('') : '')
            }, '')
            // console.log('warnings', warnings)
            if (warnings) {
                warnings = Array.from(new Set(warnings.split(''))).join('')
                vue.$message.destroy()
                vue.$message.warning(`${vue.$t('common.cannotInput')} ${warnings}`)
                rules.forEach(rule => {
                    obj[field] = obj[field].replace(regTyps[rule], '')
                })
            }
        }
    },
    unbind: function (el) {
        el.oninput = null
    }
})

<a-input v-regFilter="['noSpecial', searchForm, 'name']" v-model="searchForm.name">
</a-input>