Laravel-Livewire笔记系列(八)-Livewire 表单数据验证与消息提示-4

作者：温新

时间：2021-08-14

hi，我是温新，一名PHPer

1）本系列笔记使用Laravel8.x作为演示；

2）使用Livewire2.x版本

表单数据验证

Livewire中的表单数据验证与Laravel的表单数据验证是一样的，因此Laravel怎么进行验证的，Livewire以同样的方法进行。

下面对发布的留言的内容进行表单数据验证。

第一步：组件中添加数据验证

// app\Http\Livewire\LeaveMsgCreate.php

public function createLeaveMsg()
{
    $this->validate([
        'content'   =>  'required'
    ],[
        'content.required'=>'留言内容必须填写'
    ]);

    // 省略其它代码
}

第二步：前台显示错误信息

// leave-msg-create.blade.php
<div>
    <form wire:submit.prevent="createLeaveMsg">
        <div class="form-group">
            <label for="content">留言</label>
            <textarea wire:model.lazy="content" class="@error('content') is-invalid @enderror" id="content" rows="3"></textarea>

            @error('content')
                <ul class="invalid-feedback">
                    <li>{{ $message }}</li>
                </ul>
            @enderror
        </div>
        <button type="submit" class="btn btn-sm btn-primary">发布留言</button>
    </form>
</div>

消息提示

留言成功后给出一个友好的消息提示

第一步：修改组件控制器

// app/Http/Livewire/LeaveMsgIndex.php

public function refreshMsg()
{
    // 消息发送成功后监听事件
    // 因此消息发送成功后会进入到此方法
    session()->flash('message','发布留言成功');
}

第二步：页面显示消息

// leave-msg-index.blade.php
<div>
    @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session()->get('message') }}
        </div>
    @endif

    <livewire:leave-msg-create />
    <ul>
        @foreach($leaveMsgs as $v)
            <li>{{$v->user->name}}--{{ $v->content }}</li>
        @endforeach
    </ul>

    {{ $leaveMsgs->links() }}
</div>

我是温新

每天进步一点点，就一