DevExtreme文本框如何实现可空的「数字.数字-数字」输入格式校验

• 前端掩码选型错误：DevExtreme的Mask配置是固定长度输入机制，写死"###.###-####"就要求必须输入3位整数、3位小数、4位后缀的固定长度内容，直接把52.232-1这类短输入挡在门外，和你兼容可变长度输入的需求完全相悖
• 掩码规则配置错误：当前MaskRules绑定的/[02-9]/规则直接排除了数字1，哪怕是符合长度的合法输入只要带1也会被拦截
• Model层正则存在漏洞：原正则([0-9]+.[0-9]+-[0-9]+)没有对小数点做转义，点号在正则里是通配任意单字符的规则，比如123a908-09这类带非法字符的内容也能通过校验；同时正则没有加首尾锚点，存在部分匹配漏判的问题
• 固定长度掩码和“允许输入为空”的需求不兼容，掩码默认会要求用户输满占位符，空输入会被判定为非法

1. Model层校验规则优化 #

替换原有正则，满足空值放行、可变长度合法格式校验、非法字符拦截三个要求，代码如下：

[RegularExpression(@"^$|^[0-9]+\.[0-9]+-[0-9]+$", ErrorMessage = "X 的输入格式不正确")]
[DisplayName("X")]
public string? x { get; set; }

修正说明：

• 增加^$分支，允许空输入直接通过校验
• 用\\.转义小数点，避免通配任意字符的漏洞
• 加首尾锚点^/$，确保整个输入完全匹配规则才算合法，不会出现带非法片段的内容漏过校验
• 每一段数字用+匹配1位及以上的任意长度，自然兼容123.908-09和52.232-1这类不同长度的合法输入

2. View层DevExtreme组件配置调整 #

放弃锁死长度的固定掩码，换成轻量的输入字符过滤，既阻止字母等非法字符输入，又不限制合法内容的长度：

groupItems.AddSimpleFor(m => m.x)
    .Editor(e =>
        e.TextBox()
            // 输入实时过滤，只保留数字、小数点、减号
            .OnValueChanged("function(e) {
                e.value = e.value ? e.value.replace(/[^0-9\.\-]/g, '') : '';
            }")
            .Placeholder("例如：52.232-1")
    );

调整说明：

• 去掉Mask和对应MaskRules配置，彻底解除固定长度输入的限制
• 输入时自动过滤字母、特殊符号等非法字符，解决之前无掩码时用户能输字母的问题
• 空输入不会有任何拦截，完全符合需求

3. Controller层逻辑补充 #

保持原有ModelState.IsValid判断逻辑即可，补充空值场景的日志处理，代码如下：

[HttpPost]
public ActionResult AddX(string values)
{
    if (!ModelState.IsValid)
    {
        return View();
    }
    // 兼容空值场景的日志输出
    var logContent = string.IsNullOrEmpty(values) ? "X 为空输入" : $"X 合法输入值: {values}";
    _logger.LogInformation(logContent);
    return View();
}

• 前端的输入过滤只是体验优化，后端Model层的正则校验是最终防线，不要把校验逻辑完全放在前端
• 如果后续要对输入长度做限制（比如整数部分最多3位、小数部分最多3位），可以在正则里调整量词，比如把[0-9]+改成[0-9]{1,3}，不需要再回头用固定掩码实现
• 原来的掩码规则如果确实要保留（比如做必填固定格式的场景），要把占位符规则改对，X占位的默认规则不要配置排除数字1的匹配逻辑

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