vue 控制用户只能输入正整数的方法

在工作中遇到一个问题，台端接口只能接收正整数的数据，中文，小数点，特殊字符等其他数据形式都会报错

经过一番查找，找到一个能使用的方法

在行内添加正则控制，如下所示：

 <el-input v-model="dataList"style="width: 80%"placeholder="请输入数据"oninput="value=value.replace(/[^\d]/g,'')"></el-input>

这个方法确实能达到想要的效果，所有非正整数的内容都无法输入。但是在测试中发现，这个办法会时不时的与v-model绑定断开，造成功能无法使用。

所以我在这个方法的思路上进行了改造，改成了下面这样：

watch: {dataList (val) {this.dbPort = val.replace(/\D/g, '')}},

使用watch进行数据监听，同样能达到我想要的效果，而且经过测试也没有出现与model无法绑定的现象。

注：此方法只适用于单一数据进行控制或者多个数据不同控制条件时使用，多个数据相同控制条件不建议这样写，浪费时间。

前端小白一只，致力于分享工作中遇到的问题，如果有写的不对的地方请大神指正，如果对你有帮助请点个赞，万分感谢！

vue 控制用户只能输入正整数的方法相关推荐

正则表达式限制VUE input只能输入正整数
正则表达式限制VUE input只能输入正整数在vue input 输入框的实际应用中,好多地方都需要限制其输入的内容. 正则表达式在我们进行输入是即可对输入内容做一个限制,后期校验也更加方便. 就 ...
键盘事件介绍——onKeyPress-输入字母和数字、onKeyUp-放开任何按键、onKeyDown-按下任何按键 el-input 只能输入正整数验证并限制长度
键盘事件介绍--onKeyPress-输入字母和数字.onKeyUp-放开任何按键.onKeyDown-按下任何按键 & el-input 只能输入正整数验证并限制长度 1.onKeyPres ...
限制input输入小数只能到3位或者只能输入正整数(兼容ios)
我们在做表单输入时,有时候对于有些输入比较有限制,比如输入天数必须为正整数,再比如有些特殊需求需要输入保留小数点的后面n位.那么我们如何在输入环节就限制用户的输入情况呢? 我们可以用正则表达式来限制. ...
input框限制只能输入正整数、字母、小数、汉字
input框限制只能输入正整数.字母.小数.汉字有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数代码如下: & ...
input输入框只能输入正整数
input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" οnkeyup="i ...
html number输入框限制只能输入正整数或两位小数的正数
限制只能输入两位小数的正数: <label class="col-xs-2 control-label">订单金额:</label> <div cla ...
正则表达式只能输入正整数、只能输入数字
1. 只能输入正整数: var zz2 = new RegExp("^[0-9]*[1-9][0-9]*$");// zz2 必须为正整数 console.log(zz2.test ...
js控制input只能输入数字和小数点后两位，输入其他自动清除方法。
工作中input='text'总会遇到要控制输入数字,或者是输入中文,输入电话,输入身份证号,邮箱等.今天我遇到的是要输入数字并且只能小数点后面两位的数字,还不能为负数.废话不多说上代码: <i ...
php限制只能输入中文,JS控制Input只能输入数字，汉字，英文的限制方法
2 楼 shuke[2013-10-30 14:05] 以上是图片替代 SUBMIT提交的方法, 正则表达式限制文本框只能输入数字许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则 ...

vue 控制用户只能输入正整数的方法

在工作中遇到一个问题，台端接口只能接收正整数的数据，中文，小数点，特殊字符等其他数据形式都会报错

vue 控制用户只能输入正整数的方法相关推荐

最新文章

热门文章