diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template1.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template1.razor
index b2dac29475c..439b9e1f9aa 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template1.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template1.razor
@@ -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="user@blazor.zone" />
-        <FloatingLabel DisplayText="密码" TValue="string" type="password" IsGroupBox="true" PlaceHolder="password" />
+    <ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
+        <FloatingLabel DisplayText="邮箱" TValue="string" PlaceHolder="user@blazor.zone" />
+        <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;
+    }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template2.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template2.razor
index 3a086e4bd86..bdf14c25030 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template2.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template2.razor
@@ -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;
+    }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template3.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template3.razor
index 99d69538fb5..771d88eccf9 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template3.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template3.razor
@@ -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;
+    }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template4.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template4.razor
index a035fd8a51e..103796663b5 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template4.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template4.razor
@@ -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;
+    }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor
index 49022c6ede9..18a146d9fc0 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor
@@ -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>
@@ -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="">
@@ -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>
@@ -95,13 +101,16 @@
 @code {
     private bool isEmailEntered = false;
     private bool isAuth = false;
-    private string email = "a@blazor.zone";
-    private string password = "123456";
     private bool showEmailError = false;
+    private LoginModel _loginModel = new LoginModel()
+    {
+        Email = "a@blazor.zone",
+        Password = "123456"
+    };
 
-    private void OnEmailSubmit()
+    private Task OnEmailSubmit(EditContext context)
     {
-        if (string.IsNullOrWhiteSpace(email))
+        if (string.IsNullOrWhiteSpace(_loginModel.Email))
         {
             showEmailError = true;
         }
@@ -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; }
     }
 }