Laravel Livewire同视图双模态框验证异常排查

我在同一Blade视图的用户列表页中使用两个Livewire模态框，分别用于编辑用户和新增用户。想要验证输入的邮箱在数据库中不重复，但目前在新增模态框中输入邮箱后，仍触发“需输入邮箱”的验证错误。请帮忙排查问题所在。

Blade视图代码 #

<div>
<h1 class="text-2xl font-semibold text-gray-900">Users</h1>
<div class="py-4 space-y-4">
    <div class="flex justify-between">
        <div class="w-1/4">
            
            <x-input.text wire:model="search" placeholder="Search Users..."/>
        
        </div>
        <div>

            <x-button.primary wire:click="create"><x-icon.plus/> New</x-button.primary>

        </div>
    </div>
</div>

<div class="flex-col space-y-4">
    <x-table>
        <x-slot name="head">
            <x-table.heading sortable multi-column wire:click="sortBy('id')" :direction="$sorts['id'] ?? null">Id</x-table.heading>
            <x-table.heading sortable multi-column wire:click="sortBy('email')" :direction="$sorts['email'] ?? null">Email</x-table.heading>
            <x-table.heading sortable multi-column wire:click="sortBy('username')" :direction="$sorts['usernames'] ?? null">User Name</x-table.heading>
            <x-table.heading sortable multi-column wire:click="sortBy('accesslevel')" :direction="$sorts['accesslevel'] ?? null">Access Level</x-table.heading>
            <x-table.heading />
        </x-slot>

        <x-slot name="body">
         
            @forelse ($users as $user)
            <x-table.row wire:loading.class.delay="opacity-50" wire:key="row-{{ $user->id }}">
             

                <x-table.cell>
                    
                         
                        <p class="text-cool-gray-600">
                            {{ $user->id }}
                        </p>
                   
                </x-table.cell>

                <x-table.cell>
                    <span class="text-cool-gray-900 font-medium">{{ $user->email }} </span>
                </x-table.cell>

                <x-table.cell>
                    <span class="inline-flex text-cool-gray-900  font-medium ">
                        {{ $user->username }}
                    </span>
                </x-table.cell>

                <x-table.cell>
                    {{ $user->accesslevel }}
                </x-table.cell>

                <x-table.cell>
                    <x-button.link wire:click="edit({{ $user->id }})">Edit</x-button.link>
                </x-table.cell>
            </x-table.row>
            @empty
            <x-table.row>
                <x-table.cell colspan="6">
                    <div class="flex justify-center items-center space-x-2">
                        <x-icon.inbox class="h-8 w-8 text-cool-gray-400" />
                        <span class="font-medium py-8 text-cool-gray-400 text-xl">No users found...</span>
                    </div>
                </x-table.cell>
            </x-table.row>
            @endforelse
        </x-slot>
    </x-table>

</div>

<!-- Edit User -->
<div>
    <form wire:submit.prevent="save">
        <x-modal.dialog wire:model.lazy="showEditModal">
            <x-slot  name='title' >
            
                Edit User

            </x-slot>
            
                <x-slot name='content'>
                    
                    <div>
                        <div>
                            <x-input.group for="email" label="Email" :error="$errors->first('editing.email')">
                                
                                <x-input.text wire:model.lazy="editing.email" id="email" placeholder="Email"/>
                                
                            </x-input.group>
                        </div>

                    </div>

                    <x-input.group for="username" label="Username" :error="$errors->first('editing.username')">
                        
                        <x-input.text wire:model.lazzy="editing.username" id="username" placeholder="Username"/>
                    
                    </x-input.group> 
                    
                    <x-input.group for="accesslevel" label="Access Level" :error="$errors->first('editing.accesslevel')">
                        
                        <x-input.select wire:model.lazy="editing.accesslevel" id="accesslevel">

                            @foreach (App\Models\User::LEVEL as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach

                        </x-input.select>

                    </x-input.group>
                

            </x-slot>
            
            
            <x-slot name='footer'>
                
                <x-button.secondary wire:click="$set('showEditModal', false)">Cancel</x-button.secondary>

                
                <div>
                    <x-button.primary type="submit">Save</x-button.primary>
                    @if ($errors->any())
            
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>
            </x-slot>
        
        </x-modal.dialog>

    </form>
</div>
<!--Create user -->
<form wire:submit.prevent="saveCreate">
    <x-modal.dialog wire:model.lazy="showCreateModal">
        <x-slot  name='title' >
        
            Create User

        </x-slot>
        
            <x-slot name='content'>
                 

                
                <x-input.group for="emailCreate" label="Email" :error="$errors->first('creating.email')">
                    
                    <x-input.text wire:model.lazy="creating.email" id="emailCreate" placeholder="Email"/>
                
                </x-input.group>
                
                <x-input.group for="usernameCreate" label="Username" :error="$errors->first('creating.username')">
                    
                    <x-input.text wire:model.lazy="creating.username" id="usernameCreate" placeholder="Username"/>
                
                </x-input.group>

                
                <x-input.group for="accesslevelCreate" label="Access Level" :error="$errors->first('creating.accesslevel')">
                    
                    <x-input.select wire:model.lazy="creating.accesslevel" id="accesslevelCreate">

                        @foreach (App\Models\User::LEVEL as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach

                    </x-input.select>

                    

                </x-input.group>
            

        </x-slot>
        
        
        <x-slot name='footer'>
            
            <x-button.secondary wire:click="$set('showCreateModal', false)">Cancel</x-button.secondary>
            <div>
            <x-button.primary type="submit">Save</x-button.primary>
            @if ($errors->any())
    
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
        </div>

        </x-slot>
    
    </x-modal.dialog>

</form>

Livewire组件代码 #

namespace App\Http\Livewire;

use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rule;
use Livewire\Component;

class UserTable extends Component
{
    
    public $showEditModal = false;
    public $showCreateModal = false;
    public $password = '';
    public $search = '';  

    
    public function mount() 
    { 
        
        $this->editing = User::make();
        $this->creating = User::make();
        $this->editing = $this->makeBlankUser(); 
    }
    public User $editing;
    public User $creating;

    public function rules() 
    { 
        return [ 
            'editing.email' => 'required',
            'editing.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
            'editing.username' => '',
            'editing.password' => '',
            'creating.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
            'creating.username' => 'required',
            'creating.email' => 'required|email',
        ];        
           
     }


    
    public function edit(User $user)
    {       
        $this->editing = $user;      

        $this->showEditModal = true;
    }

    public function makeBlankUser()
    {
        return User::make([ 'accesslevel' => '3']);
    }
    
    public function create()
    {
        if ($this->creating->getKey()) $this->creating = $this->makeBlankUser();
        $this->showCreateModal = true;
    }

    public function save()
    {      
       
        $this->validate();
        
        $this->editing->save();

        $this->showEditModal = false;
        
        
    }
    public function saveCreate()
    {
        

        $this->validate();     
        
        
        $this->creating->save();

        $this->showCreateModal = false;
        
        
    }

    public function render()
    {
        return view('livewire.user-table', [
            'users' => User::search('email',$this->search)->paginate(25),
        ]);
    }
}

核心问题 #

点击新增模态框的保存按钮时，saveCreate方法调用$this->validate()会验证所有在rules()中定义的规则，包括编辑用的editing.email字段（规则为required）。此时editing是空白模型，editing.email为空，因此触发“需输入邮箱”的错误，而非新增字段的验证问题。

修复步骤 #

1. 拆分验证规则，避免交叉验证 #

将编辑和新增的验证规则拆分，在对应的保存方法中仅验证当前场景的字段：

public function save()
{
    $this->validate([
        'editing.email' => ['required', 'email', Rule::unique('users', 'email')->ignore($this->editing->id)],
        'editing.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
    ]);
    
    $this->editing->save();
    $this->showEditModal = false;
}

public function saveCreate()
{
    $this->validate([
        'creating.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
        'creating.username' => 'required',
        'creating.email' => ['required', 'email', Rule::unique('users', 'email')],
    ]);
    
    // 补充密码字段（User模型通常要求密码必填）
    $this->creating->password = Hash::make('password'); // 可改为用户输入或生成随机密码
    $this->creating->save();
    
    $this->showCreateModal = false;
}

2. 修复Blade中的拼写错误 #

编辑模态框中username字段的wire:model.lazzy拼写错误，改为wire:model.lazy：

<x-input.text wire:model.lazy="editing.username" id="username" placeholder="Username"/>

3. 优化mount方法冗余代码 #

去掉重复的$this->editing = User::make();：

public function mount()
{
    $this->editing = $this->makeBlankUser();
    $this->creating = User::make();
}

4. 可选：新增密码输入项 #

若需要用户在新增时输入密码，可在新增模态框中添加：

<x-input.group for="passwordCreate" label="Password" :error="$errors->first('creating.password')">
    <x-input.text wire:model.lazy="creating.password" id="passwordCreate" type="password" placeholder="Password"/>
</x-input.group>

同时在新增验证规则中添加'creating.password' => 'required|min:8'。

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