输入框不满足正则不让输入

需求:
1、输入值保留两位小数
2、最大输入8位数并且保留两位小数
3、不允许输入非数字字符

<a-input v-model="value" placeholder="请输入" :max-length="11" @blur="inputBlur" @change="limitNumber" />

limitNumber() {
  value = value.replace(/[^\d.]/g, '');  // 清除"数字"和"."以外的字符 只能输入数字和小数点
  
  value= value.replace(/\.{2,}/g, '.');   // 不能连续输入两个及以上小数点

  value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');  // 只保留第一个".", 清除多余的"."

  value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');  /// 只能输入位小数
  
  // 如果在第八位没有点就自动加上 '.00'
  if (value.split('')[8] !== '.' && value.length > 8) {
    value = value.substring(0, 8) + '.00';
  }
},

inputBlur() {
    //  如果输入有值并且没有小数点且长度小于8自动补 '.00'
  if (value.indexOf('.') == -1 && value.length <= 8 && value != '') {
    value =value + '.00';
  }
  value = Number(value).toFixed(2);
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一. 前言 我们在项目开发中很经常会碰到各种对输入框的限制需求,比如姓名最多只能10字符,密码最多只能16个字符,...
    林大鹏阅读 1,273评论 0 18
  • 输入框用例设计原则: 1.公司内部运营后台以正常功能校验为主,辅以常见异常校验(提示语不会产生误解即可) 2.针对...
    宝贝窝3阅读 3,710评论 2 1
  • 涉及金钱使用:只能录入数字,并且录入的数字最多保留二位小数。不会以0开头,自动转为0.。小数点只能输入一个且之后只...
    EQD阅读 1,601评论 0 2
  • 正则表达式(Java版整理) 基础 元字符 重复 字符类 想查找数字,字母或数字,空白是很简单的,因为已经有了对应...
    NowBurn阅读 1,054评论 0 1
  • 输入大小写字母、数字、下划线: 输入小写字母、数字、下划线: 输入数字和点 输入中文: 输入数字: 输入英文: 输...
    叶叶叶xxx阅读 3,272评论 0 2