vue指令实战：过滤element input输入框中的特殊符号
2018-05-25 本文已影响1556人
爱忽悠的唐唐在晃悠
<!DOCTYPE html>
<html>
<head>
<title>vue实时过滤空格&*%等特殊字符用法</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" v-filter-special-char>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 注册一个全局自定义指令 `不允许输入空格&*%等特殊字符`
Vue.directive('filterSpecialChar', {
update: function (el, { value, modifiers }, vnode) {
try {
//此处可以debug看看el具体值是什么,这里演示的是原生控件input,如果是使用element中的<el-input />标签,需要通过 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:''
}
});
</script>
</body>
</html>
注意，此时不能在v-model后添加修饰符，例如v-model.trim 就会使上面的指令失效，具体原因待研究。
