登录失败后保持登录模态框不关闭的实现方法

嘿，这个问题我之前帮不少开发者处理过～登录失败后模态框自动关闭，核心原因是表单默认的同步提交会触发页面刷新，模态框的“显示”状态没法在刷新后保留下来。下面给你两种可行的解决方案，你可以根据项目情况选择：

这种方式能让表单提交不刷新页面，模态框自然保持打开状态，还能实时展示错误提示，用户体验更好。

步骤1：修改Blade表单结构 #

先给表单加个ID，同时准备好错误信息展示区域，模态框结构保持完整：

<div id="login-select-field" class="col-md-3 col-6 d-flex-center-align">
    @if(Auth::guard('customer')->check())
        <!-- 已登录用户的内容 -->
    @else
        <!-- 登录模态框 -->
        <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="loginModalLabel">用户登录</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 动态错误提示区域 -->
                        <div id="login-error" class="alert alert-danger d-none"></div>
                        
                        <form id="loginForm" name="loginForm">
                            @csrf
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            <button type="submit" class="btn btn-primary">登录</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 触发模态框的按钮 -->
        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
            登录
        </button>
    @endif
</div>

步骤2：添加AJAX提交的JS逻辑 #

用jQuery处理表单提交，阻止默认刷新行为，异步发送请求：

$(document).ready(function() {
    $('#loginForm').on('submit', function(e) {
        e.preventDefault(); // 阻止表单默认刷新提交
        const formData = $(this).serialize();
        const submitBtn = $(this).find('button[type="submit"]');
        const errorBox = $('#login-error');

        // 清空之前的错误提示，禁用按钮防止重复提交
        errorBox.addClass('d-none').text('');
        submitBtn.prop('disabled', true).text('登录中...');

        $.ajax({
            url: '{{ route("customer.login") }}', // 替换成你的登录路由
            method: 'POST',
            data: formData,
            success: function(res) {
                // 登录成功，跳转到目标页面
                window.location.href = res.redirect_url || '/';
            },
            error: function(xhr) {
                // 登录失败，显示错误信息
                const errorMsg = xhr.responseJSON?.message || '登录失败，请检查账号密码';
                errorBox.removeClass('d-none').text(errorMsg);
                // 恢复按钮状态
                submitBtn.prop('disabled', false).text('登录');
            }
        });
    });
});

步骤3：修改后端登录逻辑 #

在Laravel控制器里返回JSON响应，而不是跳转：

public function login(Request $request)
{
    // 验证表单数据
    $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    // 尝试登录
    if (Auth::guard('customer')->attempt($request->only('email', 'password'))) {
        $request->session()->regenerate();
        return response()->json([
            'status' => 'success',
            'redirect_url' => route('customer.dashboard') // 登录成功后的跳转地址
        ]);
    }

    // 登录失败返回错误
    return response()->json([
        'status' => 'error',
        'message' => '邮箱或密码错误'
    ], 401);
}

如果不想用AJAX，也可以在登录失败后，通过后端传递错误信息，页面刷新后自动唤起模态框。

步骤1：修改Blade模板 #

保留模态框，添加页面加载时的判断逻辑：

<!-- 模态框结构和之前类似，保留错误信息展示 -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLabel">用户登录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if($errors->has('login_error'))
                    <div class="alert alert-danger">{{ $errors->first('login_error') }}</div>
                @endif
                <form name="loginForm" action="{{ route('customer.login') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <button type="submit" class="btn btn-primary">登录</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 页面底部添加自动唤起模态框的JS -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 检查是否有登录错误，有则打开模态框
        @if($errors->has('login_error'))
            const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
            loginModal.show();
        @endif
    });
</script>

步骤2：修改后端控制器逻辑 #

登录失败时，把错误信息存入session，返回原页面：

public function login(Request $request)
{
    $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    if (Auth::guard('customer')->attempt($request->only('email', 'password'))) {
        $request->session()->regenerate();
        return redirect()->intended(route('customer.dashboard'));
    }

    // 登录失败，携带错误信息返回
    return back()->withErrors(['login_error' => '邮箱或密码错误'])->withInput();
}

两种方案各有优劣：AJAX方案体验更流畅，无刷新；同步方案代码更简单，适合快速实现。你可以根据自己的项目需求来选～

内容的提问来源于stack exchange，提问作者Ali Özen