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

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

作者: 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);
    },

    相关文章

      网友评论

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

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