控制el-input只输入数字的几种方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了控制el-input只输入数字的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、 v-model.number 指令修饰符

使用v-model.number可以将输入的数据转换为Number类型。但是本质上还是String类型

 <el-input v-model.number="total"></el-input>

有三个问题：
1.键盘先输入数字时没有问题，数字后面不会有字符
2.如果先输入的是字符再输入数字则是拼接效果，字符不会被排除且可以输入中文，如：ab123
3.以上两种都不会排除e，如e123, 123e
总结：
v-model.number 只能满足先输入数字且不能排除e，所以需要结合其他方式一起使用

二、 type=“number”

需要结合css样式，去掉input右边的滚动条

 <el-input v-model="total" type="number"></el-input>

// css
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
}

三、在属性中添加onkeyup或者oninput进行正则判断

<el-input 
    v-model="total" 
    οnkeyup="value=value.replace(/[^\d]/g,0)">
</el-input>

经过测试，以上方式，在输入了中文之后会出现取值不对的bug文章来源地址https://www.toymoban.com/news/detail-535352.html

四、利用表单prop的自定义校验方式

// 校验规则：正整数和0
export const validateNonnegative = () => (rule, value, callback) => {
  if (/^([0]|[1-9][0-9]*)$/.test(value) === false) {
    callback(new Error('请输入一个正确的数值'));
  } else {
    callback();
  }
};