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的简写，不要与v-model混淆Vue指令（我们想要这个）。这样做：

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

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

Answer 2

vuejs中有一个名为watch的方法，它允许您监视DOM的更改。另外：model不是v-model的简写。

:model = v-bind:model

这是一个工作示例。 https://jsfiddle.net/awk7g2un/

只需用您解析的值替换我的数据

如何用解析后的值覆盖输入字段？

2 个答案: