如何在Django Admin输入表单中实现价格的千位分隔符自动添加？

核心实现逻辑 #

这个功能不需要引入额外前端组件，靠Django原生的自定义表单能力就能落地，本质是前后端两段配合的效果：

• 前端侧：监听目标价格输入框的输入事件，实时给输入的整数部分补千分位逗号，保留小数点、小数部分和负号的正常输入，提升大额数字的录入可读性
• 后端侧：对表单提交的带逗号的输入做清洗，移除所有千分位分隔符后转成对应字段要求的数值类型（Decimal/Integer）再做校验存库，避免类型校验报错

实操步骤 #

1. 后端表单输入清洗 #

针对模型里的价格类数值字段，在对应的Admin关联的ModelForm里，重写字段的清洗方法，处理带分隔符的提交内容，避免纯数字校验失败。
举个通用的Decimal价格字段的清洗示例：

from decimal import Decimal, InvalidOperation
from django.core.exceptions import ValidationError

class ProductAdminForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = "__all__"

    def clean_price(self):
        raw_input = self.cleaned_data.get("price", "")
        if not raw_input:
            return raw_input
        # 移除所有输入中的千分位逗号
        sanitized = str(raw_input).replace(",", "")
        try:
            return Decimal(sanitized)
        except InvalidOperation:
            raise ValidationError("请输入合法的数值")

2. 前端实时格式化效果 #

编写一段原生JS实现输入时的千分位格式化，放到项目静态文件目录下，比如命名为admin_thousand_separator.js：

document.addEventListener("DOMContentLoaded", function() {
    // 根据Admin实际的字段CSS类选择目标输入框，也可以直接匹配所有价格类的输入
    const targetInputs = document.querySelectorAll(".field-price input, .field-cost input");
    targetInputs.forEach(input => {
        input.addEventListener("input", function(e) {
            // 先过滤掉非数字、非小数点、非负号的非法字符
            let value = e.target.value.replace(/[^0-9.-]/g, "");
            if (!value) {
                e.target.value = "";
                return;
            }
            // 拆分整数、小数部分，单独对整数部分加千分位
            const [integerPart, decimalPart] = value.split(".");
            const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            const finalValue = decimalPart !== undefined ? `${formattedInteger}.${decimalPart}` : formattedInteger;
            e.target.value = finalValue;
        })
    })
})

把JS挂载到Admin页面有两种可选方式：

• 方式一：直接在Admin类的Media属性中引入JS文件，适配多字段的场景：

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    form = ProductAdminForm
    class Media:
        js = ("admin_thousand_separator.js",)

• 方式二：自定义带Media关联的Widget，把JS只绑定到指定的价格输入框，避免JS在无关页面加载：

from django.forms import widgets

class PriceInputWithSeparator(widgets.TextInput):
    class Media:
        js = ("admin_thousand_separator.js",)

# 在ModelForm里替换价格字段的默认Widget
class ProductAdminForm(forms.ModelForm):
    price = forms.DecimalField(widget=PriceInputWithSeparator())

注意细节 #

• 数据库永远存储纯数字格式的数值，千分位逗号仅作为输入展示层的效果，不会写入数据库
• 正则匹配逻辑需要兼容负数输入场景，不要把负号在过滤环节误删
• 如果使用了list_editable的列表内编辑功能，只要JS选择器能匹配到对应字段的输入框，格式化效果可以直接生效，不需要额外适配

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