Django服务端校验完成后如何在客户端展示对应错误提示

你需要把依赖数据库的校验逻辑写在表单类的自定义校验方法中，这样可以复用Django表单的错误提示机制，自动把错误信息传给前端展示。

第一步：修改表单类，新增价格自定义校验 #

在你的Form类中添加clean_price方法，该方法会在表单默认校验完成后自动执行，你可以在这里查询数据库做比对：

from django import forms
from django.core.exceptions import ValidationError
from django.core.validators import MinValueValidator
from .models import items # 导入你的items模型

class MyForm(forms.Form):
    name = forms.CharField(max_length=200)
    price = forms.IntegerField(
        validators=[MinValueValidator(0)],
        widget=forms.NumberInput(attrs={'min': 0})
    )

    def clean_price(self):
        input_price = self.cleaned_data.get('price')
        # 处理数据库为空的边界情况，避免调用属性报错
        max_price_obj = items.objects.order_by('-price').first()
        if not max_price_obj:
            # 没有存量数据时直接返回输入值
            return input_price
        max_price = max_price_obj.price
        if input_price <= max_price:
            raise ValidationError("请输入更大的数值")
        return input_price

这里校验失败抛出的ValidationError会自动绑定到price字段的错误信息中，前端可以直接读取展示。

第二步：修改视图函数，正确使用表单校验能力 #

不要直接操作request.POST的原始数据，要通过表单实例的is_valid()方法触发校验，校验通过后再操作数据库：

def add_item(request):
    if request.method == "POST":
        # 把提交的数据绑定到表单实例
        form = MyForm(request.POST)
        # 触发全量校验，包括我们自定义的clean_price逻辑
        if form.is_valid():
            # 校验通过，用清洗后的安全数据入库
            items.objects.create(
                name=form.cleaned_data['name'],
                price=form.cleaned_data['price']
            )
            return render(request, "myapp/index.html")
        else:
            # 校验失败，把带错误信息的form实例传回模板
            return render(request, "myapp/items.html", {"form": form})
    # GET请求返回空表单
    else:
        form = MyForm()
        return render(request, "myapp/items.html", {"form": form})

第三步：前端模板展示错误提示 #

在myapp/items.html模板对应price字段的位置添加错误展示代码即可：

<!-- 表单其他内容 -->
<div>
    <label for="{{ form.price.id_for_label }}">价格：</label>
    {{ form.price }}
    {% if form.price.errors %}
        <span style="color: red;">{{ form.price.errors.0 }}</span>
    {% endif %}
</div>
<!-- 表单其他内容 -->

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