Laravel 表单验证失败后自动回填用户输入数据

在 Web 应用开发中，用户提交表单后，如果数据未能通过服务器端验证，通常需要将用户重定向回表单页面，并显示错误信息。然而，一个常见的用户体验痛点是，当重定向发生时，表单中用户已经输入的数据会丢失，用户不得不重新填写所有字段。这不仅增加了用户的操作负担，也可能导致用户流失。Laravel 提供了一套简洁而强大的机制来解决这个问题，即通过 withInput() 方法和 old() 辅助函数。

控制器中的 withInput() 方法

当表单验证失败时，Laravel 的 Validator 实例会捕获所有验证错误。通常，我们会将用户重定向回表单页面，并附带这些错误信息。为了同时保留用户提交的表单数据，我们需要在重定向时调用 withInput() 方法。

withInput() 方法的作用是将当前请求的所有输入数据闪存 (flash) 到 Session 中。这意味着这些数据只会在下一次请求中可用，之后便会自动从 Session 中清除，避免了不必要的 Session 数据堆积。

原始问题代码示例（未保留输入）:

以下代码展示了验证失败后，仅重定向并带上错误信息，而未保留用户输入的场景：

// ... 其他代码 ...

$validator = Validator::make($request->all(), [
    'PageLanguage.title.*' => 'required',
],[
    "required" => "请检查并重新填写所有必填表单项。" // 优化错误信息
]);

if ($validator->fails()) {
    return redirect('admin/page/create')
                ->withErrors($validator); // 此时用户输入数据不会被保留
}

// ... 验证通过后的逻辑 ...

在上述代码中，如果验证失败，用户会被重定向到 admin/page/create 页面，但之前填写的表单数据将丢失。

添加 withInput() 后的解决方案:

要解决数据丢失问题，只需在重定向链中添加 ->withInput() 方法：

// ... 其他代码 ...

$validator = Validator::make($request->all(), [
    'PageLanguage.title.*' => 'required',
],[
    "required" => "请检查并重新填写所有必填表单项。"
]);

if ($validator->fails()) {
    return redirect('admin/page/create')
                ->withErrors($validator)
                ->withInput(); // 添加此方法以保留用户输入数据
}

// ... 验证通过后的逻辑 ...

现在，当验证失败并重定向时，之前提交的表单数据（包括所有 $_POST 和 $_GET 参数）都会被存储在 Session 中，以供下一次请求使用。

Blade 模板中的 old() 辅助函数

在控制器中通过 withInput() 闪存了数据后，我们需要在 Blade 模板中正确地检索这些数据，并将其填充到相应的表单字段中。Laravel 提供了 old() 辅助函数来完成这项工作。

old() 函数接受一个参数，即你想要检索的输入字段的 name 属性。如果该字段存在于闪存的输入数据中，old() 会返回其值；否则，它会返回 null。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

使用示例:

假设你的表单字段名为 name，你可以这样在 Blade 模板中使用 old()：

<input type="text" name="name" value="{{ old('name') }}" class="form-control" placeholder="请输入名称">

如果你的应用使用了 LaravelCollective/html 等表单辅助包，其用法会更加简洁。例如，对于一个文本输入框：

{!! Form::text('name', old('name'), ['class' => 'form-control', 'placeholder' => '']) !!}

这里，Form::text 的第二个参数就是该字段的默认值。当 old('name') 返回值时，它会被用作默认值；否则，该字段将为空。

处理数组形式的输入:

在原始问题中，验证规则是 'PageLanguage.title.*' => 'required'，这表明表单可能接收数组形式的输入，例如 PageLanguage[title][0]、PageLanguage[title][1] 等。old() 函数同样支持这种形式的访问：

<!-- 对于 PageLanguage[title][0] 这样的输入 -->
<input type="text" name="PageLanguage[title][0]" value="{{ old('PageLanguage.title.0') }}" class="form-control">

<!-- 或者如果你的表单是动态生成的，可以通过循环访问 -->
@foreach($languages as $index => $language)
    <label for="title_{{ $index }}">{{ $language->name }} 标题:</label>
    <input type="text" 
           name="PageLanguage[title][{{ $index }}]" 
           id="title_{{ $index }}" 
           value="{{ old('PageLanguage.title.' . $index) }}" 
           class="form-control">
@endforeach

请注意，对于嵌套数组，old() 函数使用点号 . 来访问子元素，例如 PageLanguage.title.0。

注意事项与最佳实践

1. old() 函数的默认值: old() 函数可以接受第二个参数作为默认值，当闪存数据中没有找到对应的字段时，将使用这个默认值。这在编辑现有记录时特别有用。

   <input type="text" name="name" value="{{ old('name', $user->name ?? '') }}" class="form-control">

   登录后复制

   这里，如果 old('name') 为空，将尝试使用 $user->name。

2. 表单辅助函数: 尽管 LaravelCollective/html 这样的包提供了方便的表单生成方法，但即使不使用它们，直接在 HTML 标签中使用 value="{{ old('field_name') }}" 也是完全可行的。
3. 用户体验: 结合验证错误信息和数据回填，可以极大地提升用户体验。确保错误信息清晰、具体，并指出哪个字段需要修正。
4. 安全性: old() 函数返回的值已经被 Laravel 自动进行了 HTML 实体编码，以防止 XSS 攻击。因此，通常不需要手动再次进行编码。

总结

通过在 Laravel 控制器中巧妙地运用 withInput() 方法，并在 Blade 模板中结合 old() 辅助函数，我们可以轻松实现表单验证失败后用户输入数据的自动回填。这一机制不仅简化了开发流程，更重要的是，它为用户提供了流畅、无中断的表单提交体验，有效避免了因数据丢失而产生的沮丧感。掌握这一技巧是构建用户友好型 Laravel 应用的关键一步。

以上就是Laravel 表单验证失败后自动回填用户输入数据的详细内容，更多请关注php中文网其它相关文章！