Skip to content

doc(LoginTemplate): use ValidateForm in login form #6451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 20, 2025
Merged

doc(LoginTemplate): use ValidateForm in login form #6451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
386117a
refactor: 重构登录 UI 支持键盘
ArgoZhang Jul 20, 2025
7e436a4
doc: 更新模板内使用表单
ArgoZhang Jul 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template1.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,25 @@
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
<h4 class="text-dark">用户登录!</h4>
</div>
<ValidateForm Model="@Model">
<FloatingLabel DisplayText="邮箱" TValue="string" IsGroupBox="true" PlaceHolder="[email protected]" />
<FloatingLabel DisplayText="密码" TValue="string" type="password" IsGroupBox="true" PlaceHolder="password" />
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
<FloatingLabel DisplayText="邮箱" TValue="string" PlaceHolder="[email protected]" />
<FloatingLabel DisplayText="密码" TValue="string" type="password" PlaceHolder="password" />
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
<Button Text="登录" Color="Color.Primary"></Button>
<hr />
<Button Text="忘记密码" Color="Color.Danger"></Button>
<Button Text="用户注册" Color="Color.Info"></Button>
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
</ValidateForm>
<hr />
<Button Text="忘记密码" Color="Color.Danger"></Button>
<Button Text="用户注册" Color="Color.Info"></Button>
</div>

@code {
[CascadingParameter]
[NotNull]
private LoginModel? Model { get; set; }

private Task OnSubmit(EditContext context)
{
StateHasChanged();
return Task.CompletedTask;
}
}
16 changes: 11 additions & 5 deletions src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template2.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,25 @@
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
<h4 class="text-dark">用户登录!</h4>
</div>
<ValidateForm Model="@Model">
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
<BootstrapInput @bind-Value="Model.UserName" ShowLabel="false" PlaceHolder="请输入账号" />
<BootstrapPassword @bind-Value="Model.Password" ShowLabel="false" PlaceHolder="请输入密码" />
<Checkbox @bind-Value="@Model.RememberMe" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
<Button Text="登录" Color="Color.Primary"></Button>
<hr />
<Button Text="忘记密码" Color="Color.Danger"></Button>
<Button Text="用户注册" Color="Color.Info"></Button>
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
</ValidateForm>
<hr />
<Button Text="忘记密码" Color="Color.Danger"></Button>
<Button Text="用户注册" Color="Color.Info"></Button>
</div>

@code {
[CascadingParameter]
[NotNull]
private LoginModel? Model { get; set; }

private Task OnSubmit(EditContext context)
{
StateHasChanged();
return Task.CompletedTask;
}
}
20 changes: 13 additions & 7 deletions src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template3.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,27 @@
<Avatar Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/Argo-C.png")" IsCircle="true" Size="Size.ExtraExtraLarge" />
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
</div>
<ValidateForm Model="@Model">
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" />
<BootstrapPassword ShowLabel="false" PlaceHolder="请输入密码" />
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
<Button Text="登录" Color="Color.Primary"></Button>
<hr />
<div class="d-flex">
<Button Text="忘记密码" Color="Color.Danger"></Button>
<Button Text="用户注册" Color="Color.Info"></Button>
</div>
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
</ValidateForm>
<hr />
<div class="d-flex">
<Button Text="忘记密码" Color="Color.Danger"></Button>
<Button Text="用户注册" Color="Color.Info"></Button>
</div>
</div>

@code {
[CascadingParameter]
[NotNull]
private LoginModel? Model { get; set; }

private Task OnSubmit(EditContext context)
{
StateHasChanged();
return Task.CompletedTask;
}
}
46 changes: 26 additions & 20 deletions src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template4.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,43 @@
<span>登录</span>
<div class="login-register">没有账号？<a href="#">点此注册</a></div>
</div>
<ValidateForm Model="@Model">
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" />
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" IsAutoFocus="true" />
<BootstrapPassword ShowLabel="false" PlaceHolder="请输入密码" />
<div class="login-sms">
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住我" />
<a href="#">短信验证登录</a>
</div>
<Button Text="登录" Color="Color.Primary"></Button>
<div class="text-center my-4">
<a href="#">已有账号，忘记密码</a>
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
</ValidateForm>
<div class="text-center my-4">
<a href="#">已有账号，忘记密码</a>
</div>
<Divider Text="其他登录方式" />
<div class="login-oauth">
<div class="login-oauth-item">
<i class="fa-brands fa-github"></i>
</div>
<Divider Text="其他登录方式" />
<div class="login-oauth">
<div class="login-oauth-item">
<i class="fa-brands fa-github"></i>
</div>
<div class="login-oauth-item">
<i class="fa-brands fa-twitter"></i>
</div>
<div class="login-oauth-item">
<i class="fa-brands fa-apple"></i>
</div>
<div class="login-oauth-item">
<i class="fa-brands fa-facebook"></i>
</div>
<div class="login-oauth-item">
<i class="fa-brands fa-twitter"></i>
</div>
</ValidateForm>
<div class="login-oauth-item">
<i class="fa-brands fa-apple"></i>
</div>
<div class="login-oauth-item">
<i class="fa-brands fa-facebook"></i>
</div>
</div>
</div>

@code {
[CascadingParameter]
[NotNull]
private LoginModel? Model { get; set; }

private Task OnSubmit(EditContext context)
{
StateHasChanged();
return Task.CompletedTask;
}
}
55 changes: 35 additions & 20 deletions src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,12 @@
{
<h3>登录</h3>
<p class="subtitle">使用你的 BootstrapBlazor 帐户。</p>
<BootstrapInput type="email" class="input" placeholder="电子邮件或电话号码" @bind-Value="email"></BootstrapInput>
<div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
<Button class="button" Color="Color.Primary" OnClick="OnEmailSubmit">下一步</Button>
<ValidateForm Model="_loginModel" OnValidSubmit="OnEmailSubmit">
<BootstrapInput type="email" class="input" SkipValidate="true" IsAutoFocus="true"
placeholder="电子邮件或电话号码" @bind-Value="@_loginModel.Email"></BootstrapInput>
<div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="下一步"></Button>
</ValidateForm>
<div class="links">
<a href="#" @onclick:preventDefault>忘记用户名？</a>
</div>
Expand All @@ -62,19 +65,22 @@
else if (!isAuth)
{
<h3>输入你的密码</h3>
<p class="email-display">@email</p>
<BootstrapInput type="password" class="input" placeholder="密码" @bind-Value="password"></BootstrapInput>
<div class="links">
<a href="#" @onclick:preventDefault>忘记了密码？</a>
</div>
<Button class="button" Color="Color.Primary" OnClick="OnPasswordSubmit">下一步</Button>
<p class="email-display">@_loginModel.Email</p>
<ValidateForm Model="_loginModel" OnValidSubmit="OnPasswordSubmit">
<BootstrapInput type="password" class="input" SkipValidate="true" IsAutoFocus="true"
placeholder="密码" @bind-Value="@_loginModel.Password"></BootstrapInput>
<div class="links">
<a href="#" @onclick:preventDefault>忘记了密码？</a>
</div>
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="下一步"></Button>
</ValidateForm>
<div class="links">
<a href="#" @onclick:preventDefault>其他登录方法</a>
</div>
}
else
{
<div class="email-display2"><span>@email</span></div>
<div class="email-display2"><span>@_loginModel.Email</span></div>
<h5 class="text-center mt-3 mb-0">欢迎，您已成功登录</h5>
<div class="login-video-wrap">
<video class="login-video" autoplay="autoplay" playsinline="playsinline" disablepictureinpicture="">
Expand All @@ -86,7 +92,7 @@
</video>
</div>
<p class="text-center text-muted" style="font-size: 0.75rem;">此登录高仿微软登录 UI</p>
<Button class="button" Color="Color.Primary" OnClick="OnEnterSubmit">进入</Button>
<Button class="button" Color="Color.Primary">进入</Button>
}
</div>
</div>
Expand All @@ -95,13 +101,16 @@
@code {
private bool isEmailEntered = false;
private bool isAuth = false;
private string email = "[email protected]";
private string password = "123456";
private bool showEmailError = false;
private LoginModel _loginModel = new LoginModel()
{
Email = "[email protected]",
Password = "123456"
};

private void OnEmailSubmit()
private Task OnEmailSubmit(EditContext context)
{
if (string.IsNullOrWhiteSpace(email))
if (string.IsNullOrWhiteSpace(_loginModel.Email))
{
showEmailError = true;
}
Expand All @@ -110,22 +119,28 @@
showEmailError = false;
isEmailEntered = true;
}
StateHasChanged();
return Task.CompletedTask;
}

private void OnPasswordSubmit()
private Task OnPasswordSubmit(EditContext context)
{
// 数据库检查密码逻辑可以在这里实现
// 演示代码一律通过
isAuth = true;
StateHasChanged();
return Task.CompletedTask;
}

private void OnEnterSubmit()
private void GoBack()
{

isEmailEntered = false;
}

private void GoBack()
class LoginModel
{
isEmailEntered = false;
public string? Email { get; set; }

public string? Password { get; set; }
}
}
Loading