el-input输入限制（只能输入0-100的正整数，最小值~最大值联动）

bingduYu

已于 2023-07-31 16:34:37 修改

阅读量6.5k

点赞数 1

分类专栏： js学习笔记正则表达式的学习和使用 element-ui 文章标签： javascript 开发语言 ecmascript

于 2023-07-31 09:42:15 首次发布

本文链接：https://blog.youkuaiyun.com/Yugoup/article/details/132015960

版权

js学习笔记同时被 3 个专栏收录

40 篇文章

订阅专栏

正则表达式的学习和使用

3 篇文章

订阅专栏

element-ui

3 篇文章

订阅专栏

该代码示例展示了在Vue.js中如何使用el-input组件创建输入框，限制输入值为0-100的正整数，并实现最小值与最大值的联动检查。formatInput函数用于格式化输入，parseInput函数确保输入为合法数字并在范围内，checknum函数则在输入超出范围时进行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只能输入0-100的正整数
最小值~最大值联动

<el-input
  style="width: 70px"
  :formatter="formatInput"
  :parser="parseInput"
  @blur="checknum('min', inputData, 'value1', inputData.value2)"
  v-model.number="value"
  placeholder="最小值"
/>
~~
<el-input
  style="width: 70px"
  :formatter="formatInput"
  :parser="parseInput"
  @blur="checknum('max', inputData, 'value2', inputData.value1)"
  v-model.number="value"
  placeholder="最大值"
/>


const formatInput = (value) => {
  // 格式化输入的值，保留数字部分
  return value.replace(/^0+(\d)|[^\d]+/g, '')
}
const parseInput = (value) => {
  // 解析输入的值，将其转换为合法的数字
  let numValue = parseInt(value, 10)
  if (isNaN(numValue)) return '' // 处理输入非数字的情况
  // 限制输入的最小值和最大值
  return Math.max(0, Math.min(100, numValue)).toString()
}
//最小值~最大值
const checknum = (type, inputData, field, otherValue) => {
  let numValue = parseInt(inputData[field], 10) || 0
  if (type == 'max') {
    if (numValue < otherValue) {
      numValue = otherValue
    }
  } else {
    console.log(numValue, otherValue)
    if (otherValue != null && numValue > otherValue) {
      numValue = otherValue
    }
  }
  inputData[field] = numValue
  return numValue
}