el-input 效验归类

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

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'); // 小数点后面只能有两位数字
},
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流转的年华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值