在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vuejs限制input框只能輸入0-100的數(shù)字

vuejs限制input框只能輸入0-100的數(shù)字

 loadNumber: function (event) {
        var el = event.currentTarget;
        var elValue = el.value;
        var reg = /^((?!0)\d{1,2}|100)$/;
        if (!elValue.match(reg)) {
            elValue = "";
            console.log("b")
            return false;
        } else {
            return true;
        }

    }

我做的是用正則判斷后重新賦值，問題出在不能重新賦值

  <input v-model="UploadInfoModel.ER" @keyup="loadNumber($event)" />
回答
編輯回答
兔囡囡

親測完美解決 并且限制除數(shù)字以外一切字符的輸入
computed 計(jì)算屬性的 getter setter 是很有用的屬性

<input type=text v-model="value2">
data() {
    return {
      value1: "10"
    };
  },
  computed: {
    value2: {
      get() {
        var  value = this.value1.replace(/[^\d]+/g, '');
        if(value<=0){
          return 0
        }else if(value>=100){
          return 100
        }else{
          return value
        }
      },
      set(val) {
        this.value1 = val;
      }
    }
  },
2018年5月12日 12:11
編輯回答
黑與白

嘗試拆分v-model為@input="function" :value="UploadInfoModel.ER"
另外，你這個@keyup的響應(yīng)方法return true是要干嘛

2018年5月15日 03:56
編輯回答
遺莣

我這有個方法,可以限制,這個是JQuery版本的,你看合用不.
這個方法 解決了:輸入法輸入 粘貼 直接輸入 不符合要求字符的問題,并且提供自定義最大值和最小值的功能.

<input type="text" data-target="1" data-min="0" data-max="5" style="width:54px" class="number-box">
            $(".number-box").on("input",function(event){
                var e=event.originalEvent || event;
                var old=e.target.value;
                var min=parseInt(e.target.dataset.min),max=parseInt(e.target.dataset.max);
                if(e.data && !isNaN(old)){
                    //console.info(old,min,max,old>max || old<min);
                    if(old>max || old<min){
                        e.target.value=old.substring(0,old.length-1);
                    }else{
                        e.target.value=parseInt(old);
                    }
                }else{
                    var tmp;
                    for(var i=old.length;i>0;i--){
                        tmp=old.substring(0,i);
                        //console.info(tmp)
                        if(!isNaN(tmp) && tmp<=max && tmp>=min){
                            e.target.value=tmp;
                            break;
                        }
                        if(tmp.length==1)e.target.value="";
                    }
                }
            });
2017年10月31日 06:02