Vue项目开发 el-input 如何限制首位输入的数字不能是0

在 Vue.js 中使用 el-input（Element UI 组件库的输入框）时，可以通过自定义输入的校验规则来限制首位输入的数字不能是0。可以结合 input 事件进行输入内容的处理，确保输入的数字符合要求。

下面是一个使用 el-input 限制首位不能为 0 的实现方式：

示例代码

<template>
  <el-input
    v-model="inputValue"
    @input="handleInput"
    placeholder="请输入数字"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 如果首位是0且后面还有数字，或者仅为0，清空输入框
      if (/^0\d/.test(value)) {
        this.inputValue = value.slice(1);  // 去掉首位的0
      }
    }
  }
};
</script>

代码解释

1. v-model：绑定 inputValue 数据，确保输入框的值和 inputValue 保持同步。
2. @input：监听 input 事件，调用 handleInput 方法进行处理。
3. handleInput(value)：这个方法用来检查输入的内容：
   • 如果输入的内容以 0 开头，并且后面还有其他数字（例如 “0123”），则去掉首位的 0。
   • 如果输入的内容仅为 “0” 也会被清空。

这样一来，用户在输入数字时，首位不允许是0，确保输入格式的正确性。

扩展：增加其他校验逻辑

如果你还想做其他限制（如：只允许输入数字），可以进一步优化：

handleInput(value) {
  // 只允许数字，且首位不能是0
  const regex = /^[1-9]\d*$/;
  if (!regex.test(value) && value !== '') {
    this.inputValue = value.slice(0, -1);  // 回退输入
  }
}

这里的正则 ^[1-9]\d*$ 确保输入必须以非零数字开头，后续可以有任意数量的数字。

总结

通过这种方式，可以有效地限制 el-input 输入框的首位不能为零，同时保证用户输入的其他部分是符合预期的数字格式。如果你有其他特殊需求，也可以根据自己的实际情况进一步调整和扩展这个逻辑。