javascript - 如何用解析值覆盖输入字段？

Question

我试图限制数字类型输入字段中允许的字符集。问题是我找不到一种方法来“覆盖”输入字段中的文本以删除无效字符。

这是我测试的代码:

<template>
  <div>
    <input @input="validate" :model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      message: ""
    }),
    methods: {
      validate(input){
        // the regex is allowing only numbers and either a comma or a period
        this.message = input.target.value.match(/[0-9]*(,|\.)?[0-9]*/gm)[0]
      }
    }
  }
</script>

输入字段中的所有字符保持不变，而“message”变量是经过解析的验证字符串。如何将“消息”字符串放入输入字段？

编辑:这里是 jsfiddle上面的代码。

Answer 1

嗯，:model 是 v-bind:model 的简写，不要与 Vue 指令的 v-model 混淆(我们想要这个)。所以这样做:

<input @input="validate" v-model="message" placeholder="edit me">

但是，我建议使用 Vue-Masked-Input组件或vue-inputmask (我个人的偏好)为此目的，因为它们通过确保预定义格式来帮助输入。这对于日期、数字、电话号码等很有用。