如何在PhoneNumber模型类实现手机号自动加连字符及格式验证

修复后的JavaScript代码 #

$("#numberInput").on('input', function(event) {
    // 仅保留数字，且限制最多10位
    let input = $(this).val().replace(/\D/g, '').slice(0, 10);
    let formattedInput = '';
    
    // 分阶段添加连字符：3位后、6位后
    if (input.length > 3) {
        formattedInput += input.slice(0, 3) + '-';
        if (input.length > 6) {
            formattedInput += input.slice(3, 6) + '-';
            formattedInput += input.slice(6);
        } else {
            formattedInput += input.slice(3);
        }
    } else {
        formattedInput = input;
    }
    
    $(this).val(formattedInput);
});

原代码问题分析 #

你之前的正则/(\d{3})(\d{3})?(\d*)/在替换时，当输入数字不足6位时，第二个捕获组$2为空，导致替换结果变成$1-$2$3 → 123--xxxx（空的$2会让两个连字符连在一起），这就是出现双连字符的核心原因。

后端补充验证（C#） #

前端验证仅用于提升用户体验，后端必须做校验防止非法数据提交。给PhoneNumber类添加数据验证属性：

using System.ComponentModel.DataAnnotations;

public class PhoneNumber
{
    // 验证格式化后的手机号格式
    [RegularExpression(@"^\d{3}-\d{3}-\d{4}$", ErrorMessage = "手机号格式必须为123-456-7890")]
    public string PhoneNumber { get; set; }
}

如果后端需要存储纯数字，可在接收时先去除连字符再验证：

[RegularExpression(@"^\d{10}$", ErrorMessage = "手机号必须为10位纯数字")]
public string PhoneNumber { get; set; }

// 接收前端数据时处理：
// phoneNumberInstance.PhoneNumber = submittedValue.Replace("-", "");

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