如何在MudBlazor输入框中应用两个掩码？

问题场景 #

现有如下MudBlazor输入组件代码，需要同时应用两个已定义的掩码规则：

<MudItem xs="12" lg="8" Class="mb-0 pt-0 d-flex flex-row items-center" Justify="Justify.FlexStart">
    <MudItem xs="2" Class="mb-0 d-flex flex-row" Style="align-items:center" Justify="Justify.Center">@L["Series"]</MudItem>
    <MudItem xs="6">
        <MudTextField Class="series-key-input" Style="border-radius:10px; text-transform: uppercase;" Mask="@validationForSeries" AutoFocus=false @bind-Value=Model.Series Label="@L["Series"]" Margin="Margin.Dense" Variant="Variant.Outlined" For="@(() => Model.Series)" Required="true" />
    </MudItem>
</MudItem>

两个掩码定义如下：

public IMask validationForSeries = new BlockMask(new Block('a', 1, 3), new Block('0', 1, 7));
public IMask validationForSeries = new RegexMask("^[A-Za-z0-9]{0,10}$");

由于MudBlazor的Mask属性仅支持单个IMask实例，无法直接绑定两个掩码，需通过自定义复合掩码实现。

解决方案 #

1. 创建自定义复合掩码类 #

实现IMask接口，内部封装两个掩码实例，让两者规则同时生效：

public class CompositeMask : IMask
{
    private readonly IMask _firstMask;
    private readonly IMask _secondMask;

    public CompositeMask(IMask firstMask, IMask secondMask)
    {
        _firstMask = firstMask;
        _secondMask = secondMask;
    }

    public string Process(string input, out bool success)
    {
        // 依次通过两个掩码处理输入内容
        var processedByFirst = _firstMask.Process(input, out var firstSuccess);
        var finalInput = _secondMask.Process(processedByFirst, out var secondSuccess);
        success = firstSuccess && secondSuccess;
        return finalInput;
    }

    public bool Validate(string input)
    {
        // 输入必须同时满足两个掩码的验证规则
        return _firstMask.Validate(input) && _secondMask.Validate(input);
    }

    // 实现IMask接口的其他成员，按需委托或组合逻辑
    public string Placeholder => _firstMask.Placeholder;
    public int SelectionStart { get => _firstMask.SelectionStart; set => _firstMask.SelectionStart = value; }
    public int SelectionLength { get => _firstMask.SelectionLength; set => _firstMask.SelectionLength = value; }
    public bool IsCompleted => _firstMask.IsCompleted && _secondMask.IsCompleted;
}

2. 初始化复合掩码 #

将原有两个掩码实例传入自定义复合掩码：

public IMask validationForSeries = new CompositeMask(
    new BlockMask(new Block('a', 1, 3), new Block('0', 1, 7)),
    new RegexMask("^[A-Za-z0-9]{0,10}$")
);

3. 组件使用 #

保持原有组件代码不变，Mask="@validationForSeries"会自动应用复合掩码的规则，输入内容需同时满足BlockMask的格式要求和RegexMask的字符限制。

若需要调整掩码的处理顺序，只需调换CompositeMask构造函数中两个掩码的传入顺序即可。

内容的提问来源于stack exchange，提问作者diyorbek axmatov