如何结合Bootstrap 5实现Django登录表单校验及错误样式渲染

你的需求完全可以实现，以下是具体改造方案和优化建议：

1. 调整forms.py代码 #

你原有的clean方法缺少返回值，且默认抛出的是全局非字段错误，如果需要将错误绑定到对应字段可以用add_error方法，改造后示例：

from django import forms
from django.contrib.auth import authenticate

class LoginForm(forms.Form):
    username = forms.CharField()
    # 新增PasswordInput控件，避免密码明文回显
    password = forms.CharField(widget=forms.PasswordInput)

    def clean(self):
        cleaned_data = super().clean()
        username = cleaned_data.get("username")
        password = cleaned_data.get("password")
        
        user = authenticate(username=username, password=password)
        if not user:
            # 方式1：抛出全局通用错误
            raise forms.ValidationError("用户名或密码错误")
            # 方式2：绑定到指定字段，错误会在对应字段下方显示
            # self.add_error('password', '用户名或密码不匹配')
        # 必须返回清理后的数据
        return cleaned_data

2. 调整模板适配Bootstrap5校验规则 #

Bootstrap的invalid-feedback元素需要对应输入框添加is-invalid类才会自动显示，同时你需要将视图传递的form对象的错误信息渲染到对应位置，改造后模板代码：

<form method="POST" class="row g-3 needs-validation" novalidate>
    {% csrf_token %}
    <!-- 展示全局非字段错误 -->
    {% if form.non_field_errors %}
    <div class="alert alert-danger" role="alert">
        {{ form.non_field_errors.0 }}
    </div>
    {% endif %}

    <div>
        <input type="text" name="username" 
               class="form-control {% if form.username.errors %}is-invalid{% endif %}" 
               placeholder="Username" 
               value="{{ form.username.value|default:'' }}" 
               required>
        <div class="invalid-feedback">
            {{ form.username.errors.0 }}
        </div>
    </div>

    <div>
        <input type="password" name="password" 
               class="form-control {% if form.password.errors %}is-invalid{% endif %}" 
               placeholder="Password" 
               required>
        <div class="invalid-feedback">
            {{ form.password.errors.0 }}
        </div>
    </div>

    <input class="btn btn-primary" type="submit" value="Login">
</form>

<!-- 可选：添加Bootstrap5客户端校验逻辑，提前拦截基础错误减少无效后端请求 -->
<script>
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>

视图层注意事项：处理请求时需要将POST数据绑定到表单实例，校验后再将表单对象传回模板，示例：

from django.contrib import auth
from django.shortcuts import render, redirect

def login_view(request):
    if request.method == 'POST':
        form = LoginForm(request.POST)
        if form.is_valid():
            # 校验通过后执行登录逻辑
            user = authenticate(username=form.cleaned_data['username'], password=form.cleaned_data['password'])
            auth.login(request, user)
            return redirect('首页路由名')
    else:
        form = LoginForm()
    return render(request, 'login_page.html', {'form': form})

• 直接使用Django内置的AuthenticationForm，无需自己编写用户名密码校验逻辑，内置覆盖了用户状态校验、密码校验等常见场景，减少自定义代码出错概率。
• 采用客户端+服务端双层校验机制：前端Bootstrap校验先拦截空值、格式错误等基础问题，后端校验做最终兜底，避免前端校验被绕过保证数据安全。
• 可使用专门的Django表单渲染工具自动生成带Bootstrap样式的表单，无需手动编写每个字段的样式和错误判断逻辑，减少重复代码。

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