el-input 效验归类

原创已于 2025-08-20 14:47:38 修改 · 514 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-04-08 18:00:28 首次发布

文章介绍了如何在Vue的el-input组件中使用正则表达式对输入进行验证，包括0和正整数判断、正整数限制、保留小数位数以及负数和非数字字符的过滤，确保用户输入的数据格式正确。

字母数字输入

handleInput(value){
  const filteredValue = value.replace(/[^0-9a-zA-Z]/g, '');
  // 如果过滤后的值与原值不同，说明输入了非法字符，需要更新 model
  if (filteredValue !== value) {
    this.inputValue = filteredValue;
  }
}
<el-input v-model="inputValue" @input="handleInput" placeholder="请输入"></el-input>

el-input 0和正整数判断

lhzzsInput (val,str) {
  // 0和正整数
  const reg = /^(0|\+?[1-9][0-9]*)$/
  const strArray = val.split('')
  let newStrs = ''
  for (let i = 0; i < strArray.length; i++) {
    if (reg.test(strArray[i])) {
      console.log(strArray[i])
      newStrs += strArray[i]
    } else if (i > 0 && strArray[i] === '0') {
      newStrs += strArray[i]
    }
  }
  if (!(newStrs - 0 < 0)) {
    this.form[str] = newStrs - 0
  } else {
    this.form[str] = ''
  }
},

// 使用

<el-input v-model="form.test" @input="value=>lhzzsInput(value,'test')"></el-input>

正整数

inputNubChange(value,str){
  // 使用正则表达式来判断是否为正整数
  const regex = /^[1-9]\d*$/;
  // 如果输入的值不符合正整数的正则表达式，则将其设置为上一个有效值
  if (!regex.test(value)) {
    this.form[str]= this.form[str].substring(0, this.form[str].length - 1);
  }
},

使用

<el-input v-model="form.sx" @input="value=>inputNubChange(value,'sx')"></el-input>

正整数，且包含输入范围（超出范围清空）

handleNetIdInput (val, str) {
  const value = parseInt(val)
  // 检查输入是否为1~100的正整数
  if (value >= 0 && value <= 100 && Number.isInteger(value)) {
    // 符合要求，更新数据
    this.form[str] = value.toString()
  } else {
    // 不符合要求，清空输入
    this.form[str] = ''
  }
},

<el-input v-model="form.sx" @input="value=>handleNetIdInput(value,'sx')"></el-input>

大于0 保留两位小数

handleInput() {
  // 使用正则表达式限制输入的内容
  this.rechargeMoney = this.rechargeMoney.replace(/[^\d.]/g, '') // 只允许输入数字和小数点
  this.rechargeMoney = this.rechargeMoney.replace(/^\./g, '') // 第一个字符不能是小数点
  this.rechargeMoney = this.rechargeMoney.replace(/\.{2,}/g, '.') // 保证只有一个小数点
  this.rechargeMoney = this.rechargeMoney.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 小数点最多保留两位
  this.rechargeMoney = this.rechargeMoney.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 小数点前面不能有负号
  // this.rechargeMoney = this.rechargeMoney.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3') // 小数点后面只能有一位数字
  this.rechargeMoney = this.rechargeMoney.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3') // 小数点后面只能有两位数字
  // this.rechargeMoney = this.rechargeMoney.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3') // 小数点后面只能有三位数字
  // 只允许输入大于0的数
  if (parseFloat(this.rechargeMoney) <= 0) {
    this.rechargeMoney = ''
  }
},

输入数字，包括正数和负数，保留两位小数

handleInput (key) {
  this.form[key] = this.form[key].replace(/[^\d.-]/g, ''); // 只允许输入数字、小数点和减号
  this.form[key] = this.form[key].replace(/^(-)\./g, '$1'); // 第一个字符不能是小数点
  this.form[key] = this.form[key].replace(/\.{2,}/g, '.'); // 保证只有一个小数点
  this.form[key] = this.form[key].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 小数点最多保留两位
  this.form[key] = this.form[key].replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 小数点前面不能有负号
  this.form[key] = this.form[key].replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 小数点后面只能有两位数字
},