在Laravel的表单开发场景中，我们常常需要在表单页面同时放置提交按钮和返回按钮，默认情况下两个按钮都会触发表单的提交动作，导致返回按钮点击时也会触发后端定义的验证规则，弹出不必要的错误提示，影响用户操作体验。要解决这个问题，我们需要让返回按钮的点击行为跳过表单验证流程。
方案一：前端JS拦截返回按钮点击
这种方式通过前端JavaScript监听返回按钮的点击事件，直接跳转回目标页面，完全不触发表单的提交逻辑，是最简单的实现方式。
实现步骤
- 给返回按钮添加独立的类名或ID
- 编写JS代码拦截点击事件，执行页面跳转
代码示例
<!-- 表单页面代码 -->
<form action="/submit-form" method="POST">
@csrf
<input type="text" name="username" required>
<button type="submit">提交</button>
<button type="button" class="back-btn">返回</button>
</form>
<script>
// 监听返回按钮点击
document.querySelector('.back-btn').addEventListener('click', function() {
// 跳转到返回目标页面，这里替换为实际的返回路径
window.location.href = '/previous-page';
});
</script>
方案二：后端通过按钮名称区分请求
如果返回按钮需要提交表单数据但不触发验证，可以在返回按钮上添加name属性，后端通过判断请求参数中是否存在该字段，来决定是否执行验证。
实现步骤
- 给返回按钮添加特定的name属性
- 在后端控制器中判断请求参数，区分提交和返回场景
代码示例
<!-- 表单页面代码 -->
<form action="/submit-form" method="POST">
@csrf
<input type="text" name="username">
<button type="submit" name="action" value="submit">提交</button>
<button type="submit" name="action" value="back">返回</button>
</form>
<?php
// Laravel控制器代码
namespace AppHttpControllers;
use IlluminateHttpRequest;
class FormController extends Controller
{
public function submitForm(Request $request)
{
// 判断是否为返回按钮提交
if ($request->has('action') && $request->input('action') === 'back') {
// 返回按钮逻辑，直接跳转，不执行验证
return redirect('/previous-page');
}
// 提交按钮逻辑，执行验证
$validated = $request->validate([
'username' => 'required|string|max:255',
]);
// 处理提交数据
// ...
return redirect('/success-page');
}
}
方案三：分离返回按钮的提交路由
也可以给返回按钮单独设置提交地址，让返回按钮的提交请求走不需要验证的路由，从后端路由层面区分两种操作。
实现步骤
- 给返回按钮添加formaction属性，指定单独的提交地址
- 后端定义两个路由，分别对应提交和返回逻辑
代码示例
<!-- 表单页面代码 -->
<form action="/submit-form" method="POST">
@csrf
<input type="text" name="username">
<button type="submit">提交</button>
<!-- 返回按钮指定单独的提交地址 -->
<button type="submit" formaction="/back-form">返回</button>
</form>
<?php
// 路由定义代码 routes/web.php
use AppHttpControllersFormController;
use IlluminateSupportFacadesRoute;
// 提交路由，带验证
Route::post('/submit-form', [FormController::class, 'submitForm'])->name('form.submit');
// 返回路由，不带验证
Route::post('/back-form', [FormController::class, 'backForm'])->name('form.back');
<?php
// Laravel控制器代码
namespace AppHttpControllers;
use IlluminateHttpRequest;
class FormController extends Controller
{
// 提交逻辑，带验证
public function submitForm(Request $request)
{
$validated = $request->validate([
'username' => 'required|string|max:255',
]);
// 处理提交数据
// ...
return redirect('/success-page');
}
// 返回逻辑，无验证
public function backForm(Request $request)
{
// 直接跳转返回，不执行任何验证
return redirect('/previous-page');
}
}
方案对比与选择建议
我们可以通过下表对比三种方案的适用场景：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 前端JS拦截 | 实现简单，不需要修改后端逻辑 | 依赖前端JS，禁用JS时失效 | 返回不需要提交表单数据的场景 |
| 后端按钮名称判断 | 兼容性好，不需要额外定义路由 | 需要修改后端判断逻辑 | 返回需要提交部分表单数据的场景 |
| 分离提交路由 | 逻辑清晰，前后端职责分离 | 需要额外定义路由 | 项目结构规范，需要明确区分操作的场景 |
开发者可以根据项目的实际需求和场景，选择最适合的方案来实现无验证的返回按钮，提升表单页面的用户操作体验。