Skip to content

Commit 1008101

Browse files
ArgoZhangArgoZhang
authored
doc(LoginTemplate): use ValidateForm in login form (#6451)
* refactor: 重构登录 UI 支持键盘 * doc: 更新模板内使用表单
1 parent a324fe4 commit 1008101

File tree

5 files changed

+98
-59
lines changed

5 files changed

+98
-59
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template1.razor‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,25 @@
66
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
77
<h4 class="text-dark">用户登录!</h4>
88
</div>
9-
<ValidateForm Model="@Model">
10-
<FloatingLabel DisplayText="邮箱" TValue="string" IsGroupBox="true" PlaceHolder="[email protected]" />
11-
<FloatingLabel DisplayText="密码" TValue="string" type="password" IsGroupBox="true" PlaceHolder="password" />
9+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
10+
<FloatingLabel DisplayText="邮箱" TValue="string" PlaceHolder="[email protected]" />
11+
<FloatingLabel DisplayText="密码" TValue="string" type="password" PlaceHolder="password" />
1212
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
13-
<Button Text="登录" Color="Color.Primary"></Button>
14-
<hr />
15-
<Button Text="忘记密码" Color="Color.Danger"></Button>
16-
<Button Text="用户注册" Color="Color.Info"></Button>
13+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
1714
</ValidateForm>
15+
<hr />
16+
<Button Text="忘记密码" Color="Color.Danger"></Button>
17+
<Button Text="用户注册" Color="Color.Info"></Button>
1818
</div>
1919

2020
@code {
2121
[CascadingParameter]
2222
[NotNull]
2323
private LoginModel? Model { get; set; }
24+
25+
private Task OnSubmit(EditContext context)
26+
{
27+
StateHasChanged();
28+
return Task.CompletedTask;
29+
}
2430
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template2.razor‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,25 @@
66
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
77
<h4 class="text-dark">用户登录!</h4>
88
</div>
9-
<ValidateForm Model="@Model">
9+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
1010
<BootstrapInput @bind-Value="Model.UserName" ShowLabel="false" PlaceHolder="请输入账号" />
1111
<BootstrapPassword @bind-Value="Model.Password" ShowLabel="false" PlaceHolder="请输入密码" />
1212
<Checkbox @bind-Value="@Model.RememberMe" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
13-
<Button Text="登录" Color="Color.Primary"></Button>
14-
<hr />
15-
<Button Text="忘记密码" Color="Color.Danger"></Button>
16-
<Button Text="用户注册" Color="Color.Info"></Button>
13+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
1714
</ValidateForm>
15+
<hr />
16+
<Button Text="忘记密码" Color="Color.Danger"></Button>
17+
<Button Text="用户注册" Color="Color.Info"></Button>
1818
</div>
1919

2020
@code {
2121
[CascadingParameter]
2222
[NotNull]
2323
private LoginModel? Model { get; set; }
24+
25+
private Task OnSubmit(EditContext context)
26+
{
27+
StateHasChanged();
28+
return Task.CompletedTask;
29+
}
2430
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template3.razor‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,27 @@
77
<Avatar Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/Argo-C.png")" IsCircle="true" Size="Size.ExtraExtraLarge" />
88
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
99
</div>
10-
<ValidateForm Model="@Model">
10+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
1111
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" />
1212
<BootstrapPassword ShowLabel="false" PlaceHolder="请输入密码" />
1313
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
14-
<Button Text="登录" Color="Color.Primary"></Button>
15-
<hr />
16-
<div class="d-flex">
17-
<Button Text="忘记密码" Color="Color.Danger"></Button>
18-
<Button Text="用户注册" Color="Color.Info"></Button>
19-
</div>
14+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
2015
</ValidateForm>
16+
<hr />
17+
<div class="d-flex">
18+
<Button Text="忘记密码" Color="Color.Danger"></Button>
19+
<Button Text="用户注册" Color="Color.Info"></Button>
20+
</div>
2121
</div>
2222

2323
@code {
2424
[CascadingParameter]
2525
[NotNull]
2626
private LoginModel? Model { get; set; }
27+
28+
private Task OnSubmit(EditContext context)
29+
{
30+
StateHasChanged();
31+
return Task.CompletedTask;
32+
}
2733
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template4.razor‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,43 @@
66
<span>登录</span>
77
<div class="login-register">没有账号？<a href="#">点此注册</a></div>
88
</div>
9-
<ValidateForm Model="@Model">
10-
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" />
9+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
10+
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" IsAutoFocus="true" />
1111
<BootstrapPassword ShowLabel="false" PlaceHolder="请输入密码" />
1212
<div class="login-sms">
1313
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住我" />
1414
<a href="#">短信验证登录</a>
1515
</div>
16-
<Button Text="登录" Color="Color.Primary"></Button>
17-
<div class="text-center my-4">
18-
<a href="#">已有账号，忘记密码</a>
16+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
17+
</ValidateForm>
18+
<div class="text-center my-4">
19+
<a href="#">已有账号，忘记密码</a>
20+
</div>
21+
<Divider Text="其他登录方式" />
22+
<div class="login-oauth">
23+
<div class="login-oauth-item">
24+
<i class="fa-brands fa-github"></i>
1925
</div>
20-
<Divider Text="其他登录方式" />
21-
<div class="login-oauth">
22-
<div class="login-oauth-item">
23-
<i class="fa-brands fa-github"></i>
24-
</div>
25-
<div class="login-oauth-item">
26-
<i class="fa-brands fa-twitter"></i>
27-
</div>
28-
<div class="login-oauth-item">
29-
<i class="fa-brands fa-apple"></i>
30-
</div>
31-
<div class="login-oauth-item">
32-
<i class="fa-brands fa-facebook"></i>
33-
</div>
26+
<div class="login-oauth-item">
27+
<i class="fa-brands fa-twitter"></i>
3428
</div>
35-
</ValidateForm>
29+
<div class="login-oauth-item">
30+
<i class="fa-brands fa-apple"></i>
31+
</div>
32+
<div class="login-oauth-item">
33+
<i class="fa-brands fa-facebook"></i>
34+
</div>
35+
</div>
3636
</div>
3737

3838
@code {
3939
[CascadingParameter]
4040
[NotNull]
4141
private LoginModel? Model { get; set; }
42+
43+
private Task OnSubmit(EditContext context)
44+
{
45+
StateHasChanged();
46+
return Task.CompletedTask;
47+
}
4248
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,12 @@
4949
{
5050
<h3>登录</h3>
5151
<p class="subtitle">使用你的 BootstrapBlazor 帐户。</p>
52-
<BootstrapInput type="email" class="input" placeholder="电子邮件或电话号码" @bind-Value="email"></BootstrapInput>
53-
<div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
54-
<Button class="button" Color="Color.Primary" OnClick="OnEmailSubmit">下一步</Button>
52+
<ValidateForm Model="_loginModel" OnValidSubmit="OnEmailSubmit">
53+
<BootstrapInput type="email" class="input" SkipValidate="true" IsAutoFocus="true"
54+
placeholder="电子邮件或电话号码" @bind-Value="@_loginModel.Email"></BootstrapInput>
55+
<div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
56+
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="下一步"></Button>
57+
</ValidateForm>
5558
<div class="links">
5659
<a href="#" @onclick:preventDefault>忘记用户名？</a>
5760
</div>
@@ -62,19 +65,22 @@
6265
else if (!isAuth)
6366
{
6467
<h3>输入你的密码</h3>
65-
<p class="email-display">@email</p>
66-
<BootstrapInput type="password" class="input" placeholder="密码" @bind-Value="password"></BootstrapInput>
67-
<div class="links">
68-
<a href="#" @onclick:preventDefault>忘记了密码？</a>
69-
</div>
70-
<Button class="button" Color="Color.Primary" OnClick="OnPasswordSubmit">下一步</Button>
68+
<p class="email-display">@_loginModel.Email</p>
69+
<ValidateForm Model="_loginModel" OnValidSubmit="OnPasswordSubmit">
70+
<BootstrapInput type="password" class="input" SkipValidate="true" IsAutoFocus="true"
71+
placeholder="密码" @bind-Value="@_loginModel.Password"></BootstrapInput>
72+
<div class="links">
73+
<a href="#" @onclick:preventDefault>忘记了密码？</a>
74+
</div>
75+
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="下一步"></Button>
76+
</ValidateForm>
7177
<div class="links">
7278
<a href="#" @onclick:preventDefault>其他登录方法</a>
7379
</div>
7480
}
7581
else
7682
{
77-
<div class="email-display2"><span>@email</span></div>
83+
<div class="email-display2"><span>@_loginModel.Email</span></div>
7884
<h5 class="text-center mt-3 mb-0">欢迎，您已成功登录</h5>
7985
<div class="login-video-wrap">
8086
<video class="login-video" autoplay="autoplay" playsinline="playsinline" disablepictureinpicture="">
@@ -86,7 +92,7 @@
8692
</video>
8793
</div>
8894
<p class="text-center text-muted" style="font-size: 0.75rem;">此登录高仿微软登录 UI</p>
89-
<Button class="button" Color="Color.Primary" OnClick="OnEnterSubmit">进入</Button>
95+
<Button class="button" Color="Color.Primary">进入</Button>
9096
}
9197
</div>
9298
</div>
@@ -95,13 +101,16 @@
95101
@code {
96102
private bool isEmailEntered = false;
97103
private bool isAuth = false;
98-
private string email = "[email protected]";
99-
private string password = "123456";
100104
private bool showEmailError = false;
105+
private LoginModel _loginModel = new LoginModel()
106+
{
107+
Email = "[email protected]",
108+
Password = "123456"
109+
};
101110

102-
private void OnEmailSubmit()
111+
private Task OnEmailSubmit(EditContext context)
103112
{
104-
if (string.IsNullOrWhiteSpace(email))
113+
if (string.IsNullOrWhiteSpace(_loginModel.Email))
105114
{
106115
showEmailError = true;
107116
}
@@ -110,22 +119,28 @@
110119
showEmailError = false;
111120
isEmailEntered = true;
112121
}
122+
StateHasChanged();
123+
return Task.CompletedTask;
113124
}
114125

115-
private void OnPasswordSubmit()
126+
private Task OnPasswordSubmit(EditContext context)
116127
{
117128
// 数据库检查密码逻辑可以在这里实现
118129
// 演示代码一律通过
119130
isAuth = true;
131+
StateHasChanged();
132+
return Task.CompletedTask;
120133
}
121134

122-
private void OnEnterSubmit()
135+
private void GoBack()
123136
{
124-
137+
isEmailEntered = false;
125138
}
126139

127-
private void GoBack()
140+
class LoginModel
128141
{
129-
isEmailEntered = false;
142+
public string? Email { get; set; }
143+
144+
public string? Password { get; set; }
130145
}
131146
}

0 commit comments

Comments
 (0)