input框输入限制

最新推荐文章于 2024-07-14 03:34:18 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-07-14 03:34:18 发布

阅读量159

点赞数 1

分类专栏： js element vue 文章标签： vue.js elementui 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/guoyu1_/article/details/129139680

版权

vue 同时被 3 个专栏收录

95 篇文章 0 订阅

订阅专栏

83 篇文章 1 订阅

订阅专栏

element

44 篇文章 0 订阅

订阅专栏

文章提供了几个JavaScript函数，用于在输入时限制用户只能输入特定格式的数字，如负数、正数、含小数点的数字等。这些函数通过正则表达式实现，可以用于前端数据验证。在Vue.js项目中，通过@input事件结合这些函数，能确保输入值符合预设规则。

摘要由CSDN通过智能技术生成

封装方法

// 只允许输入数字包含负数
export function getNumber(val) {
  const t = val.charAt(0)
  // 先把非数字的都替换掉，除了数字
  val = val.replace(/[^\d]/g, '')
  // 如果第一位是负号，则允许添加
  if (t === '-') {
    val = '-' + val
  }
  return val
}

// 只允许输入正数包
export function getNum(val) {
  // 先把非数字的都替换掉，除了数字
  val = val.replace(/[^\d]/g, '')
  return val
}

// 只允许输入数字包含小数点
export function getFloorNumber(val) {
  // 先把非数字的都替换掉，除了数字
  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 > 2) {
      arr[1] = arr[1].substr(0, 2)
    }
    val = arr.join('.')
  }
  return val
}
// 只允许输入数字包含小数，不限制长度
export function getFloorNumNoLength(val) {
  const t = val.charAt(0)
  if (t === '.') {
    return val.replace('.', '')
  }
  val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  // 先把非数字的都替换掉，除了数字
  val = val.replace(/[^\d.]/g, '')
  return val
}


// 显示10位且2位小数点
changeNumber(name, obj) {
  const t = obj.length > 10 ? obj.slice(0, 10) : obj
  this.$set(this.ruleForm, name, getFloorNumber(t))
},
// 不能是小数
changeNum(name, obj) {
  const t = obj.length > 10 ? obj.slice(0, 10) : obj
  this.$set(this.ruleForm, name, getNum(t))
},

使用
<el-input
    v-model="ruleForm.area"
    type="number"
    maxlength="10"
    placeholder="请输入面积"
    @input="changeNumber('area',ruleForm.area)"
  >
    <template slot="append">㎡</template>
  </el-input>
<el-input
    v-model="ruleForm.numberOfParking"
    type="number"
    maxlength="10"
    placeholder="请输入数量"
    @input="changeNum('number',ruleForm.number)"
  />