能否通过AJAX触发Django常规表单验证？无需额外库

当然可以搞定！不用额外库的前提下，我们完全能让AJAX提交的Django表单触发常规字段验证，还能把错误信息合理反馈给前端。我来一步步给你讲清楚怎么做：

和常规表单一样正常定义字段和验证逻辑就行，该抛forms.ValidationError就抛，不用做特殊修改：

from django import forms

class MyAJAXForm(forms.Form):
    email = forms.EmailField(label="邮箱")
    username = forms.CharField(label="用户名", min_length=3, max_length=20)

    def clean_username(self):
        username = self.cleaned_data.get('username')
        # 自定义字段验证逻辑，不符合就抛错
        if username.lower() == 'admin':
            raise forms.ValidationError("这个用户名不允许使用")
        return username

我们需要一个Mixin来区分AJAX和普通请求，在表单验证失败时返回JSON格式的错误信息，而不是默认的页面跳转：

from django.http import JsonResponse
from django.views.generic.edit import FormMixin

class AJAXFormMixin(FormMixin):
    def form_invalid(self, form):
        # 通过请求头判断是否是AJAX请求
        if self.request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            # 把表单错误转成字段: 错误列表的JSON结构
            errors = {field: errors for field, errors in form.errors.items()}
            # 返回400状态码+错误信息
            return JsonResponse({'errors': errors}, status=400)
        # 非AJAX请求还是走常规的form_invalid逻辑
        return super().form_invalid(form)

    def form_valid(self, form):
        if self.request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            # 验证通过后的逻辑，比如保存数据
            # 如果是ModelForm可以直接调用form.save()
            return JsonResponse({'success': True, 'message': '提交成功！'})
        return super().form_valid(form)

把上面的Mixin和Django自带的FormView结合起来就行，注意Mixin要放在前面：

from django.views.generic import FormView
from .forms import MyAJAXForm

class MyAJAXFormView(AJAXFormMixin, FormView):
    form_class = MyAJAXForm
    template_name = 'my_form_template.html'
    success_url = '/success/'  # 非AJAX请求的跳转地址，AJAX用不上但必须设置

用原生JS实现（不用jQuery这类额外库），处理表单提交、发送请求、接收错误并显示，同时避免控制台出现未处理错误：
首先是模板里的表单结构：

<form id="ajax-form" method="post" action="{% url 'ajax-form-view' %}">
    {% csrf_token %}
    <div class="form-group">
        {{ form.email.label_tag }}
        {{ form.email }}
        <div class="error-message text-danger" id="email-error"></div>
    </div>
    <div class="form-group">
        {{ form.username.label_tag }}
        {{ form.username }}
        <div class="error-message text-danger" id="username-error"></div>
    </div>
    <button type="submit">提交</button>
</form>

然后是原生JS逻辑：

document.getElementById('ajax-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单跳转

    const form = this;
    const formData = new FormData(form);

    // 先清空之前的错误提示
    document.querySelectorAll('.error-message').forEach(el => el.textContent = '');

    fetch(form.action, {
        method: form.method,
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest' // 告诉后端这是AJAX请求
        }
    })
    .then(response => {
        if (!response.ok) {
            // 状态码非200，说明验证失败，解析错误JSON后抛出
            return response.json().then(errors => { throw errors; });
        }
        return response.json();
    })
    .then(data => {
        // 提交成功的处理，比如弹窗提示或者重置表单
        alert(data.message);
        form.reset();
    })
    .catch(error => {
        // 处理表单验证错误，把错误信息显示到对应字段下方
        if (error.errors) {
            for (const field in error.errors) {
                const errorEl = document.getElementById(`${field}-error`);
                if (errorEl) {
                    errorEl.textContent = error.errors[field][0]; // 取第一个错误提示
                }
            }
        } else {
            // 其他错误（比如网络问题）输出到控制台，避免出现未处理错误
            console.error('提交出错:', error);
        }
    });
});

• 控制台出现跨域错误？确保前端页面和后端是同域的，如果是前后端分离需要配置Django的CORS（不过用Django模板渲染页面的话一般不会有这个问题）
• 错误信息没显示？检查表单字段的name属性和错误元素的id是否对应（比如字段name是email，错误元素id是email-error）
• form_invalid没触发？确认POST请求的字段名和Form类里的字段名完全一致，数据正确传递到后端

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