在el-input中添加onkeyup使用中文输入法导致验证失效

高电平

已于 2022-08-07 09:31:24 修改

阅读量2.3k

点赞数 6

文章标签： vue.js javascript 前端

于 2022-08-07 09:30:50 首次发布

本文链接：https://blog.csdn.net/qq_45886144/article/details/126206463

版权

由于需求需要对el-input添加输入校验，只允许用户输入数字，其他内容输不上去，我采用了在中添加onkeyup ="value=value.replace(/[ ^ 0-9.]/g,‘’)"来对输入进行校验，

onkeyup ="value=value.replace(/[^0-9.]/g,'')"

当输入为非数字时会被""替换掉，但是使用中文输入法时，虽然也能过滤非数字，但是过滤之后表单的非空验证不通过

查阅很多资料后改为：

//value.replace前为<el-input>绑定的变量名
@input ="value => editproduct.productPriceShipment=value.replace(/[^0-9.]/g,'')"，

之前只是将el-input中的值替换为空，在中文输入法的情况下替换后，里面的值变为了一个新的变量，表单校验监听不到这个新的变量，所以会不通过校验，更改后将替换后的变量赋给el-input绑定的变量，再把它回调给el-input的value，这样就能监听到这个替换后的变量了

关注