Django重写allauth模板后验证消息不显示问题解决及自定义认证消息实现分步指导

嘿，我懂你现在的困扰——自己改了allauth的登录注册模板，加了好看的自定义样式，但表单输入错误时完全没提示，这不白忙活嘛！别慌，咱一步步来搞定，既保留你的自定义CSS，又让错误消息乖乖显示出来。

首先说为啥会这样：你现在是手动写的<input>标签，完全绕开了Django表单的渲染逻辑，而allauth的验证错误消息都是绑定在form对象上的，你没调用表单的渲染方法，自然看不到错误。核心思路就是在保留自定义样式的前提下，把表单字段和错误消息结合起来渲染。

第一步：准备工作（可选但推荐） #

为了更方便地给表单字段加自定义CSS类，我们用django-widget-tweaks工具：

• 安装：pip install django-widget-tweaks
• 在项目settings.py的INSTALLED_APPS里添加：'widget_tweaks',
• 在所有用到表单的模板顶部加载：{% load widget_tweaks %}

第二步：修改login.html模板 #

把原来手动写的input替换成结合表单字段和错误消息的写法，同时保留你的样式：

{% extends "base.html" %} 
{% load i18n %} 
{% load account socialaccount %} 
{% load widget_tweaks %} <!-- 新增加载widget_tweaks -->

{% block head_title %}{% trans "Sign In" %}{% endblock %} 

{% block content %}
<h1 class="head-line">{% trans "Sign In" %}</h1>

{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<div class="container">
  <p class="text-center">{% blocktrans with site.name as site_name %}Please sign in with one of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a> for a {{ site_name }} account and sign in below:{% endblocktrans %}
  </p>
</div>
<div class="socialaccount_ballot container">
  <ul class="socialaccount_providers text-center border">
    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
  </ul>
  <div class="login-or text-center mt">{% trans 'or' %}</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
{% endif %}

<div class="container">
  <!-- 显示全局非字段错误（比如用户名密码不匹配） -->
  {% if form.non_field_errors %}
    <div class="alert alert-danger">
      {% for error in form.non_field_errors %}
        {{ error }}
      {% endfor %}
    </div>
  {% endif %}

  <form class="login" method="POST" action="{% url 'account_login' %}">
    {% csrf_token %}
    
    <!-- 用户名字段 -->
    <div class="form-group">
      <label for="{{ form.login.id_for_label }}">{% trans "Username:" %}</label>
      <!-- 渲染表单字段并添加自定义类 -->
      {{ form.login|add_class:"form-control" }}
      <!-- 显示字段错误 -->
      {% if form.login.errors %}
        <small class="text-danger">
          {% for error in form.login.errors %}
            {{ error }}
          {% endfor %}
        </small>
      {% endif %}
    </div>

    <!-- 密码字段 -->
    <div class="form-group">
      <label for="{{ form.password.id_for_label }}">{% trans "Password:" %}</label>
      {{ form.password|add_class:"form-control" }}
      {% if form.password.errors %}
        <small class="text-danger">
          {% for error in form.password.errors %}
            {{ error }}
          {% endfor %}
        </small>
      {% endif %}
    </div>

    {% if redirect_field_value %}
    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
    {% endif %}

    <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
    <button class="primaryAction btn btn-block mt mb" type="submit">{% trans "Sign In" %}</button>
  </form>
</div>
{% endblock %}

第三步：修改signup.html模板 #

同样的逻辑，修复字段渲染和错误显示，还顺便修正了原模板里的笔误：

{% extends "account/base.html" %} 
{% load i18n %} 
{% load widget_tweaks %} <!-- 新增加载widget_tweaks -->

{% block head_title %}{% trans "Signup" %}{% endblock %} 

{% block content %}
<h1 class="head-line">{% trans "Sign Up" %}</h1>

<p class="text-center">{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}
</p>

<div class="container">
  <!-- 全局非字段错误 -->
  {% if form.non_field_errors %}
    <div class="alert alert-danger">
      {% for error in form.non_field_errors %}
        {{ error }}
      {% endfor %}
    </div>
  {% endif %}

  <form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
    {% csrf_token %}
    
    <!-- 用户名字段 -->
    <div class="form-group">
      <label for="{{ form.login.id_for_label }}">{% trans "Username:" %}</label>
      {{ form.login|add_class:"form-control" }}
      {% if form.login.errors %}
        <small class="text-danger">
          {% for error in form.login.errors %}
            {{ error }}
          {% endfor %}
        </small>
      {% endif %}
    </div>

    <!-- 邮箱字段 -->
    <div class="form-group">
      <label for="{{ form.email.id_for_label }}">{% trans "Email:" %}</label>
      {{ form.email|add_class:"form-control" }}
      {% if form.email.errors %}
        <small class="text-danger">
          {% for error in form.email.errors %}
            {{ error }}
          {% endfor %}
        </small>
      {% endif %}
    </div>

    <!-- 密码1字段 -->
    <div class="form-group">
      <label for="{{ form.password1.id_for_label }}">{% trans "Password:" %}</label>
      {{ form.password1|add_class:"form-control" }}
      {% if form.password1.errors %}
        <small class="text-danger">
          {% for error in form.password1.errors %}
            {{ error }}
          {% endfor %}
        </small>
      {% endif %}
      <!-- 显示密码规则提示 -->
      {% if form.password1.help_text %}
        <small class="form-text text-muted">{{ form.password1.help_text }}</small>
      {% endif %}
    </div>

    <!-- 密码2字段 -->
    <div class="form-group">
      <label for="{{ form.password2.id_for_label }}">{% trans "Password Again:" %}</label>
      {{ form.password2|add_class:"form-control" }}
      {% if form.password2.errors %}
        <small class="text-danger">
          {% for error in form.password2.errors %}
            {{ error }}
          {% endfor %}
        </small>
      {% endif %}
    </div>

    {% if redirect_field_value %}
    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
    {% endif %}

    <button type="submit" class="btn btn-block mb">{% trans "Sign Up" %} &raquo;</button>
  </form>
</div>
{% endblock %}

第四步：自定义错误消息（可选） #

如果想把默认的英文错误改成自己的文案，在settings.py里添加：

# 自定义allauth错误消息
ACCOUNT_ERROR_MESSAGES = {
    "invalid_login": "用户名或密码错误，请重试。",
    "password_mismatch": "两次输入的密码不一致。",
    "username_taken": "这个用户名已经被占用了。",
    "email_taken": "该邮箱已经注册过账号。",
}

第五步：测试验证 #

现在去测试登录（输入错误密码/不存在的用户名）、注册（密码不匹配/重复用户名），就能看到对应位置的红色错误提示了，同时你的自定义样式完全保留！

内容的提问来源于stack exchange，提问作者Hamed 3dart