el-input在vue中实现禁止输入特殊字符

前提补充

在vue中

<input v-model="text" />

等价于

<input :value="text" @input="e => text = e.target.value" />

需求

前端提交form表单要求，不能输入 @#¥%……&*…
不是提示，而是 禁止输入

效果

代码

** 在mian.js中添加【vue原型上添加方法，便于全局使用】

Vue.prototype.validForbid = function (value, number = 255) { value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, ""); if (value.length >= number) { this.$message({ type: "warning", message: `输入内容不能超过${number}个字符` }); } return value; } 

 

** 在component.vue中加入

<el-input :value="form.name" @input="e => form.name = validSe(e)" maxlength="10" placeholder="过滤特殊字符长度10" ></el-input> 

 

over