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