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

最新推荐文章于 2024-07-24 16:31:24 发布

原创

最新推荐文章于 2024-07-24 16:31:24 发布 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

只能输入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) {
      n