美文网首页
输入框不满足正则不让输入

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

作者: tenro | 来源:发表于2022-10-10 17:19 被阅读0次

需求:
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);
},

相关文章

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

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

  • Input输入限制

    input输入框限制输入保留两位小数正则

  • 限制input输入框输入的数据

    限制input输入框输入的数据正则匹配的方式替换input的输入数据

  • 正则校验1-28以内的数字

    输入框限制1-28以内的数字 正则校验输入1-28以内的数字 正则校验输入1-31以内的数字

  • Vue element input组件区分中英文统计长度

    接到需求:输入框限字数——10个汉字,或者20个字母 实现逻辑:使用正则表达式判断输入框中文的字符长度,再将剩下的...

  • 输入框随着键盘弹出上移

    有个功能是点击输入框键盘弹出的时候不让遮挡,就是键盘弹起时输入框自动上移,效果如下: 具体实现代码:

  • 关于输入框的细节

    1、输入框类型:包括信息输入框、注册、登录输入框、搜索输入框、原创输入框、对话输入框以及其它; 2、文本输入框使用...

  • 几个关于输入框的细节

    输入框的类型包括信息输入框、注册、登录输入框、搜索输入框、原创输入框、对话输入框等。文本输入框使用场景多,交互频次...

  • input type['number']输入框的一些问题

    由于公司项目需求,要做一个只允许输入数字、最多两位小数的输入框,其他字符直接不让输入,超出也不让输 试了很多种办法...

  • 前端技巧,规范

    H5页面有个很蛋疼的问题就是,当输入框最底部,点击软键盘后输入框会被遮挡。 不让 Android 手机识别邮箱 禁...

网友评论

      本文标题:输入框不满足正则不让输入

      本文链接:https://www.haomeiwen.com/subject/gfvoartx.html