el-input在vue中优雅实现禁止输入特殊字符
前提补充在vue中<input v-model="text" />等价于<input:value="text"@input="e => text = e.target.value"/>需求前端提交form表单要求,不能输入 @#¥%……&*…不是提示,而是 禁止输入效果代码** 在mian.js中添加【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
听说你要在线测试⁉️ 那就点我?吧
更多推荐
已为社区贡献11条内容
所有评论(0)