vue 正则验证 input 输入0-100的正整数 删除input框后面的上下箭头 样式 ant design vue a-input-number标签

//推荐使用 formatter ：

实时验证，输入值大于100时显示100，并且不显示多余的数字；值为空时显示0 ；如果不满足需求你可以在接着改 

 

代码示例：

<a-input-number
 v-model:value="item.rankScore"
 :min="0"
 :max="100"
 :formatter="formatter"
 @change="handleChange(item)"
 style="width: 60px;"
/>

//不推荐使用
//只是增加提示 ，输入框的值在失去焦点的时候变为100，
handleChange(){
    var reg = /^([0-9]{1,2}|100)$/;      //0-100的正整数
    console.log(item.rankScore);
    if(!reg.test(item.rankScore)){
        message.error("只能输入0-100的正整数");
    }
}


//推荐使用： 实时验证，输入值大于100时显示100，并且不显示多余的数字；值为空时显示0 ；如果不满足需求你可以在接着改
formatter(value){
    let reg = /^([0-9]{1,2}|100)$/;  //0-100的正整数
      let reg1 = /\D/g;
      if(reg.test(value)){
        return Number(value.replace(reg1,'')).toLocaleString();
      }else{
        // value = 100
        if(value == ''){
          return 0;
        }else{
          value = 100;
          return value
        }
      }
}




//去除 input输入框后面的小箭头

/deep/.ant-input-number{
  width: 100%;
  height: 100%;
  box-shadow: none;
  .ant-input-number-input-wrap{
    height: 100%;
    input{
      height: 100%;
      text-align: center;
    }
  }
  .ant-input-number-handler-wrap{
    display: none;
  }
}

 

实例二：

需求，只能输入数字 ，并且只能输入0-100的正整数，如果输入大于100的数变为100，禁止输入字母和其他字符，

const formatter = value => {

      let reg = /^([0-9]{1,2}|100)$/;

      let reg1 = /\D/g;

      if(reg.test(value)){

        return Number(value.replace(reg1,'')).toLocaleString();

      }else{

        if(value > 100){ //输入值大于100时返回100

          return 100;

        }else{

          return value.replace(reg1,''); //禁止输入其他字符

        }

      }

    };