Livewire validateOnly 与 validate 在同一组件中

Question

我在使用 livewire ( laravel ) 进行数据验证时遇到了一点问题。

我注意到，当我设置实时验证 (validateOnly()) 时，表单中输入的信息会实时验证。在这个级别上一切都很好。

但是当我点击按钮提交表单时（即使表单包含错误），该表单不幸被发送到我在 wire:submit 中定义的函数。

所以我的问题是：是否可以在提交表单后重新验证接收数据的 wire:submit 方法中的信息？如果是这样，我该怎么做？

PS：我尝试在我的 wire:submit 函数中设置验证方法，但没有任何反应。它阻止提交表单，但不会给我一个错误。

我的源代码：

<?php
class UserProfile extends Component
{
    use WithFileUploads;

    public $countries = [];
    public $profile = [];

    protected function rules() {
        if ( !LivewireUpdateProfileRequest::authorize() ) {
            return abort(403, "Your are not authorized to make this request !");
        }
        $rules = LivewireUpdateProfileRequest::rules();

        if ( !empty($this->profile['phone']) ) {
            $rules['profile.phone'] = [ 'required', 'phone_number:' . $this->profile['phone'] ];
        }

        return $rules;
    }


    public function mount()
    {
        $this->countries = Countries::all();
        $this->profile = Auth::user()->toArray();
    }


    public function updateUserProfile()
    {
        $validatedData = $this->validate();
        dd( $validatedData );
    }

    public function updated($key, $value)
    {
        $this->validateOnly($key);
    }


    public function render()
    {
        return view('livewire.user-profile');
    }
}

HTML 源代码：

 <form action="" method="POST" wire:submit.prevent="updateUserProfile">
    <input name="profile.email" type="email" wire:model="profile.email" />
    @error('profile.email') {{ $message }} @enderror

    <input name="profile.phone" type="tel" wire:model="profile.phone" />
    @error('profile.phone') {{ $message }} @enderror
</form>

这里是 LivewireUpdateProfileRequest 内容：

<?php

namespace App\Http\Requests\Web;

use Illuminate\Foundation\Http\FormRequest;

class LivewireUpdateProfileRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public static function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public static function rules()
    {
        return [
            'profile' => ['required', 'array', 'size:10'],
            'profile.firstname' => ['required', 'string'],
            'profile.lastname' => ['required', 'string'],
            'profile.email' => ['required', 'email'],
            'profile.phone' => ['required', 'phone_number:33'],
            'profile.gender' => ['required', 'gender'],
            'profile.image' => ['sometimes', 'image', 'mimes:png,jpg,jpeg'],
            'profile.address' => ['required', 'string'],
            'profile.city' => ['required', 'string'],
            'profile.country_id' => ['required', 'exists:countries,id'],
            'profile.birth_at' => ['required', 'date', 'min_age:18'],
        ];
    }
}

Answer 1

通常在您的保存方法中，您会为所有字段再次运行验证。 livewire 文档分享了这个例子：

Livewire 组件：

class ContactForm extends Component
{
    public $name;
    public $email;

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

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

    public function saveContact()
    {
        $validatedData = $this->validate();

        Contact::create($validatedData);
    }
}

使用此 HTML：

<form wire:submit.prevent="saveContact">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

这应该使用updated-方法近乎实时地验证输入，并使用saveContact-方法提交。

如果您可以分享您的代码，我们可以更轻松地进行调试。

来源：https://laravel-livewire.com/docs/2.x/input-validation#real-time-validation