Question

很遗憾，Vuetify尚未提供数字输入。我试图自己创建一个。

用户可以使用正则表达式模式验证字段。一个基本的示例是检查当前字段是否为空。

如果是这样，我的Numberfield组件将返回NaN，因为无法将字段值解析为数字。验证无法检查该字段是否为空，因为NaN并不意味着为空。

我也试图与此一起不返回任何内容

  if (isNaN(number)) {
    this.$emit("input");
  } else {
    this.$emit("input", number);
  }

，但验证仍然不会返回错误。我的数字字段部分：

<template>
  <v-text-field :value="value" type="Number" :required="required" :rules="rules" @input="input"></v-text-field>
</template>

<script>
export default {
  props: {
    value: {
      required: true
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    input: function(newValue) {
      const number = parseFloat(newValue);
      this.$emit("input", number);
    }
  }
};
</script>

在使用组件时，我使用此示例代码

<template>
  <NumberField :value="number" :required="true" :rules="numberRules" @input="updateNumber"/>
</template>

<script>
import NumberField from "../components/NumberField";

export default {
  components: {
    NumberField
  },
  data: function() {
    return {
      number: 12345,
      pattern: /.*\S.*/
    };
  },
  computed: {
    numberRules: function() {
      return [() => this.pattern.test(this.number) || "this is invalid"];
    }
  },
  methods: {
    updateNumber: function(newValue) {
      this.number = newValue;

      console.log(newValue);
    }
  }
};
</script>

我还创建了一个示例，您可以在其中玩耍：

https://codesandbox.io/s/number-input-validation-hiz2u

如果值为NaN，则返回的内容可能基于观点。但是，如果为空，如何触发该字段的验证？

Answer 1

我在您的代码中看到两个错误：

您忘记指定模式是正则表达式
您的正则表达式将基本匹配任何内容

我更正了正则表达式并添加了正确的javascript对象：

data: function() {
    return {
      number: 12345,
      pattern: new RegExp("^\d+$")
    };
  },

Codesandbox不允许我们逃避\d，因此您可以在codeandandbox中使用[0-9]+而不是\d进行测试。

我不知道您想确切允许输入什么，但是您可以使用regex101来详细说明正则表达式。

自定义数字字段未针对NaN进行验证

1 个答案: