自定义指令实现文本框正则校验--只能输入数字

// 校验文本框--只能输入数字，且可以规定最小值，最大值
Vue.directive('validateNumber', {
    /**
     * @param el 
     * @param binding 可选，绑定表达式，允许输入{ min: 1, max: 10 }
     * @param vnode 虚拟dom
     */
    bind(el, binding, vnode) {
        let lastData = null
        el.onkeyup = (e) => {
        	// 不允许输入E
            if (String.fromCharCode(e.keyCode) == 'E' || String.fromCharCode(e.keyCode) == 'KeyE') {
                e.target.value = lastData
                return false
            } else {
                lastData = e.target.value
            }
            e.target.value = e.target.value.replace(/[^\d]/ig, '')
            
            if (!!binding.expression && !!e.target.value) {
                let obj = (new Function("return " + binding.expression))()
                let keys = Object.keys(obj)
                let values = Object.values(obj)
                if (keys[0] == 'min') {
                    if (e.target.value < values[0]) 
                        e.target.value = values[0]
                }
                if (keys[1] == 'max') {
                    if (e.target.value > values[1])
                        e.target.value = values[1]
                }
            }
			
			// 双向数据绑定，为了避免出现文本框中显示的内容已被修改，但是提交的数据仍旧是旧数据的情况
            let _this = vnode.context // vnode.context上下文就是当前组件的 vue 实例。
            _this.accessNestedObject(_this, vnode.data.model.expression, e.target.value)
        }
        
    }
})
Vue.prototype.accessNestedObject = function (obj, path, value) {
    let keys = path.split('.');
    let key = keys[0];
    if (keys.length > 1) {
        this.accessNestedObject(obj[key], keys.slice(1).join('.'), value);
    } else {
        obj[key] = value;
    }
    return obj;
}

// 例子1，只能输入数字，且最小值为1，最大值为31
<el-input v-model="cron.day" v-validateNumber="{ min: 1, max: 31 }" class="cron-input-width"></el-input>
// 例子2，只能输入数字，且最小值为1
<el-input v-model="cron.day" v-validateNumber="{ min: 1 }" class="cron-input-width"></el-input>
// 例子3，只能输入数字
<el-input v-model="cron.day" v-validateNumber class="cron-input-width"></el-input>