by Devin Yang

建立于: 2年前 ( 更新: 2年前 )

本文透过简易的Laravel livewire范例,
看看livewire组件如何验证使用者输入错误,并显示中文错误信息。 

功能测试,活动名称不填,并且网址乱打后,送出表单。 
在下图画面中「红色」的字我们可以看见是非常友善的中文化的错误信息啦。 

 

一、首先设置config/app.php,添加环境变量,并且默认中文。 
这样.env中不需调整默认就吃中文语言档。

    /*
    |--------------------------------------------------------------------------
    | Application Locale Configuration
    |--------------------------------------------------------------------------
    |
    | The application locale determines the default locale that will be used
    | by the translation service provider. You are free to set this value
    | to any of the locales which will be supported by the application.
    |
    */
    'locale' => env("APP_LOCALE","zh_TW"),

二、放入中文化语言档的lang/zh_TW/validation.php,网络上应该Google的到。 
如果您google不到,那直接拿自己Laravel项目目录下的lang/en/validation.php翻吧.😱 

三、过於简单,直接看我的组件的Class吧

$rules直接设置规则及$validationAttributes设置好input栏位的中文名称。

class RedirectUrlsForm extends Component
{
    use Common;
    public $listeners = ['setOaName'];
    public $redirect_url_id; 
    public $action_name;
    public $action_key;
    public $target_url;
    public $tags;
    public $errors = [];
    protected $rules = [ 
        'action_name' => 'required',
        'target_url' => 'required|url',
        'oa_id'=>'required'
    ];
    protected $validationAttributes = [
        'action_name' => '活动名称',
        'target_url' => '导向网址'
    ];
    public function store(){
        $validatedData=$this->validate();
        RedirectUrl::create($validatedData);
    }
    public function render()
    {
        return view('livewire.redirect-urls-form');
    }
}

上方进程码中检查规则,符合规则放行,表单数据直接存入Model啦。
$rules的地方理论上要定义所有的栏位,可不填的就打nullable。
如果要对栏位数据进行特殊处理,就分开update,正常情况下相关方便。

$validatedData=$this->validate();


四,这是Laravel livewire的view部份内容,

可以看到表单submit时,会调用store()的方式

{{-- RedirectUrlsForm --}}
<div class="row root">
    <label class="d-none rootlabel">{{ $this->getName() }}</label>
    <div class="col-12 col-sm-6 col-lg-6">
        <div class="card" id="sample-login">
            <form wire:submit.prevent="store">
                <div class="card-body pb-0">
                    <p class="text-muted">请填写活动的名称及活动网址</p>
                    <div class="form-group">
                        <label>活动名称 @error("action_name")<span class="text-danger">{{$message}}!@enderror</span></label>
                        <div class="input-group mb-3">
                            <span class="input-group-text"><i class="fa-solid fa-flag-pennant"></i></span>
                            <input type="text" wire:model="action_name" class="form-control" placeholder="可识别的名称" aria-label="活动名称" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>导向网址 @error("target_url")<span class="text-danger">{{$message}}!</span>@enderror</label>
                        <div class="input-group">
                            <span class="input-group-text" id="basic-addon2"><i class="fa-sharp fa-solid fa-link-horizontal"></i></span>
                            <input type="text" wire:model="target_url" class="form-control" placeholder="跳转的活动网址" aria-label="导向网址" aria-describedby="basic-addon2">
                        </div>
                    </div>


五、验证功能,表单乱打

如同上方的截图中可直接显示出正确的中文错误信息。 
在View的部份,错误信息就可以显示出中文本了
「导向网址的格式错误」及「请填写活动名称」。 

详细的使用方式也可以自行去查看Laravel Livewire的官网 ,写的很清楚。

@error("action_name")<span class="text-danger">{{$message}}!@enderror


本范例采用Laravel框架9.31.0进行

artisan -V
Laravel Framework 9.31.0

Tags: laravel範例 laravel教學 livewire範例 laravel

Devin Yang

文章内容无法一一说明,如果您有什么不了解处,欢印提问哦:)

No Comment

Post your comment

需要登入才可留言!

类似文章


dlaravel

使用docker in docker创建D-Laravel测试环境。

D-Laravel是一个极易使用并且极有弹性的Laravel开发环境,只要您是Mac的使用者,就算不懂Docker也可以透过他来创建Laravel的项目,进行开发,由於最近添加.env的功能新功能时,急者push,却没有完整测试,搞出了一堆新的Bug,所以,这次新建了一个新的dlaravel_test,bash的测试工具,透过doceker in docker的方式来跑测试。确保D-Laravel的每一次释出都能是一个稳定的版本。

laravel

在laravel中自定义自己的helper

在Laravel的框架中,包含了相当大量的PHP功能(php functions),称为helper。 https://laravel.com/docs/5.6/helpers 那我们要如何在Laravel中自定义自己的helper呢,其实相当简单呢.. 在composer.json中autoload内的files新建即可。

laravel,oauth2

我最常用的Laravel passport命令

Laravel提供了相当多好用的Package,像Passport就是其中之一,当网站需要自架OAuth2验证主机时,真的是省时省力。本站为例,因为采前后台分离机制(有两个不同的Laravel项目),我都透过前台的WEB进行验证。基本上,我还有很多其他不同的项目,也都靠Laravel提供的OAuth2就搞定跨域验证。