MudTextField正则掩码验证分秒时长输入被完全阻断问题求助

问题原因 #

你使用的正则表达式是匹配完整分秒格式的最终状态（带^和$锚定符），但MudBlazor的RegexMask会在用户每输入一个字符时就验证内容是否匹配正则。当用户输入单个数字或未完成的格式时，无法满足完整匹配的要求，因此输入被直接阻断。

解决方案 #

方案1：修改RegexMask的正则表达式 #

调整正则，允许输入过程中的中间状态（比如单个数字、未输入秒数的XX:格式等），同时保证最终输入符合分秒规则：

<MudTextField Mask="@mask1" Label="Duration" HelperText="@mask1.Mask"
              @bind-Value="minutesAndSec" Variant="@Variant.Text" Clearable />

@code {
    private string minutesAndSec = string.Empty;
    // 允许空输入、单/两位分钟、分钟+冒号、分钟+冒号+单/两位秒
    IMask mask1 = new RegexMask(@"^[0-5]?\d(:[0-5]?\d?)?$");
}

这个正则的匹配逻辑：

• 空输入：匹配
• 1-2位分钟（0-59）：匹配
• 分钟+冒号：匹配
• 分钟+冒号+1-2位秒（0-59）：匹配

方案2：使用PatternMask配合验证（推荐） #

对于固定格式的分秒输入，MudBlazor的PatternMask更适合，它会自动引导用户输入格式，再配合自定义验证确保数值合法：

<MudTextField Mask="@patternMask" Label="Duration" HelperText="@patternMask.Mask"
              @bind-Value="minutesAndSec" Variant="@Variant.Text" Clearable 
              Validation="@ValidateDuration" />

@code {
    private string minutesAndSec = string.Empty;
    // 固定格式掩码，自动提示用户输入XX:XX
    IMask patternMask = new PatternMask("99:99");

    private IEnumerable<string> ValidateDuration(string value)
    {
        if (string.IsNullOrWhiteSpace(value))
            yield break;
        
        if (!value.Contains(":"))
        {
            yield return "请输入正确的分秒格式（如12:34）";
            yield break;
        }
        
        var parts = value.Split(':');
        if (!int.TryParse(parts[0], out int minutes) || minutes > 59)
            yield return "分钟必须是0-59之间的整数";
        
        if (!int.TryParse(parts[1], out int seconds) || seconds > 59)
            yield return "秒数必须是0-59之间的整数";
    }
}

关键说明 #

RegexMask的核心是实时验证每一步输入的合法性，不能只写最终状态的正则，必须考虑用户输入过程中的所有中间情况。而PatternMask更适合固定格式的输入场景，能提升用户输入体验，再配合验证逻辑可以兼顾格式和数值合法性。

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