html文本框中插入特殊符号,vue指令实战：过滤element input输入框中的特殊符号

vue实时过滤空格&*%等特殊字符用法

// 注册一个全局自定义指令 `不允许输入空格&*%等特殊字符`

Vue.directive('filterSpecialChar', {

update: function (el, { value, modifiers }, vnode) {

try {

//此处可以debug看看el具体值是什么,这里演示的是原生控件input,如果是使用element中的标签,需要通过 el.children[0] 拿到原生input.

if(!el.value){

return false;

}

el.value = el.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "");

el.dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))

} catch (e) {

}

}

})

var app = new Vue({

el: '#app',

data:{

name:''

}

});

注意，此时不能在v-model后添加修饰符，例如v-model.trim 就会使上面的指令失效，具体原因待研究。