使用Livewire实现注册表单时密码验证不匹配问题排查

问题描述 #

我正在尝试使用Livewire实现一个注册表单，但遇到了密码不匹配的验证错误，请问问题出在哪里？

Livewire组件代码 #

public $name;
public $email;
public $password;
public $businessName;
public $passwordConfirmation;
public function createUser(){

        $this->validate([
            'name'=>'required|max:100',
             'email'=>'required|email|max:255|unique:users',
            'password'=>'required|min:8|confirmed',
            'passwordConfirmation' => 'required ',
        ]);
        
        $data=[

            'name'=>$this->name,
            'email'=>$this->email,
            'password'=>Hash::make($this->password)
        ];
        return User::create($data);
    }

视图代码 #

<div class="row mb-3">
   <label for="password"  class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
   <div class="col-md-6">
      <input id="password" wire:model='password'  type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
      @error('password')
      <span class="invalid-feedback" role="alert">
      <strong>{{ $message }}</strong>
      </span>
      @enderror
   </div>
</div>
<div class="row mb-3">
   <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>
   <div class="col-md-6">
      <input id="password-confirm" wire:model="passwordConfirmation"  type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
   </div>
</div>

问题原因 #

核心问题是Laravel confirmed验证规则的命名约定：当给password字段添加confirmed规则时，Laravel默认会寻找名为password_confirmation的字段进行匹配，但你的Livewire组件定义的是$passwordConfirmation属性，视图绑定的也是passwordConfirmation，命名不匹配导致验证无法识别确认字段，从而抛出密码不匹配错误。

解决方法 #

方法一：遵循Laravel默认命名约定（推荐） #

修改Livewire组件的属性名，并简化验证规则：

1. 将组件中的$passwordConfirmation改为$password_confirmation
2. 移除验证规则中单独的passwordConfirmation项，confirmed规则会自动校验对应的password_confirmation字段

修改后的Livewire代码：

public $name;
public $email;
public $password;
public $businessName;
public $password_confirmation; // 修正属性名

public function createUser(){
    $this->validate([
        'name'=>'required|max:100',
        'email'=>'required|email|max:255|unique:users',
        'password'=>'required|min:8|confirmed', // confirmed自动匹配password_confirmation
    ]);
    
    $data = [
        'name' => $this->name,
        'email' => $this->email,
        'password' => Hash::make($this->password)
    ];
    return User::create($data);
}

同步修改视图的wire:model绑定：

<input id="password-confirm" wire:model="password_confirmation" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">

方法二：自定义确认字段名 #

如果想保留$passwordConfirmation的属性名，可在confirmed规则后指定确认字段名：

$this->validate([
    'name'=>'required|max:100',
    'email'=>'required|email|max:255|unique:users',
    'password'=>'required|min:8|confirmed:passwordConfirmation', // 指定确认字段为passwordConfirmation
    'passwordConfirmation' => 'required',
]);

此方式下，视图的wire:model绑定保持passwordConfirmation不变即可。

内容的提问来源于stack exchange，提问作者Hotdot Cyber