控制el-input只输入数字的几种方式

• 前端

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

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

有三个问题：

1.键盘先输入数字时没有问题，数字后面不会有字符

2.如果先输入的是字符再输入数字则是拼接效果，字符不会被排除且可以输入中文，如：ab123

3.以上两种都不会排除e，如e123, 123e

总结：

v-model.number 只能满足先输入数字且不能排除e，所以需要结合其他方式一起使用

二、 type=“number”

需要结合css样式，去掉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进行正则判断

经过测试，以上方式，在输入了中文之后会出现取值不对的bug

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

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/a343f8e7fe.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐