Laravel分页/每页条数切换时URL含无效日期参数问题修复

核心原因 #

出现start_date=[object HTMLInputElement]这类无效参数，本质是分页/每页条数切换时，代码错误地把DOM输入框元素本身当作参数值传递，而非输入框的实际内容（.value或.val()）。即使删除search_date函数，分页器的参数拼接逻辑仍会携带错误的元素对象。

具体修复步骤 #

1. 后端控制器修正分页参数传递

在Laravel控制器中，确保分页器appends()方法只携带合法的请求参数值，而非前端DOM元素：

public function index()
{
    // 过滤并验证请求参数
    $validated = request()->validate([
        'name' => 'nullable|string',
        'start_date' => 'nullable|date',
        'end_date' => 'nullable|date|after_or_equal:start_date',
        'per_page' => 'nullable|integer|in:10,25,50'
    ]);

    // 构建查询
    $users = \App\Models\User::query()
        ->when($validated['name'] ?? null, function($query, $name) {
            $query->where('name', 'like', "%{$name}%");
        })
        ->when(($validated['start_date'] ?? null) && ($validated['end_date'] ?? null), function($query) use ($validated) {
            $query->whereBetween('created_at', [$validated['start_date'], $validated['end_date']]);
        })
        // 分页并携带合法参数
        ->paginate($validated['per_page'] ?? 10)
        ->appends($validated);

    return view('users.index', compact('users'));
}

这里通过validate()过滤无效参数，再用appends($validated)确保分页链接只携带正确的参数值。

2. 前端修正每页条数切换逻辑

如果用JS处理每页条数的切换事件，必须获取输入框的value值，而非元素本身：

// 假设每页条数选择器的ID是per_page
$('#per_page').on('change', function() {
    const params = new URLSearchParams(window.location.search);
    // 设置每页条数
    params.set('per_page', $(this).val());
    // 保留现有搜索参数（注意要取输入框的value）
    params.set('name', $('#name').val());
    params.set('start_date', $('#start_date').val());
    params.set('end_date', $('#end_date').val());
    // 跳转页面
    window.location.href = window.location.pathname + '?' + params.toString();
});

关键是用.val()获取输入框的实际内容，避免直接传递DOM元素对象。

3. 检查视图中的手动URL拼接

如果视图里有手动拼接分页链接的代码，要确保使用输入框的value属性：
错误示例：

<a href="?page=2&start_date=" + document.getElementById('start_date') + "&end_date=" + document.getElementById('end_date')>第2页</a>

正确写法：

<a href="?page=2&start_date=" + document.getElementById('start_date').value + "&end_date=" + document.getElementById('end_date').value>第2页</a>

更推荐直接使用Laravel分页器自带的{{ $users->links() }}生成分页链接，配合后端的appends()，避免手动拼接出错。

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