自定义 numberfield 不针对 NaN 进行验证答案

【问题标题】：custom numberfield does not validate against NaN自定义 numberfield 不针对 NaN 进行验证
【发布时间】：2019-11-28 07:20:12
【问题描述】：

不幸的是，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，则返回的内容可能是基于意见的。但是如何在为空时触发对该字段的验证？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我发现您的代码中有两个错误：

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

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

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

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

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

【讨论】：