Blazor中输入值验证无效时如何重置输入框绑定值

问题原因 #

校验不通过时你没有修改绑定的pnl.value值，Blazor的虚拟DOM对比逻辑会判定对应Input组件的value属性无变更，因此即便调用StateHasChanged()也不会触发输入框重渲染，导致输入框始终停留用户输入的非法值。
另外你现有代码存在语法错误：e.Value.ToString().Contains(10)中，字符串的Contains方法不能直接传入数字参数，需要改为Contains("10")才能正常校验输入是否包含字符串"10"。

解决方案 #

方法1：修改DataChange逻辑强制触发值变更 #

在校验失败时主动触发属性值的变更通知，让Blazor识别到需要重渲染输入框：

private void DataChange(ChangeEventArgs e, PnL pnl)
{
    string inputValue = e.Value?.ToString() ?? string.Empty;
    if (inputValue.Contains("10"))
    {
        pnl.value = inputValue;
    }
    else
    {
        // 暂存原始值
        string originalValue = pnl.value;
        // 临时赋值触发变更检测
        pnl.value = string.Empty;
        // 还原为原始值，两次值变更会让Blazor最终渲染原始值
        pnl.value = originalValue;
    }
    StateHasChanged();
}

方法2：改用双向绑定简化逻辑（更推荐） #

直接用Blazor内置的双向绑定机制，配合绑定后的校验回调，逻辑更简洁可靠：
首先修改Input组件代码：

<Input type="text" @bind-value="item.value" @bind-value:after="()=>ValidateItem(item)" @key="item.Id"/>

注意：循环渲染列表项时必须添加@key属性，值为item的唯一标识，避免Blazor列表渲染错乱。

然后编写校验方法：

// 建议提前给PnL类扩展OriginalValue属性存储初始值，用于校验失败重置
private void ValidateItem(PnL pnl)
{
    if (!pnl.value.Contains("10"))
    {
        pnl.value = pnl.OriginalValue;
    }
}

内容的提问来源于stack exchange，提问作者Ameerudheen.K