vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)

更新時(shí)間：2024年05月24日 10:19:21 作者：沐卿?

這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)

<el-input v-model.trim="sb.price" placeholder="現(xiàn)價(jià)" class="input_w3"  oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"/>

限制只能輸入1到100，且只能輸入小數(shù)點(diǎn)后二位

<el-input v-model="params.tongZhengPercentage" type="number" placeholder="店鋪抽成占比"   oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); if(value>100)value=100;if(value<0)value=null;if(value<0)value=null;if((value[0] == 0 && value[1] > 0) || value == '00')value=value.slice(1);"/>

只能輸入1到100

<el-input 
    v-model="num" type="number" placeholder="請(qǐng)輸入"   
    oninput="if(!/^[0-9]+$/.test(value)) 
                 value=value.replace(/\D/g,'');
             if(value>100)
                 value=100;
             if(value<0)
                 value=null" 
/>

嘎嘎簡(jiǎn)單、、、、、、、、、

vue只能輸入數(shù)字和倆位小數(shù)的自定義指令

/**
 * 限制輸入框只能輸入n為小數(shù)
 */
export const inputLimt = {
  bind(el, binding) {
    var wins_0 = /[^\d]/g //整數(shù)判斷
    var wins_1 = /[^\d^\.]/g //小數(shù)判斷
    var flag = true;
    var points = 0;
    var lengths = 0
    var remainder = 0
    var no_int = 0
    const target = el instanceof HTMLInputElement ? el : el.querySelector("input");
    target.addEventListener("compositionstart", e => {
      flag = false;
    });
    target.addEventListener("compositionend", e => {
      flag = true;
    });
    target.addEventListener("input", e => {
      setTimeout(function () {
        if (flag) {
          if (binding.value == 0) {
            if (wins_0.test(e.target.value)) {
              e.target.value = e.target.value.replace(wins_0, "");
              e.target.dispatchEvent(new Event("input")) //手動(dòng)更新v-model值
            }
          }
          if (binding.value == 1) {
            if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
              remainder = true
            }
            if ((e.target.value.split('.')).length - 1 > 1) {
              points = true
            }
            if (e.target.value.toString().split(".")[1] != undefined) {
              if (e.target.value.toString().split(".")[1].length > 1) {
                lengths = true
              }
            }
            if (e.target.value.toString().indexOf(".") != -1) {
              no_int = false
            } else {
              no_int = true
            }
            if (wins_1.test(e.target.value) || lengths || points || remainder) {
              if (!no_int) {
                e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
                    '$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
                    ".") + 2)
              } else {
                e.target.value = e.target.value.replace(wins_0, "")
              }
              e.target.dispatchEvent(new Event("input"))
            }
          }
          if (binding.value == 2) {
            if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
              remainder = true
            }
            if ((e.target.value.split('.')).length - 1 > 1) {
              points = true
            }
            if (e.target.value.toString().split(".")[1] != undefined) {
              if (e.target.value.toString().split(".")[1].length > 2) {
                lengths = true
              }
            }
            if (e.target.value.toString().indexOf(".") != -1) {
              no_int = false
            } else {
              no_int = true
            }
            if (wins_1.test(e.target.value) || lengths || points || remainder) {
              if (!no_int) {
                e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
                    '$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
                    ".") + 3)
              } else {
                e.target.value = e.target.value.replace(wins_0, "")
              }
              e.target.dispatchEvent(new Event("input"))
            }
          }
        }
      }, 0)
    })
  }
}

main.js

Vue.directive('inputLimit',inputLimt)

使用

  <el-input  v-input-limit="2"
                      v-model="popAddOrEditDialog.form.ratio" placeholder="請(qǐng)輸入服務(wù)比例">
            </el-input>

vue輸入框只能輸入數(shù)字類(lèi)型，禁止輸入和粘貼e

js怎么去除1e里面e

方法一：使用 Number() 函數(shù)將科學(xué)計(jì)數(shù)法表示的字符串轉(zhuǎn)換為數(shù)字。然后，使用 toString() 方法將其轉(zhuǎn)換回字符串形式，這樣就會(huì)自動(dòng)移除科學(xué)計(jì)數(shù)法中的 "e"

var num = 1e10; // 科學(xué)計(jì)數(shù)法表示的數(shù)字
var numStr = Number(num).toString(); // 轉(zhuǎn)換為字符串，自動(dòng)移除 "e"
console.log(numStr); // 輸出 "10000000000"

方法二：使用正則表達(dá)式替換方法移除科學(xué)計(jì)數(shù)法中的 "e"。

var num = 1e10; // 科學(xué)計(jì)數(shù)法表示的數(shù)字
var numStr = num.toString().replace("e", ""); // 使用 replace 方法替換 "e" 為空字符串 console.log(numStr); // 輸出 "10000000000"

vue中限制長(zhǎng)度以及數(shù)字（包括e）

// 封裝方法--只允許輸入正數(shù)包 
export function getNum(val) { 
  // 先把非數(shù)字的都替換掉，除了數(shù)字 
  val = Number(val).toString().replace(/[^\d]/g, '') 
  return val 
}

<el-input
  type="number"
  v-model.trim="ruleForm.height"
  clearable
  placeholder="請(qǐng)輸入數(shù)字"
  οnkeydοwn="return event.keyCode !== 69"
  @input="changeNumber('height',ruleForm.height,8)"
/>
changeNumber(name, obj, len = 8) {
  const t = obj.length > len ? obj.slice(0, len) : obj
  this.$set(this.ruleForm, name, getNum(t))
}

vue中自動(dòng)保存兩位小數(shù)

// 封裝方法--只允許輸入數(shù)字包含小數(shù)點(diǎn)
export function getFloorNumber(val, saveNumber = 2) {
  // 先把非數(shù)字的都替換掉，除了數(shù)字
  val = val.replace(/[^\d.]/g, '')
  val = val.replace(/\.{2,}/g, '.')
  val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  const index = val.indexOf('.')
  if (index != -1) {
    const arr = val.split('.')
    if (arr[1].length > saveNumber) {
      arr[1] = arr[1].substr(0, saveNumber)
    }
    val = arr.join('.')
  }
  return val
}
<el-input
  v-model="ruleForm.sharedArea"
  placeholder="請(qǐng)?zhí)顚?xiě)面積"
  clearable
  @input="changeSpliceArea('area')"
  @blur="changeArea('area')"
/>
changeSpliceArea(name, len = 8) {
  this.ruleForm[name] = getFloorNumber(this.ruleForm[name])
  if (this.ruleForm[name].length >= len) {
    this.ruleForm[name] = this.ruleForm[name].substr(0, len)
  }
},
changeArea(name) {
  const t = this.ruleForm[name] && this.ruleForm[name].charAt(this.ruleForm[name].length - 1)
  if (t == '.') {
    this.ruleForm[name] += '00'
  }
}

常用工具方法

// 只允許輸入數(shù)字包含負(fù)數(shù)
export function getNumber(val) {
  const t = val.charAt(0)
  // 先把非數(shù)字的都替換掉，除了數(shù)字
  val = val.replace(/[^\d]/g, '')
  // 如果第一位是負(fù)號(hào)，則允許添加
  if (t === '-') {
    val = '-' + val
  }
  return val
}

// 只允許輸入正數(shù)包
export function getNum(val) {
  // 先把非數(shù)字的都替換掉，除了數(shù)字
  val = Number(val).toString().replace(/[^\d]/g, '')
  return val
}

// 只允許輸入數(shù)字包含小數(shù)點(diǎn)
export function getFloorNumber(val, saveNumber = 2) {
  // 先把非數(shù)字的都替換掉，除了數(shù)字
  val = val.replace(/[^\d.]/g, '')
  val = val.replace(/\.{2,}/g, '.')
  val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  const index = val.indexOf('.')
  if (index != -1) {
    const arr = val.split('.')
    if (arr[1].length > saveNumber) {
      arr[1] = arr[1].substr(0, saveNumber)
    }
    val = arr.join('.')
  }
  return val
}
// 只允許輸入數(shù)字包含小數(shù)，不限制長(zhǎng)度
export function getFloorNumNoLength(val) {
  const t = val.charAt(0)
  if (t === '.') {
    return val.replace('.', '')
  }
  val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  // 先把非數(shù)字的都替換掉，除了數(shù)字
  val = val.replace(/[^\d.]/g, '')
  return val
}