自定义Vuetify数字输入框空值校验失效问题求助

我完全理解你碰到的麻烦——当输入框被清空时，parseFloat把空字符串转成了NaN，但你的校验规则没法把NaN识别为空值，导致必填校验完全不起作用。咱们一步步来搞定这个问题：

1. 子组件：修正空值/NaN的处理逻辑 #

首先调整你的NumberField组件的input方法，当输入为空或者解析后得到NaN时，直接传递空字符串给父组件，而不是NaN：

<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) {
      // 处理空输入或无法解析为有效数字的情况
      if (!newValue || isNaN(parseFloat(newValue))) {
        this.$emit("input", "");
        return;
      }
      const number = parseFloat(newValue);
      this.$emit("input", number);
    }
  }
};
</script>

这样用户清空输入框时，父组件的number会变成空字符串，而非NaN，接下来校验规则就能正确识别空值了。

2. 父组件：优化校验规则，精准判断空值 #

你之前用的正则/.*\S.*/有个问题：当this.number是NaN时，它会被转成字符串"NaN"，这个字符串包含非空白字符，所以校验永远返回true，不会报错。现在我们重构校验规则，先处理必填逻辑，再校验数字有效性：

<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
    };
  },
  computed: {
    numberRules: function() {
      return [
        // 优先判断必填：空字符串直接触发错误
        (v) => v !== "" || "此字段不能为空",
        // 再验证是否为有效数字（排除NaN和无穷大）
        (v) => !isNaN(parseFloat(v)) && isFinite(v) || "请输入有效的数字"
      ];
    }
  },
  methods: {
    updateNumber: function(newValue) {
      this.number = newValue;
      console.log(newValue);
    }
  }
};
</script>

这套规则分成两步：

• 第一步直接检查值是否为空字符串，确保必填校验能精准触发；
• 第二步验证输入是否是符合要求的有效数字，避免非数字内容通过校验。

为什么之前的尝试没生效？ #

你之前试过this.$emit("input");传递空值，但Vue中如果不传递参数，$emit会把undefined传给父组件。而你的校验规则基于this.number（此时是undefined），正则测试undefined时会转成字符串"undefined"，同样包含非空白字符，所以校验还是不会报错。现在我们明确传递空字符串，配合针对性的校验规则，就能正确触发空值错误提示了。

内容的提问来源于stack exchange，提问作者user9945420