Blazor只读字段表单验证问题：禁止手动输入且触发必填校验

针对你遇到的两个问题，核心原因是HTML原生readonly属性会使浏览器跳过required校验，而仅靠CSS无法真正阻止输入。以下是两种可行的解决方案：

方案一：通过Blazor事件阻止输入，保留原生校验 #

直接利用Blazor的事件拦截机制，阻止所有手动输入操作，同时不设置readonly属性，确保required和数据注解验证正常生效。

<EditForm Model="@FormModel" OnValidSubmit="@SubmitForm">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <!-- 拦截键盘、粘贴、剪切事件，禁止手动输入 -->
    <InputText @bind-Value="@FormModel.SelectedContent" 
               required
               @onkeydown:preventDefault
               @onpaste:preventDefault
               @oncut:preventDefault
               class="bg-light" />

    <button type="button" @onclick="@OpenSelectModal">选择内容</button>
    <button type="submit">提交表单</button>
</EditForm>

@code {
    private FormModel FormModel { get; set; } = new();

    private void OpenSelectModal()
    {
        // 弹窗选择逻辑，选择后为FormModel.SelectedContent赋值
    }

    private void SubmitForm()
    {
        // 表单提交逻辑
    }

    public class FormModel
    {
        [Required(ErrorMessage = "请选择内容后提交")]
        public string SelectedContent { get; set; }
    }
}

说明 #

• 通过@onkeydown:preventDefault阻止键盘输入，@onpaste:preventDefault和@oncut:preventDefault阻止粘贴/剪切操作，彻底禁止手动输入。
• 未设置readonly属性，浏览器和Blazor的DataAnnotationsValidator会正常触发required校验。
• 可通过class="bg-light"设置灰色背景，模拟只读视觉效果。

方案二：CSS+JavaScript增强，兼顾视觉与功能 #

如果需要更彻底的只读视觉表现（比如禁用右键菜单），可以结合CSS和JavaScript实现：

1. Razor组件代码 #

<EditForm Model="@FormModel" OnValidSubmit="@SubmitForm">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText @bind-Value="@FormModel.SelectedContent" 
               required
               class="readonly-input"
               @ref="inputElement" />

    <button type="button" @onclick="@OpenSelectModal">选择内容</button>
    <button type="submit">提交表单</button>
</EditForm>

@code {
    private ElementReference inputElement;
    private FormModel FormModel { get; set; } = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用JS禁用输入操作
            await JS.InvokeVoidAsync("lockInput", inputElement);
        }
    }

    private void OpenSelectModal()
    {
        // 弹窗选择逻辑
    }

    private void SubmitForm()
    {
        // 提交逻辑
    }

    public class FormModel
    {
        [Required(ErrorMessage = "请选择内容")]
        public string SelectedContent { get; set; }
    }
}

2. 全局JS（wwwroot/js/site.js） #

function lockInput(input) {
    // 拦截所有可能的输入操作
    input.addEventListener('keydown', e => e.preventDefault());
    input.addEventListener('paste', e => e.preventDefault());
    input.addEventListener('cut', e => e.preventDefault());
    input.addEventListener('contextmenu', e => e.preventDefault());
}

3. CSS样式（wwwroot/css/site.css） #

.readonly-input {
    background-color: #e9ecef;
    cursor: not-allowed;
    border-color: #ced4da;
}

说明 #

• JavaScript拦截所有输入相关事件，确保用户无法手动修改内容。
• CSS设置灰色背景和禁用光标，强化只读视觉体验。
• 未使用readonly属性，必填验证完全正常生效。

内容的提问来源于stack exchange，提问作者Stavros Koureas