Blazor实现密码显示/隐藏切换（无需JS互操作）问题咨询

现有代码的核心问题 #

• 未初始化输入模型实例：仅定义了InputModel类，但未创建Input实例，导致@bind="Input.Password"触发空引用异常，这是最致命的问题。
• 标签与输入框的关联缺失：
  • 密码输入框无id="password"，导致<label for="password">无法触发输入框聚焦，不符合无障碍设计规范。
  • 复选框无id="showPassword"，点击<label for="showPassword">无法切换复选框状态。
• 潜在的验证异常：当Input为null时，ValidationMessage的For表达式() => Input.Password会抛出空引用异常。

修正后的完整代码 #

@page "/Test"
@using System.ComponentModel.DataAnnotations

<div class="form-floating mb-3">
    <!-- 添加id属性，与label关联；绑定逻辑保持原有无JS互操作的核心 -->
    <input 
        @bind="Input.Password" 
        id="password"
        class="form-control" 
        autocomplete="current-password" 
        aria-required="true" 
        placeholder="password" 
        type="@(ShowPassword ? "text" : "password")" 
    />
    <label for="password" class="form-label">Password</label>
    <ValidationMessage For="() => Input.Password" class="text-danger" />
</div>
<div class="form-check mb-3">
    <!-- 添加id属性，与label关联 -->
    <input 
        type="checkbox" 
        @bind="ShowPassword" 
        id="showPassword"
        class="form-check-input" 
    />
    <label class="form-check-label" for="showPassword">Show Password</label>
</div>

@code {
    // 初始化输入模型实例，解决空引用问题
    private InputModel Input { get; set; } = new InputModel();
    private bool ShowPassword { get; set; } = false;

    private sealed class InputModel
    {
        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; } = "";
    }
}

关键修改说明 #

1. 初始化Input实例：在@code中添加private InputModel Input { get; set; } = new InputModel();，彻底解决空引用报错问题。
2. 补充id属性：给密码输入框和复选框分别添加对应id，让标签与输入控件正确关联，提升页面可用性与无障碍体验。
3. 保留无JS互操作核心逻辑：通过绑定ShowPassword布尔值动态切换输入框的type属性，完全不需要JavaScript互操作，完全符合需求。

内容的提问来源于stack exchange，提问作者Dancing Diplodocus