如何在 Livewire 2 中实现实时验证？

Posted 2023-02-22

【中文标题】如何在 Livewire 2 中实现实时验证？

【英文标题】：How to implement real time validation in Livewire 2?

【发布时间】：2021-02-06 04:17:53

【问题描述】：

在我应用新的 livewire V2 编程风格之前，我有一个连接到模型的各个属性的表单。 为了触发字段的实时验证，我在组件中使用了这个（例如 name 属性）：

public function updatedName()
      $this->validate(['name' =>'required|max:127']);

name 是名为 Malt 的模型的属性。 我的问题是：如何修改这个 updatedName() 函数？

我已经明白我应该将函数重命名为updatedMaltName，因此我尝试了这个。

public function updatedMaltName() 
  $this->validate(['name' =>'required|max:127']);

但它不起作用。相反，它会在我在字段中键入字符时立即显示错误“名称字段是必需的”（这与应该发生的情况相反），并且即使我清空该字段也永远不会隐藏此错误。

我也试过了

public function updatedMaltName()
      $this->validate(['malt.name' =>'required|max:127']);
    

但这根本不起作用。

【参考方案1】：

在组件类的$rules 属性中定义您的规则集。

protected $rules = [
    'malt.name' => 'required|max:127',
];

您现在可以挂接到刚刚更新的字段上的updated() 方法和validateOnly()。现在，这将验证模型上正在更新的所有字段，并使用在 $rules 中定义的规则集。

public function updated($property)

    $this->validateOnly($property);

$property 参数是您要更新的字段的名称，例如malt.name。

您当然可以挂钩到您正在更新的特定属性，并仅验证该字段。这假设您在属性 $malt 中有一个模型，其中包含属性 name。

public function updatedMaltName()

    $this->validateOnly('malt.name');

【讨论】：

感谢您的回答。我已经尝试了这两种解决方案，但它们都不起作用。当我在 malt.name 字段中键入一个字符时，将调用更新的函数并且 dd($property) 返回“malt.name”。我还用 1 更改了 127 并输入了 2 或 3 个字符，但没有任何反应。受保护的 $rules 设置正确。我可能还想念别的东西。

我最终成功了。我使用了一个输入组组件，但我没有传递给它正确的属性。 '姓名。而不是'malt.name'

对于看到这个的未来人们，如果你用wire:model.defer 连接你的组件，那么 livewire 不会向组件发送更新。因此，如果您想使用实时验证，请改用wire:model

@SühaBoncukçu 这正是wire:model.defer 所做的，所以这是预期的行为。对于那些担心发出过多请求的人，您可以通过使用wire:model.lazy 来限制它们或引入更慢的去抖动，wire:model.debounce.500ms。通过使用wire:model.defer，请求被排队并在下一个请求发出时发送。