如何在使用jQuery提交Django密码修改表单时展示错误信息

我帮你分析下当前的问题：你的视图里，当密码修改表单验证失败时，只返回了一条通用的错误消息，并没有把表单验证产生的**具体错误（比如旧密码错误、两次新密码不匹配）**传递给前端，所以前端根本拿不到要展示的对应提示内容。

要解决这个问题，需要从后端和前端两部分调整：

1. 后端视图修改（views.py） #

当表单验证不通过时，我们需要提取表单的具体错误信息，把它放到返回的JSON数据里，这样前端才能拿到对应的提示。修改后的视图代码如下：

def profile(request):
    if request.method == 'POST':
        response_data = {
            'SType': 'danger',
            'message': "An Error Occured, pls try again later"
        }
        c_form = PasswordChangeForm(user=request.user, data=request.POST)
        if c_form.is_valid():
            c_form.save()
            update_session_auth_hash(request, c_form.user)
            response_data = {
                'SType': 'success',
                'message': "Your Password was changed successfully"
            }
        else:
            # 提取表单的具体错误信息，组装成用户友好的提示
            error_messages = []
            for field, errors in c_form.errors.items():
                for error in errors:
                    # 根据字段自定义提示文本，让用户更清楚哪里错了
                    if field == 'old_password':
                        error_messages.append(f"旧密码不正确：{error}")
                    elif field == 'new_password2':
                        error_messages.append(f"确认密码错误：{error}")
                    else:
                        error_messages.append(f"{field.replace('_', ' ')}：{error}")
            # 把所有错误用换行分隔，方便前端展示
            response_data['message'] = "<br>".join(error_messages)
        return HttpResponse(json.dumps(response_data), content_type="application/json")
    context={
        'c_form':PasswordChangeForm(user=request.user)
    }
    return render(request, 'users/profile.html', context)

2. 前端AJAX逻辑修改 #

你原来的submit_form函数应该是用来处理AJAX提交的，但可能没有正确处理后端返回的错误信息。我们可以用jQuery直接绑定表单的提交事件，更直观地处理整个流程：

首先先修正HTML里的小错误（拼写和样式属性大小写）：

<form action="." enctype="multipart/form-data" method="POST" id="PassChan__form"> 
    {% csrf_token %} 
    <fieldset class="form-group"> 
        <legend class="border-bottom mb-4">Change Your Password</legend> <!-- 修正拼写错误：paswsord → Password -->
        <input type="hidden" value="Chan_Pass" name="hidden_data" /> 
        {{ c_form | crispy }} 
    </fieldset> 
    <div class="form-group"> 
        <h6 id="PassChan__show"></h6> 
        <img src="{% static 'images/ajax-loader.gif' %}" style="display:none;" id="PassChan__img"> <!-- 修正大小写：Display → display -->
        <button class="btn btn-outline-info" type="submit" id="PassChan__submit">Change Password</button> 
    </div> 
</form>

然后添加对应的jQuery代码：

$(document).ready(function() {
    $('#PassChan__form').on('submit', function(e) {
        // 阻止表单默认提交行为，改用AJAX提交
        e.preventDefault();
        
        // 获取页面元素
        const $form = $(this);
        const $submitBtn = $('#PassChan__submit');
        const $loadingImg = $('#PassChan__img');
        const $messageBox = $('#PassChan__show');

        // 提交前的状态处理：禁用按钮、显示加载动画、清空之前的提示
        $submitBtn.prop('disabled', true);
        $loadingImg.show();
        $messageBox.html('').removeClass('text-success text-danger');

        // 发送AJAX请求
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(), // 这里因为没有文件上传，用serialize即可
            dataType: 'json',
            success: function(response) {
                // 请求成功，处理返回的消息
                $loadingImg.hide();
                $submitBtn.prop('disabled', false);
                // 根据返回的类型添加样式，显示消息
                $messageBox.addClass(`text-${response.SType}`).html(response.message);
            },
            error: function() {
                // 请求失败的处理
                $loadingImg.hide();
                $submitBtn.prop('disabled', false);
                $messageBox.addClass('text-danger').html('请求出错，请稍后重试');
            }
        });
    });
});

为什么这样修改能解决问题？ #

• 后端部分：我们遍历了表单的errors属性，把每个字段的具体错误提取出来，组装成用户能看懂的提示，替换了原来的通用错误消息。
• 前端部分：通过AJAX提交表单，避免了页面刷新，并且根据后端返回的SType（success/danger）给提示框添加对应的样式，把具体的错误消息展示在页面上。

这样用户提交错误信息时，就能看到对应的错误提示了。

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