DRF提交非必填空整数字段返回'a valid integer is required'报错

清空type="number"输入框时，DOM返回的原生值是空字符串""，Formik默认会直接把这个空字符串作为字段值提交。DRF自带的IntegerField默认仅将None识别为合法空值，空字符串会直接触发"a valid integer is required"校验错误——即使模型层已经配置null=True, blank=True也无法解决，因为序列化层的校验在数据库写入逻辑之前执行，设置默认值0也不符合"清空后存空"的需求。

推荐前后端同时做兼容处理，从源头和兜底两层解决问题，覆盖所有边界场景。

前端：Formik层转换空值为null #

从提交源头修正值类型，避免空字符串传给后端。

方式1：单独给数字字段绑定自定义onChange（改动最小） #

直接修改输入框的变更逻辑，清空时将字段值设为null，有输入时转为数字类型：

<Field name="PriceRangeMin">
    {({ field, form }) => (
        <label className="mt-3 block">
            <span className="text-gray-700">Price Range</span><br></br>
            <input
            {...field}
            type="number"
            className="mt-2"
            onChange={(e) => {
                const inputVal = e.target.value
                form.setFieldValue(
                    "PriceRangeMin",
                    inputVal === "" ? null : Number(inputVal)
                )
            }}
            style={
                form.touched.PriceRangeMin && form.errors.PriceRangeMin ? (
                    { border: '2px solid var(--primary-red)'}
                ) : null
            }
            />
        </label>
    )}
</Field>

注意：Formik对应字段的初始值不要设为空字符串，直接设为null即可。PriceRangeMax字段做相同修改。

方式2：提交统一清洗值 #

如果表单里可空数字字段较多，可以在Formik的onSubmit阶段统一做值转换，不用逐个改输入框：

<Formik
    initialValues={{
        PriceRangeMin: null,
        PriceRangeMax: null,
        // 其余字段初始值
    }}
    onSubmit={(values) => {
        // 清洗数字字段的空字符串为null
        const cleanedValues = Object.fromEntries(
            Object.entries(values).map(([key, val]) => {
                if (["PriceRangeMin", "PriceRangeMax"].includes(key) && val === "") {
                    return [key, null]
                }
                return [key, val]
            })
        )
        // 提交清洗后的数据到后端
        // 你的原有提交逻辑
    }}
>
    {/* 表单内容 */}
</Formik>

后端：DRF层加兜底兼容 #

避免前端漏改时接口报错，自定义可空整数字段，自动将空字符串转为None通过校验。
首先在serializers.py中新增自定义字段类型：

from rest_framework import serializers

class NullableIntegerField(serializers.IntegerField):
    def to_internal_value(self, data):
        # 前端传空字符串时直接返回None，走空值校验逻辑
        if data == "":
            return None
        return super().to_internal_value(data)

然后修改FacilitySerializer，显式指定两个价格字段使用自定义字段，配置空值允许规则：

class FacilitySerializer(serializers.ModelSerializer):
    is_owner = serializers.SerializerMethodField()
    # 替换默认IntegerField为自定义可空字段
    PriceRangeMin = NullableIntegerField(required=False, allow_null=True)
    PriceRangeMax = NullableIntegerField(required=False, allow_null=True)
    
    class Meta:
        model = Facility
        fields = (
            "id",
            "Name",
            "FacilityDescription",
            "ListingVerified",
            "mainimage",
            "AdministratorCell",
            "FeaturedVideo",
            "PriceRangeMin",
            "PriceRangeMax",
            "is_owner",
        )
        read_only_fields = ("id", "ListingVerified", "user")

    def get_is_owner(self, obj):
        user = self.context["request"].user
        return obj.user == user

模型层现有配置null=True, blank=True已经满足数据库存NULL的要求，不需要修改models.py，也不需要给字段加默认值0。

修改完成后：

• 字段有正常数字输入时，接口正常接收并存储整数
• 用户清空输入框时，前端提交null，后端自动识别为空值，数据库存储NULL，不会返回校验错误
• 完全兼容用户先输入数字、再手动清空字段的场景，不需要强制给空值设默认0

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