el-input使用oninput做正则校验之后，v-model不能赋值

Posted 2023-03-24

参考技术A 一个输入框，只能输入数字，必填项（输入除数字之外的任何东西，都不会出现在输入框里）

1.英文输入法按出字母，无法出现在输入框内，此步骤正常
2.失去焦点后，提示此项为必填，此步骤正常
3.输入数字之后提示消失，此步骤正常
4.中文输入法按出词语，无法出现在输入框内，此步骤正常
5.失去焦点后，提示此项为必填，此步骤正常
6.输入数字之后提示不消失，v-model显示为空字符串

在输入中文输入法触发了oninput之后，v-model绑定的值会被赋值为空字符串，这时候再输入数字，依然会被赋值为空字符串

在blur事件中手动赋值

正则校验字母数字特殊字符的函数

关于正则校验字母数字特殊字符的函数相关资料如下
vue 加 elementui的el-input设置只能输入特定字符，比如只能输入数字，字母加数字，汉字加字母：

html代码

<el-input v-model="num"></el-input>
1
1
在watch里监听输入的值：
只能输入数字

watch:
num: function(val)
if(val)
this.num = val.replace(/\D/g,'')

只能输入字母和数字：

watch:
num: function(val)
if(val)
this.num = val.replace(/[^\w]/g,'')

只能输入汉字和字母：

watch:
num: function(val)
var reg = /[\d]|"|<|>|[\（\）\……\~\`\·\|\【\】\》\《\'\!\！\\\#\$\￥\%\^\&\*\(\)\[\]\:\;\：\；\\\‘\’\“\”\,\，\.\。\/\、\?\？\_\——\—\=\+]|@|/g;
if(val)
this.num = val.replace(reg,'')

特殊字符的校验

watch:
num: function(val)
if(val)
this.num = val.replace(/[`~!@#$%^&*+<>\/'[\]]/im,''
加上校验后，不符合要求的值会被清掉。 参考技术A 好的，您好！正则表达式是一种文本模式匹配的工具，它可以用来检查字符串中是否出现了某种特定的模式，比如字母、数字、特殊字符等。它可以帮助我们快速验证一个字符串是否符合我们的要求，从而实现自动化的校验。