[Livewire] 透過內建的方法驗證輸入資料

使用 Livewire 要做表單驗證很方便，首先我們把 HTML 改成這樣：

<form wire:submit.prevent="save" >
        <div class="mb-2">
            <label for="">name</label>
            <input type="text" class="form-control" name="name" wire:model="name">
        </div>
        <div class="mb-2">
            <label for="">email</label>
            <input type="email" class="form-control" name="email" wire:model="email">
        </div>
<button class="btn btn-info" type="submit">送出</button>
</form>

這樣 form 表單在送出資料的時候就會透過 livewire 的 save 方法了，這時我們在 livewire 的 controller 改成這樣：

public $name;
public $email;

protected $rules = [
        'name' => 'required|min:4',
        'email' => 'required|email',
];

public function save()
    {
        $this->validate();
        //資料會在驗證成功後才會繼續往下走，也就是要寫入資料庫的程式可以寫在下面
    }

這樣表單就會做驗證了，規則寫在 $rule 裡，可以指定不同的 name 驗證的內容不一樣。

那如果輸入的資料有誤要顯示錯誤訊息的話，則是使用 @error() 括號裡面是放 name 的值，像這樣：

<div class="mb-2">
  <label for="">name</label>
  <input type="text" class="form-control" name="name" wire:model="name">
  @error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-2">
  <label for="">email</label>
  <input type="email" class="form-control" name="email" wire:model="email">
  @error('email') <span class="text-danger">{{ $message }}</span> @enderror
</div>

這樣當表單輸入的資料驗證沒過的時候，就會在你設定的位置顯示錯誤訊息。

Livewire 也提供自訂錯誤訊息的方法，可以參考以下寫法：

protected $rules = [
        'name' => 'required|min:4',
        'email' => 'required|email',
];
protected $messages = [
        'email.required' => 'Email 不能為空',
        'email.email' => 'Email 格式不對',
];

這樣就可以依據要驗證的內容顯示不同錯誤訊息了。

livewire 驗證資料預設是要按了按鈕後才驗證，但他也提供了即時驗證的功能，可以在 controlle 加 update 的 hook 把 code 改寫成這樣：

public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

這樣就會把所有的驗證改成即時偵測，但這樣可能會耗費效能，我們可以把 code 改寫成這樣去指定哪些檢查要即時的就好：

public function updated($propertyName)
    {
        $this->validateOnly($propertyName, [
            'name' => 'min:6',
            'email' => 'email',
        ]);
    }