Laravel-Livewire笔记系列(八)-Livewire 表单数据验证与消息提示-4
作者:温新
时间:2021-08-14
hi,我是温新,一名PHPer
1)本系列笔记使用Laravel8.x作为演示;
2)使用Livewire2.x版本
表单数据验证
Livewire
中的表单数据验证与Laravel
的表单数据验证是一样的,因此Laravel怎么进行验证的,Livewire以同样的方法进行。
下面对发布的留言的内容进行表单数据验证。
第一步:组件中添加数据验证
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// app\Http\Livewire\LeaveMsgCreate.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">createLeaveMsg</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">validate</span>([</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">'content'</span> <span style="box-sizing: border-box">=></span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">'required'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> ],[</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">'content.required'</span><span style="box-sizing: border-box">=></span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">'留言内容必须填写'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> ]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 省略其它代码</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
第二步:前台显示错误信息
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// leave-msg-create.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">form</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">submit</span>.<span style="box-sizing: border-box;color: rgb(130, 177, 255)">prevent</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"createLeaveMsg"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">class</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"form-group"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">label</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">for</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"content"</span><span style="box-sizing: border-box">></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">留言</span><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">label</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">textarea</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">model</span>.<span style="box-sizing: border-box;color: rgb(130, 177, 255)">lazy</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"content"</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">class</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"@error('content') is-invalid @enderror"</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">id</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"content"</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">rows</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"3"</span><span style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">textarea</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">@error</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'content'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">ul</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">class</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"invalid-feedback"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">li</span><span style="box-sizing: border-box">></span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$message</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">li</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">ul</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">@enderror</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">button</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">type</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"submit"</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">class</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"btn btn-sm btn-primary"</span><span style="box-sizing: border-box">></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">发布留言</span><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">button</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">form</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span>
消息提示
留言成功后给出一个友好的消息提示
第一步:修改组件控制器
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// app/Http/Livewire/LeaveMsgIndex.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">refreshMsg</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 消息发送成功后监听事件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 因此消息发送成功后会进入到此方法</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">session</span>()<span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">flash</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'message'</span>,<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'发布留言成功'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
第二步:页面显示消息
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// leave-msg-index.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">@if</span> (<span style="box-sizing: border-box;color: rgb(130, 177, 255)">session</span>()<span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">has</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'message'</span>))</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">class</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"alert alert-success"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{ <span style="box-sizing: border-box;color: rgb(130, 177, 255)">session</span>()<span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">get</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'message'</span>) }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">@endif</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">livewire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">leave</span><span style="box-sizing: border-box">-</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">msg</span><span style="box-sizing: border-box">-</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">create</span> <span style="box-sizing: border-box">/></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">ul</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">@foreach</span>(<span style="box-sizing: border-box;color: rgb(128, 203, 196)">$leaveMsgs</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">as</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$v</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">li</span><span style="box-sizing: border-box">></span>{{<span style="box-sizing: border-box;color: rgb(128, 203, 196)">$v</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">user</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">name</span>}}<span style="box-sizing: border-box">--</span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$v</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">li</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">@endforeach</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">ul</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$leaveMsgs</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">links</span>() }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span>
我是温新
每天进步一点点,就一
请登录后再评论