Laravel表单设计：优雅地让“返回”按钮跳过验证

本文旨在解决laravel表单中“返回”按钮触发不必要验证的问题。通过将“返回”按钮从表单提交类型更改为直接导航的锚点标签，可以有效绕过formrequest的验证流程，从而简化控制器逻辑，提升用户体验。此方法适用于“返回”操作仅需页面跳转，无需数据提交的场景。

引言：表单验证与导航按钮的挑战

在Laravel应用开发中，表单是用户交互的核心组件。为了确保数据的完整性和安全性，我们通常会使用FormRequest进行严格的输入验证。然而，当一个表单包含多个操作按钮，例如一个“提交”按钮用于保存数据，以及一个“返回”按钮用于取消当前操作并返回上一页时，一个常见的问题便会出现：如果“返回”按钮也被设计为提交表单，它同样会触发FormRequest中定义的所有验证规则。这不仅可能导致不必要的用户体验中断，也增加了控制器中处理不同操作的复杂性。

传统处理方式及其局限

在一些实现中，开发者可能会选择让所有按钮都作为表单的提交按钮（type="submit"），并通过按钮的 name 和 value 属性来区分不同的操作。例如，以下视图代码展示了这种模式：

    @csrf
  

    Movie Name
    
    @error('movie_name')
    {{$message}}
    @enderror
  
  
  Back
  Add

相应的控制器逻辑可能如下：

use App\Http\Requests\MoviesFormRequest;
use Illuminate\Http\Request; // 确保引入Request

public function store(MoviesFormRequest $request)
{
    switch ($request->input('action')) {
        case 'back':
            // 当点击“Back”时，FormRequest的验证已经执行
            return redirect()->route("movies.index");

        case 'add':
            $data = $request->validated(); // 只有在验证通过后才能获取数据
            // Movie::create($data);
            return redirect()->route("movies.index");
    }
}

在这种模式下，无论用户点击“Back”还是“Add”按钮，表单都会被提交，并且 MoviesFormRequest 的验证逻辑都会被触发。这意味着即使用户只是想返回，如果表单字段不满足验证规则，他们也会看到验证错误，这显然不是理想的用户体验。

推荐解决方案：前端视图调整

解决此问题的最简洁有效的方法是，将仅用于导航的“返回”按钮从 type="submit" 更改为标准的 HTML 锚点标签（）。锚点标签的本质是发起一个 GET 请求，直接跳转到指定 URL，而不会触发表单的提交事件，从而完全绕过 FormRequest 的验证。

以下是修改后的前端视图代码示例：

    @csrf
  

    Movie Name
    
    @error('movie_name')
    {{$message}}
    @enderror
  
  

    Movie Description
    
    @error('movie_description')
    {{$message}}
    @enderror
  
  

    Movie Genre
    
    @error('movie_gener')
    {{$message}}
    @enderror
  
  
  Back
  
  Add

通过这种方式，当用户点击“Back”链接时，浏览器会直接导航到 movies.index 路由，而不会触发表单提交，因此 FormRequest 验证不会被执行。

控制器逻辑的简化

由于“返回”操作不再通过表单提交，控制器中的逻辑可以大幅简化。我们不再需要通过 switch 语句来区分不同的 action，控制器现在只需要专注于处理实际的表单提交（例如“添加”操作）。

Copy.ai

Copy.ai 是一个人工智能驱动的文案生成器

下载

以下是优化后的控制器 store 方法：

validated();

        Movie::create($data); // 使用validated()获取验证后的数据

        return redirect()->route("movies.index")->with('success', 'Movie added successfully!');
    }
}

现在，store 方法只处理成功验证后的数据持久化逻辑，代码更加清晰和单一。

FormRequest验证规则

MoviesFormRequest 的验证规则保持不变，它依然负责定义“添加”操作所需的所有验证逻辑。只有当用户点击“Add”按钮并提交表单时，这些规则才会被应用。

 'required|string|max:255',
            'movie_description' => 'required|string',
            'movie_gener' => 'required|string|max:100',
        ];
    }

    /**
     * Get the error messages for the defined validation rules.
     *
     * @return array
     */
    public function messages()
    {
        return [
            'movie_name.required' => '电影名称不能为空。',
            'movie_description.required' => '电影描述不能为空。',
            'movie_gener.required' => '电影类型不能为空。',
            // ... 其他自定义消息
        ];
    }
}

总结与注意事项

通过将表单中的“返回”按钮替换为锚点标签，我们能够以一种优雅且符合语义的方式解决Laravel中“返回”按钮触发不必要验证的问题。这种方法具有以下优点：

• 提升用户体验： 用户点击“返回”时，不会因为表单未填写完整而看到验证错误。
• 简化控制器逻辑： 控制器无需再区分不同操作，只需处理核心的业务逻辑。
• 代码清晰度： 前端和后端代码各司其职，更易于理解和维护。

注意事项：

• 此方法适用于“返回”按钮仅用于页面导航，不涉及任何数据提交或后端处理的场景。
• 如果“返回”按钮需要执行一些特殊逻辑（例如保存草稿、记录日志等），则可能需要采用其他策略，例如通过JavaScript阻止默认提交行为，或者在控制器中根据 action 值来动态调整 FormRequest 的验证规则（这通常会使逻辑变得复杂，不推荐作为首选）。
• 确保锚点标签的 href 属性指向正确的返回路由。
• 可以通过CSS样式将锚点标签渲染得像按钮一样，以保持一致的用户界面。

总之，对于简单的导航需求，使用锚点标签是处理Laravel表单中“返回”按钮的最佳实践。