Laravel Livewire动态输入框重复选项验证方案咨询

我需要验证动态添加的选项输入框是否存在重复选择的情况——比如不能同时在两个输入框里选「Size」。使用Laravel Livewire实现动态添加Size、Color这类选项输入框，当用户选择已被选过的选项时，要提示该选项已被选中。

当前Livewire控制器代码 #

public $i = -1;
public $inputs = [];
public $options = ['Size', 'Color', 'Material', 'Style'];
public $option_name; 

function rules()
{
    $rules = [];

    if ($this->inputs) {
        foreach ($this->inputs as $key => $val) {
            $rules['option_name.' . $val] =  ['required'];
        }
        return $rules;
    }
}

public function addLine($i)
{  
    $i = $i + 1;
    $this->i = $i;
    array_push($this->inputs, $i);
}

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

当前Livewire视图代码 #

@forelse ($inputs as $key => $value)
    <x-native-select label="Option name" :options="$options" wire:model="option_name.{{ $value }}"/> {{-- 使用livewire-wireui组件 --}}
@empty
@endforelse
    
<a wire:click="addLine({{ $i }})" class="mt-4 text-sm cursor-pointer">
    + Add another option
</a>

1. 修改验证规则，添加唯一性验证 #

在rules()方法中，给每个option_name.*字段添加自定义闭包验证，检查当前选项是否已被其他输入框选中：

function rules()
{
    $rules = [];

    if ($this->inputs) {
        foreach ($this->inputs as $key => $val) {
            $rules['option_name.' . $val] = [
                'required',
                function ($attribute, $value, $fail) use ($val) {
                    // 收集所有已选选项，排除当前字段的值
                    $selectedOptions = collect($this->option_name)
                        ->filter(fn($item, $index) => $index != $val)
                        ->toArray();
                    
                    // 若当前值已存在，触发错误提示
                    if (in_array($value, $selectedOptions)) {
                        $fail('该选项已被选中，请选择其他选项');
                    }
                }
            ];
        }
        return $rules;
    }
    
    return [];
}

2. 保留实时验证逻辑 #

原updated方法已实现字段更新时触发验证，无需修改，确保每次选择后即时检查：

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

3. 优化视图显示错误提示 #

WireUI组件会自动读取错误信息，也可手动添加错误提示标签增强可读性：

@forelse ($inputs as $key => $value)
    <div class="mb-4">
        <x-native-select label="Option name" :options="$options" wire:model="option_name.{{ $value }}"/>
        @error('option_name.' . $value)
            <span class="text-red-500 text-sm mt-1">{{ $message }}</span>
        @enderror
    </div>
@empty
@endforelse
    
<a wire:click="addLine({{ $i }})" class="mt-4 text-sm cursor-pointer">
    + Add another option
</a>

可选优化：简化添加逻辑 #

修改addLine方法，无需传递参数，直接自增索引：

public function addLine()
{  
    $this->i++;
    $this->inputs[] = $this->i;
}

对应视图调用改为：

<a wire:click="addLine" class="mt-4 text-sm cursor-pointer">
    + Add another option
</a>

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