javascript - 文本输入只需要一位或多个相同的数字

Question

我正在使用 Vue.js 并想创建一个只接受正整数的输入字段组件(0 也可以)。我想避免使用正则表达式来保持人类可读:)

我的消费父组件传入当前值并使用速记同步指令

<template>
  <div>
    <form>
      <positive-integer-input :value.sync="currentValue" />
    </form>
  </div>
</template>

<script>
import PositiveIntegerInput from "../components/PositiveIntegerInput.vue";

export default {
  components: {
    "positive-integer-input": PositiveIntegerInput
  },
  data() {
    return {
      currentValue: 0
    };
  }
};
</script> 

输入组件本身只是一个基本的文本输入(为了更好的 CSS 样式)

<template>
  <input :id="_uid" type="text" :value="value" @input="onInput" />
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  methods: {
    onInput({ data }) {
      const inputNumber = Number(data);

      if (!Number.isInteger(inputNumber) || inputNumber < 0) {
        const input = document.getElementById(this._uid);
        input.value = this.value;
      } else {
        this.$emit("update:value", inputNumber);
      }
    }
  }
};
</script>

每当输入更改时，我都会验证传入的输入是否为正整数。如果验证失败，我想重置当前的输入字段内容(也许有更用户友好的解决方案？)

输入字段本身只需要一个数字或多个相同的数字。所以只有这些是可能的:

3

4

333333

4444

但不是:

34

有人知道如何修复组件吗？

提前致谢

Answer 1

我仍然不完全确定我了解要求，但我认为这与您要寻找的东西很接近:

const PositiveIntegerInput = {
  template: `
    <input
      ref="input"
      type="text"
      :value="value"
      @input="onInput"
    >  
  `,

  props: {
    value: {
      type: Number,
      required: true
    }
  },

  methods: {
    onInput(ev) {
      const value = ev.target.value;
      const inputNumber = parseInt(value, 10);

      if (inputNumber >= 0 && String(inputNumber) === value) {
        this.$emit('update:value', inputNumber);
      } else {
        // Reset the input if validation failed
        this.$refs.input.value = this.value;
      }
    }
  }
};

new Vue({
  el: '#app',
  
  components: {
    PositiveIntegerInput
  },
  
  data () {
    return {
      currentValue: 0
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <div>
    <form>
      <positive-integer-input :value.sync="currentValue" />
    </form>
  </div>
</div>

我用过 $refs而不是 document.getElementById执行重置。

为了检查输入是一个整数，我简单地使用 parseInt 将它转换为一个整数。 ，然后将其转换回字符串并将其与原始字符串进行比较。

有几种边缘情况可能会导致问题。一个特别明显的问题是输入永远不能为空，这使得更改现有值非常困难。但是，据我所知，这确实符合问题中给出的要求。

更新:

关于数字解析的一些注意事项。

使用 Number(value)将返回 NaN如果它不能解析整个字符串。使用 Number 有一些怪癖也。例如试试 Number('123e4') , Number('0x123')或 Number('0b11') .

使用 parseInt(value, 10)将解析尽可能多的字符，然后停止。 parseInt也有一些怪癖，但通过明确指定基数 10他们大多走了。

如果您尝试解析 '53....eeöööööö'使用 parseInt你会得到 53 .这是一个整数，所以它会传递一个 Number.isInteger测试。

我个人希望在进行任何进一步操作之前使用 RegExp 来确保字符串仅包含数字 0-9。这很快有助于消除大量可能的边缘情况，这样它们就不需要任何进一步的考虑。类似 /^\d*$/.test(value) ，或相反 !/\D/.test(value) .