Livewire验证错误时如何触发事件并传递errorbag全部错误

Livewire 组件调用 $this->validate() 时，如果验证不通过会直接抛出 ValidationException 异常，终止后续代码执行，因此你写在验证后的失败判断逻辑永远不会触发。

方案1：捕获验证异常（推荐，保留原有验证规则配置） #

只需在原有逻辑外层包裹异常捕获，触发事件后重新抛出异常即可保留Livewire默认的输入回填、单字段错误绑定能力：

1. 先在 Register.php 顶部引入异常类：

use Illuminate\Validation\ValidationException;

2. 修改 register 方法逻辑：

public function register()
{
    try {
        $this->validate();
    } catch (ValidationException $e) {
        // 触发事件并传递所有错误信息到前端
        $this->emitSelf('validation-error', $this->getErrorBag()->all());
        // 重新抛出异常，保留Livewire默认的验证错误处理逻辑
        throw $e;
    }

    // 验证通过后的原有业务逻辑保持不变
    $user = User::create([
        'name' => $this->name,
        'email' => $this->email,
        'password' => Hash::make($this->password),
    ]);

    auth()->login($user);

    return redirect('/');
}

方案2：手动构造验证器 #

如果不想使用异常捕获，也可以手动初始化验证器判断验证结果：

1. 先在 Register.php 顶部引入验证器门面：

use Illuminate\Support\Facades\Validator;

2. 修改 register 方法逻辑：

public function register()
{
    $validator = Validator::make(
        [
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'password_confirmation' => $this->password_confirmation,
        ],
        $this->rules
    );

    if ($validator->fails()) {
        // 将错误写入Livewire错误袋，保留默认单字段错误展示能力
        $this->setErrorBag($validator->errors());
        // 触发事件并传递所有错误信息
        $this->emitSelf('validation-error', $validator->errors()->all());
        return;
    }

    // 验证通过后的原有业务逻辑保持不变
    $user = User::create([
        'name' => $this->name,
        'email' => $this->email,
        'password' => Hash::make($this->password),
    ]);

    auth()->login($user);

    return redirect('/');
}

修改模板逻辑接收后端传递的错误列表，替换原有固定提示：

<span x-data="{ open: false, errors: [] }" 
    x-init="
        @this.on('validation-error', (errorList) => {
            errors = errorList;
            open = true;
            setTimeout(() => { open = false }, 2500);
        })
    "
    x-show.transition.out.duration.1000ms="open" 
    style="display: none;" 
    class="text-red-500"
>
    <template x-for="error in errors" :key="error">
        <p x-text="error"></p>
    </template>
</span>

内容的提问来源于stack exchange，提问作者Code Flow