文本輸入框輸入整數(shù)槽唾、x位小數(shù)

后臺開發(fā)常遇到只能輸入整數(shù)、x位小數(shù)光涂，有些ui庫有寫好的組件庞萍，有些ui庫又沒有，索性封裝一下

原因：

  1. 使用type="number"的輸入框忘闻，框內(nèi)會有2個小箭頭钝计，產(chǎn)品不想看到2個小箭頭
  2. 項目使用的ui庫輸入框組件沒有控制精度的字段，且數(shù)字輸入框組件不符合要求
  3. 通過監(jiān)聽事件把輸入值parseInt/parseFloat/toFixed，在交互上讓人感覺很突兀

需求：

  1. 正常輸入私恬，不通過失去焦點或防抖那種改變輸入的值交播，要在輸入時就限制
  2. 可以輸入正/負整數(shù)、正/負浮點數(shù)
  3. 數(shù)值精度可以自己控制
  4. 可已控制最大和最小輸入的值
  5. 多位整數(shù)開頭不能為0践付，浮點數(shù)多整數(shù)位開頭不能為0秦士，正浮點數(shù)小于1/負浮點數(shù)大于-1整數(shù)位0不能重復(fù)
  6. 開頭不能是.號

使用：

// 使用element的input組件
<el-input @input="onInput" v-model="input" placeholder="請輸入內(nèi)容"></el-input>

完整版

// methods
onInput(val) {
  this.input = this.handleInput(val, 2, 100, -500); // 完整版
  // this.input = this.handleInput_1(val, 2, 100, 0); // 正數(shù)
  // this.input = this.handleInput_1(val, 0, 100, 0); // 正數(shù)
  // this.input = this.handleInput_2(val, 100, 0); // 正整數(shù)
  // this.input = this.handleInput_3(val, 2, 100, 0); // 正浮點數(shù)
  // this.input = this.handleInput_4(val, 0, 100, -500); // 負數(shù)
  // this.input = this.handleInput_5(val, 100, -500); // 負整數(shù)
  // this.input = this.handleInput_6(val, 2, 100, -500); // 負浮點數(shù)
},
handleInput(val, precision = 0, max, min) {
  // 用構(gòu)造函數(shù)創(chuàng)建，是方便使用字符模板永高，而\\轉(zhuǎn)義符號隧土，是因為構(gòu)造函數(shù)創(chuàng)建正則，字符串會轉(zhuǎn)義一次而正則又會轉(zhuǎn)義一次
  const regexp = new RegExp(`^(-)*(\\d+)\\.(\\d{0,${precision}}).*$`); 
  let str = String(val);
  str = str.replace(/^[^-\d]/, ""); // 保證負號和數(shù)字開頭
  if (str.search(/^-/) > -1) { // 負數(shù)
    if (precision > 0) { // 負浮點數(shù)
       str = str
          .replace(/[^-\d\.]/g, "") // 負浮點數(shù)只能輸入3種字符： -號 .號 數(shù)字
          .replace("-", "減號") // 標識第一個-號 沒用正則只會匹配一個 隨便怎么標識 用'傻逼'都行
          .replace(/-/g, "") // 正則匹配-并刪除 第一個-號被標識成了'減號'所以被保留
          .replace(/減號\./, "減號") // 保證標識的-號后面是數(shù)字 如果是.號就刪除
          .replace(".", "點號") // 標識第一個正確輸入的.號
          .replace(/\./g, "") // 刪除多余的.號
          .replace("減號", "-") // 將標識轉(zhuǎn)為正確的字符
          .replace("點號", ".") // 同上
          .replace(regexp, "$1$2.$3") // 完成 - 匹配正確的數(shù)字（$1命爬、$2曹傀、$3...是使用正則組匹配，忘了去翻資料）
          .replace(/^-(0+)(\d+)(\..)?/, "-$2$3") // 拓展 - 小于-1的浮點數(shù)開頭不能為0
          .replace(/^-(0+)(\..)?/, "-0$2"); // 拓展 - 大于-1的浮點數(shù)0不能重復(fù)
    } else { // 負整數(shù)
       str = str
          .replace(/[^-\d]/g, "") // 負整數(shù)只能輸入2種字符： -號 數(shù)字
          .replace("-", "減號")
          .replace(/-/g, "")
          .replace(/減號\./, "減號")
          .replace("減號", "-")
          .replace(/^-(0+)(\d+)/, "-$2");  // 多位整數(shù)開頭不能為0
    }
  } else { // 正數(shù)
    if (precision > 0) { // 正浮點數(shù)
       str = str
          .replace(/[^\d\.]/g, "") // 正浮點數(shù)只能輸入2種字符： .號 數(shù)字
          .replace(".", "點號")
          .replace(/\./g, "")
          .replace("點號", ".")
          .replace(regexp, "$1$2.$3")
          .replace(/^(0+)(\d+)/, "$2"); // 小于1的浮點數(shù)開頭0不能重復(fù)
    } else { // 正整數(shù)
       str = str
          .replace(/[^\d]/g, "") // 正整數(shù)只能輸入1種字符： 數(shù)字
          .replace(/^(0+)(\d+)/, "$2"); // 多位整數(shù)開頭不能為0
    }
  }
  if (min > str || str > max) str = ""; // 控制最終結(jié)果的在傳入的范圍內(nèi)
  return str;
}

正數(shù)

handleInput_1(val, precision = 0, max, min) {
  const regexp = new RegExp(`^(\\d+)\\.(\\d{0,${precision}}).*$`);
  let str = String(val);
  if (precision > 0) {
    str = str
      .replace(/^[^\d]/g, "")  // 保證數(shù)字開頭
      .replace(/[^\d\.]/g, "")
      .replace(".", "點號")
      .replace(/\./g, "")
      .replace("點號", ".")
      .replace(regexp, "$1.$2")
      .replace(/^(0+)(\d+)/, "$2");
  } else {
    str = str
      .replace(/[^\d]/g, "")
      .replace(/^(0+)(\d+)/, "$2");
  }
  if (min > str || str > max) str = "";
  return str;
}

正整數(shù)

handleInput_2(val, max, min) {
  let str = String(val);
  str = str
    .replace(/[^\d]/g, "") // 所有正整數(shù)
    .replace(/^(0+)(\d+)/, "$2");
  // str.replace(/[^1-9]]/g, "")  // 大于0的正整數(shù)
  if (min > str || str > max) str = "";
  return str;
}

正浮點數(shù)

 handleInput_3(val, precision = 2, max, min) { // 一般是保留2位
  const regexp = new RegExp(`^(\\d+)\\.(\\d{0,${precision}}).*$`);
  let str = String(val);
  str = str
    .replace(/^[^\d]/g, "")
    .replace(/[^\d\.]/g, "")
    .replace(".", "點號")
    .replace(/\./g, "")
    .replace("點號", ".")
    .replace(regexp, "$1.$2")
    .replace(/^(0+)(\d+)/, "$2");
  if (min > str || str > max) str = "";
  return str;
}

負數(shù)

handleInput_4(val, precision = 0, max, min) {
  const regexp = new RegExp(`^(-)(\\d+)\\.(\\d{0,${precision}}).*$`);
  let str = String(val);
  str = str.replace(/^[^-]/, "");
  if (precision > 0) {
    str = str
      .replace(/[^-\d\.]/g, "")
      .replace("-", "減號")
      .replace(/-/g, "")
      .replace(/減號\./, "減號")
      .replace(".", "點號")
      .replace(/\./g, "")
      .replace("減號", "-")
      .replace("點號", ".")
      .replace(regexp, "$1$2.$3")
      .replace(/^-(0+)(\d+)(\..)?/, "-$2$3")
      .replace(/^-(0+)(\..)?/, "-0$2");
  } else {
    str = str
      .replace(/[^-\d]/g, "")
      .replace("-", "減號")
      .replace(/-/g, "")
      .replace(/減號\./, "減號")
      .replace("減號", "-")
      .replace(/^-(0+)(\d+)/, "-$2");
  }
  if (min > str || str > max) str = "";
  return str;
}

負整數(shù)

handleInput_5(val, max, min) {
  let str = String(val);
  str = str
    .replace(/^[^-]/, "")
    .replace(/[^-\d]/g, "")
    .replace("-", "減號")
    .replace(/-/g, "")
    .replace(/減號\./, "減號")
    .replace("減號", "-")
    .replace(/^-(0+)(\d+)/, "-$2");
  if (min > str || str > max) str = "";
  return str;
}

負浮點數(shù)

handleInput_6(val, precision = 2, max, min) {  // 一般是保留2位
  const regexp = new RegExp(`^(-)(\\d+)\\.(\\d{0,${precision}}).*$`);
  let str = String(val);
  str = str
    .replace(/^[^-]/, "")
    .replace(/[^-\d\.]/g, "")
    .replace("-", "減號")
    .replace(/-/g, "")
    .replace(/減號\./, "減號")
    .replace(".", "點號")
    .replace(/\./g, "")
    .replace("減號", "-")
    .replace("點號", ".")
    .replace(regexp, "$1$2.$3")
    .replace(/^-(0+)(\d+)(\..)?/, "-$2$3")
    .replace(/^-(0+)(\..)?/, "-0$2");
  if (min > str || str > max) str = "";
  return str;
}

問題：

  1. 負數(shù)只輸入-的情況
  2. 浮點數(shù)點可能會有xxx.的情況
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末饲宛，一起剝皮案震驚了整個濱河市皆愉，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌艇抠，老刑警劉巖幕庐，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異家淤，居然都是意外死亡异剥，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門絮重，熙熙樓的掌柜王于貴愁眉苦臉地迎上來冤寿，“玉大人，你說我怎么就攤上這事青伤《搅” “怎么了？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵狠角，是天一觀的道長号杠。 經(jīng)常有香客問我，道長擎厢，這世上最難降的妖魔是什么究流？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任辣吃，我火速辦了婚禮动遭，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘神得。我一直安慰自己厘惦，他們只是感情好，可當我...
    茶點故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著宵蕉，像睡著了一般酝静。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上羡玛，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天别智，我揣著相機與錄音，去河邊找鬼稼稿。 笑死薄榛，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的让歼。 我是一名探鬼主播敞恋，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼谋右！你這毒婦竟也來了硬猫？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤改执，失蹤者是張志新（化名）和其女友劉穎啸蜜，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辈挂，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡盔性，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了呢岗。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片冕香。...
    茶點故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖后豫，靈堂內(nèi)的尸體忽然破棺而出悉尾，到底是詐尸還是另有隱情，我是刑警寧澤挫酿，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布构眯，位于F島的核電站，受9級特大地震影響早龟，放射性物質(zhì)發(fā)生泄漏惫霸。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一葱弟、第九天 我趴在偏房一處隱蔽的房頂上張望壹店。 院中可真熱鬧，春花似錦芝加、人聲如沸硅卢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽将塑。三九已至脉顿，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間点寥，已是汗流浹背艾疟。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留敢辩，地道東北人汉柒。 一個月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像责鳍，于是被迫代替她去往敵國和親碾褂。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2贊 345