Vue Js 输入字段电话号码

【问题标题】：Vue Js Input Field phone numberVue Js 输入字段电话号码
【发布时间】：2021-08-15 14:58:03
【问题描述】：

所以使用 Vue 2，我想创建一个输入字段，将输入的数据限制为最多 10 个数字，但是我需要第一个数字为 1-9，其余数字为 0-9。

所以例如 0126372827 是不允许的，因为它以 0 开头，我需要第一个数字没有 0 这可能吗？

这是我当前的代码：

<input type="number" maxlength ="10"/>

【问题讨论】：

您是否在寻找输入屏蔽？还是只是输入验证？
呃，我的错我正在寻找输入掩码

标签： vue.js input vuejs2 numbers

【解决方案1】：

您可以向input 元素添加事件监听器，将值绑定到响应式数据，并添加过滤方法。

需要注意的是，在拒绝输入值时您还必须强制更新。这将清除无效输入并恢复到当前数据状态。

<template>
  <input
    type="number"
    :value="validValue"
    @input="onInput($event.target.value)"
  />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      validValue: "",
    };
  },
  methods: {
    onInput(value) {
      if (value === "") {
        this.validValue = value;
      } else if (value.length >= 10) {
        this.$forceUpdate();
      } else if (!/^[1-9][0-9]*$/.test(value)) {
        this.$forceUpdate();
      } else {
        this.validValue = value;
      }
    },
  },
};
</script>

【讨论】：