前言
上一篇我们搞定了分页，原本今天想搞定表单验证相关的。但是想想为什么不趁着表单验证把用户登录注册自己实现一次呢？就不用官方提供的组件了。
开整
注册先行
创建组件
1
|
./vendor/bin/sail artisan make:livewire Auth/Register
|
定义路由
1
|
Route::get('/register', \App\Http\Livewire\Auth\Register::class);
|
编辑页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<div class="h-screen w-screen flex justify-center items-center" style="background-image: url('/static/img/scattered-forcefields.svg')">
<div class="inline-block w-80">
<div class="text-2xl text-center">注册</div>
{{-- To attain knowledge, add things every day; To attain wisdom, subtract things every day. --}}
<form wire:submit.prevent="register">
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text">邮箱</span>
</label>
<input wire:model="email" type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
@error('email')
<label class="label">
<span class="label-text-alt text-error">{{ $message }}</span>
</label>
@enderror
</div>
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text">用户名</span>
</label>
<input wire:model="name" type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
@error('name')
<label class="label">
<span class="label-text-alt text-error">{{ $message }}</span>
</label>
@enderror
</div>
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text">密码</span>
</label>
<input wire:model="password" type="password" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
@error('password')
<label class="label">
<span class="label-text-alt text-error">{{ $message }}</span>
</label>
@enderror
</div>
<div class="form-control w-full max-w-xs">
<label class="label">
<span class="label-text">确认密码</span>
</label>
<input wire:model="password_confirmation" type="password" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
@error('password_confirmation')
<label class="label">
<span class="label-text-alt text-error">{{ $message }}</span>
</label>
@enderror
</div>
<div class="flex justify-end">
<button class="btn">注册</button>
</div>
</form>
</div>
</div>
|
页面这部分简单说两句，其实就是用了 tailwind 和 daisy 的样式，注意的点就是 model 绑定和 error 的处理。
组件部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<?php
namespace App\Http\Livewire\Auth;
use App\Models\User;
use DragonCode\Support\Concerns\Makeable;
use Illuminate\Validation\Rules\Password;
use Livewire\Component;
class Register extends Component
{
public $name;
public $email;
public $password;
public $password_confirmation;
// 为了验证密码字段，不能采用 rules 属性，而采用 rules 方法
protected function rules()
{
return [
'name' => 'required|min:6|unique:users',
'email' => 'required|email|unique:users',
'password' => ['required', 'confirmed', Password::min(8)->mixedCase()->numbers()->symbols()],
'password_confirmation' => 'required',
];
}
public function updated($propertyName)
{
$this->validateOnly($propertyName);
// 如果输入的是密码字段，需要跟验证字段同时验证
if (in_array($propertyName, ['password', 'password_confirmation'])) {
$this->validateOnly('password_confirmation');
$this->validateOnly('password');
}
}
public function register() {
$this->validate();
$res = User::create([
'name' => $this->name,
'email' => $this->email,
'password' => \Hash::make($this->password),
]);
dd($res);
}
public function render()
{
return view('livewire.auth.register');
}
}
|
这里验证没有采用 rules 属性，而是采用方法，是为了密码的验证构造，如果采用属性，不支持这种构造方式。另几个就是调用了 updated 方法。这里的特殊之处就是如果密码字段更新了，则需要同时验证两个密码和确认密码两个字段。在执行注册前，兜底调用一下 validate 方法进行验证。如果验证通过则进行注册。
最后我们看下数据库就可以了。
总结
今天就先到这，明天搞登陆后跳转，登录。等相关操作吧。
demo 项目地址：livewire-demo