通過查詢微軟官網上的文檔，我們知道目前Blazor沒有內置的密碼輸入組件，這個用於輸入密碼的組件需要我們來自己實現。接下來我們就來實現密碼輸入組件功能。
三、自制密碼輸入組件
1. 在Visual Studio 2022的解決方案資源管理器中，鼠標左鍵選中“Pages”文件夾，右鍵單擊，在彈出菜單中選擇“添加—>Razor組件…”，並將組件命名爲“InputPassword”。如下圖。 
2. 這個密碼輸入組件需要繼承IputBase<T>,並且重寫TryParseValueFromString這個方法。這個方法的作用是將用戶在表單輸入框中輸入數據轉換成你需要的T類型，例如T是DateTime的話，就要把表單輸入框中輸入的數據轉換成DateTime。
TryParseValueFromString方法有三個參數，對這三個參數說明如下：
- value：表單輸入框中填寫的值
- result：類型是TValue，和InputBase<T>中設定的T一致，result值會綁定到表單中Model的對應欄位上
- validationErrorMessage：輸入框中輸入的數據在進行與類型T轉換時，轉換失幾的給出的錯誤信息
3.因爲登錄界面中表單的輸入框接收的都是string類型的數據，而且我們的UserInfo類中的Password也是string，所以不需要我們做任何轉換操作，直接將value值賦給result就可以了。具體代碼如下：
@inherits InputBase<string>
<input type="password" class="@CssClass" @bind-value="@CurrentValue" />
@code {
protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
{
validationErrorMessage = null;
result = value;
return true;
}
}
四、Login頁面
1. 在Visual Studio 2022的解決方案資源管理器中，鼠標左鍵選中“Pages”文件夾，右鍵單擊，在彈出菜單中選擇“添加—>Razor組件…”，並將組件命名爲“Login.razor”。
2.在Visual Studio 2022的文本編輯器中打開Login.razor，我們使用內建的表單組件EditForm來製作登錄界面。具體代碼如下：
@page "/Login"
@using BlazorAppDemo.Models
@using BlazorAppDemo.Utils
<div class="card">
<div class="card-body my-2">
<h3>Login</h3>
<hr />
<EditForm Model="loginModel" OnValidSubmit="SubmitHandler" OnInvalidSubmit="InvalidHandler">
<DataAnnotationsValidator />
<div class="form-group">
<label for="userName"> @HtmlHelper.GetDisplayName(loginModel ,m=> m.UserName)</label>
<InputText @bind-Value="loginModel.UserName" class="form-control" id="userName" />
<ValidationMessage For="()=>loginModel.UserName" />
</div>
<div class="form-group">
<label for="pwd"> @HtmlHelper.GetDisplayName(loginModel ,m=> m.Password)</label>
<InputPassword @bind-Value="loginModel.Password" class="form-control" id="pwd" />
<ValidationMessage For="()=>loginModel.Password" />
</div>
<span class="form-control-plaintext"></span>
<div class="form-group row">
<div class="col-sm-10">
<button class="btn btn-primary">登錄</button>
</div>
</div>
</EditForm>
</div>
</div>
@code {
private UserInfo loginModel = new UserInfo();
private void SubmitHandler()
{
Console.WriteLine($"用戶名：{loginModel.UserName} ，密碼：{loginModel.Password}");
}
private void InvalidHandler()
{
Console.WriteLine($"用戶名： {loginModel.UserName} ，密碼：{loginModel.Password}");
}
}
3.在Visual Studio 2022的菜單欄上，找到“調試-->開始調試”或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程序，並在瀏覽器中打開Home頁面，我們使用鼠標點擊左邊的菜單欄上的“登錄”菜單項，頁面會進入“Login”頁面，如下圖。 
4.我們使用鼠標左鍵，直接點擊“登錄”按鈕，頁面會提示我們必須輸入用戶名與密碼。如下圖。
5.當我們輸入的用戶名與密碼，不符合校驗規則時，頁面會提示我們必須輸入符合校驗規則的用戶名與密碼。如下圖。
6.最終我們輸入了符合校驗規則的用戶名與密碼。如下圖。
7. 在輸入了正確的用戶名與密碼之後，使用鼠標左鍵點擊“登錄”按鈕。系統後臺獲取了我們在表單輸入框中輸入的用戶名與密碼。如下圖。
