本教程詳細講解在 Laravel 應用中，如何優(yōu)雅地處理表單驗證失敗場景，確保用戶之前輸入的數(shù)據(jù)不會丟失。通過在控制器中使用 withInput() 方法將請求數(shù)據(jù)閃存到 Session，并在 Blade 模板中使用 old() 輔助函數(shù)，實現(xiàn)表單字段的自動回填，顯著提升用戶體驗。

在 Web 應用開發(fā)中，用戶提交表單后，如果數(shù)據(jù)未能通過服務器端驗證，通常需要將用戶重定向回表單頁面，并顯示錯誤信息。然而，一個常見的用戶體驗痛點是，當重定向發(fā)生時，表單中用戶已經(jīng)輸入的數(shù)據(jù)會丟失，用戶不得不重新填寫所有字段。這不僅增加了用戶的操作負擔，也可能導致用戶流失。Laravel 提供了一套簡潔而強大的機制來解決這個問題，即通過 withInput() 方法和 old() 輔助函數(shù)。

控制器中的 withInput() 方法

當表單驗證失敗時，Laravel 的 Validator 實例會捕獲所有驗證錯誤。通常，我們會將用戶重定向回表單頁面，并附帶這些錯誤信息。為了同時保留用戶提交的表單數(shù)據(jù)，我們需要在重定向時調用 withInput() 方法。

withInput() 方法的作用是將當前請求的所有輸入數(shù)據(jù)閃存 (flash) 到 Session 中。這意味著這些數(shù)據(jù)只會在下一次請求中可用，之后便會自動從 Session 中清除，避免了不必要的 Session 數(shù)據(jù)堆積。

原始問題代碼示例（未保留輸入）:

以下代碼展示了驗證失敗后，僅重定向并帶上錯誤信息，而未保留用戶輸入的場景：

// ... 其他代碼 ...

$validator = Validator::make($request->all(), [
    'PageLanguage.title.*' => 'required',
],[
    "required" => "請檢查并重新填寫所有必填表單項。" // 優(yōu)化錯誤信息
]);

if ($validator->fails()) {
    return redirect('admin/page/create')
                ->withErrors($validator); // 此時用戶輸入數(shù)據(jù)不會被保留
}

// ... 驗證通過后的邏輯 ...

在上述代碼中，如果驗證失敗，用戶會被重定向到 admin/page/create 頁面，但之前填寫的表單數(shù)據(jù)將丟失。

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

要解決數(shù)據(jù)丟失問題，只需在重定向鏈中添加 ->withInput() 方法：

// ... 其他代碼 ...

$validator = Validator::make($request->all(), [
    'PageLanguage.title.*' => 'required',
],[
    "required" => "請檢查并重新填寫所有必填表單項。"
]);

if ($validator->fails()) {
    return redirect('admin/page/create')
                ->withErrors($validator)
                ->withInput(); // 添加此方法以保留用戶輸入數(shù)據(jù)
}

// ... 驗證通過后的邏輯 ...

現(xiàn)在，當驗證失敗并重定向時，之前提交的表單數(shù)據(jù)（包括所有 $_POST 和 $_GET 參數(shù)）都會被存儲在 Session 中，以供下一次請求使用。

Blade 模板中的 old() 輔助函數(shù)

在控制器中通過 withInput() 閃存了數(shù)據(jù)后，我們需要在 Blade 模板中正確地檢索這些數(shù)據(jù)，并將其填充到相應的表單字段中。Laravel 提供了 old() 輔助函數(shù)來完成這項工作。

old() 函數(shù)接受一個參數(shù)，即你想要檢索的輸入字段的 name 屬性。如果該字段存在于閃存的輸入數(shù)據(jù)中，old() 會返回其值；否則，它會返回 null。

使用示例:

假設你的表單字段名為 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' => '']) !!}

這里，F(xiàn)orm::text 的第二個參數(shù)就是該字段的默認值。當 old('name') 返回值時，它會被用作默認值；否則，該字段將為空。

處理數(shù)組形式的輸入:

在原始問題中，驗證規(guī)則是 'PageLanguage.title.*' => 'required'，這表明表單可能接收數(shù)組形式的輸入，例如 PageLanguage[title][0]、PageLanguage[title][1] 等。old() 函數(shù)同樣支持這種形式的訪問：

<!-- 對于 PageLanguage[title][0] 這樣的輸入 -->
<input type="text" name="PageLanguage[title][0]" value="{{ old('PageLanguage.title.0') }}" class="form-control">

<!-- 或者如果你的表單是動態(tài)生成的，可以通過循環(huán)訪問 -->
@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

請注意，對于嵌套數(shù)組，old() 函數(shù)使用點號 . 來訪問子元素，例如 PageLanguage.title.0。

注意事項與最佳實踐

1. old() 函數(shù)的默認值: old() 函數(shù)可以接受第二個參數(shù)作為默認值，當閃存數(shù)據(jù)中沒有找到對應的字段時，將使用這個默認值。這在編輯現(xiàn)有記錄時特別有用。

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

   這里，如果 old('name') 為空，將嘗試使用 $user->name。

2. 表單輔助函數(shù): 盡管 LaravelCollective/html 這樣的包提供了方便的表單生成方法，但即使不使用它們，直接在 HTML 標簽中使用 value="{{ old('field_name') }}" 也是完全可行的。
3. 用戶體驗: 結合驗證錯誤信息和數(shù)據(jù)回填，可以極大地提升用戶體驗。確保錯誤信息清晰、具體，并指出哪個字段需要修正。
4. 安全性: old() 函數(shù)返回的值已經(jīng)被 Laravel 自動進行了 HTML 實體編碼，以防止 XSS 攻擊。因此，通常不需要手動再次進行編碼。

總結

通過在 Laravel 控制器中巧妙地運用 withInput() 方法，并在 Blade 模板中結合 old() 輔助函數(shù)，我們可以輕松實現(xiàn)表單驗證失敗后用戶輸入數(shù)據(jù)的自動回填。這一機制不僅簡化了開發(fā)流程，更重要的是，它為用戶提供了流暢、無中斷的表單提交體驗，有效避免了因數(shù)據(jù)丟失而產(chǎn)生的沮喪感。掌握這一技巧是構建用戶友好型 Laravel 應用的關鍵一步。

以上是Laravel 表單驗證失敗後自動回填用戶輸入數(shù)據(jù)的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！