需求 前端提交form表单要求,不能输入 @#¥%……&*… 不是提示,而是 禁止输入 效果 代码 ** 在mian.j">

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

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

前提补充

在vue中

等价于

: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中加入

:value="form.name"

@input="e => form.name = validSe(e)"

maxlength="10"

placeholder="过滤特殊字符长度10"

>

over

听说你要在线测试⁉️ 那就点我?吧

风雨相关