ASP.NET Core MVC中格式化美国手机号为111-222-3333的方法咨询

下面给你几种在ASP.NET Core MVC中实现10位手机号（1112223333）转111-222-3333格式的实用方法：

方法一：ViewModel新增格式化属性 #

直接在ViewModel里加一个只读属性，专门返回格式化后的号码，逻辑简单直观：

[Required(ErrorMessage = "电话号码必填")]
[Display(Name = "电话号码")]
[DataType(DataType.PhoneNumber)]
[RegularExpression(@"^1?[0-9]{10}$", ErrorMessage = "无效的电话号码格式")]
public string AppPhoneNumber { get; set; }

// 新增只读属性，返回格式化后的号码
public string FormattedPhoneNumber
{
    get
    {
        if (string.IsNullOrEmpty(AppPhoneNumber) || AppPhoneNumber.Length != 10)
            return AppPhoneNumber;
        return $"{AppPhoneNumber.Substring(0, 3)}-{AppPhoneNumber.Substring(3, 3)}-{AppPhoneNumber.Substring(6, 4)}";
    }
}

前端直接调用这个新属性：

<span class="details-span-value">@Html.DisplayFor(model => model.Applications.FormattedPhoneNumber)</span>

方法二：自定义DisplayTemplate显示模板 #

适合需要在多个页面复用格式化逻辑的场景：

1. 在Views/Shared下新建DisplayTemplates文件夹，然后创建PhoneNumber.cshtml文件：

@model string
@{
    if (!string.IsNullOrEmpty(Model) && Model.Length == 10)
    {
        @string.Format("{0}-{1}-{2}", Model.Substring(0,3), Model.Substring(3,3), Model.Substring(6,4))
    }
    else
    {
        @Model
    }
}

2. 在ViewModel的AppPhoneNumber属性上指定使用这个模板：

[Required(ErrorMessage = "电话号码必填")]
[Display(Name = "电话号码")]
[DataType(DataType.PhoneNumber)]
[RegularExpression(@"^1?[0-9]{10}$", ErrorMessage = "无效的电话号码格式")]
[DisplayTemplate(Name = "PhoneNumber")] // 绑定自定义模板
public string AppPhoneNumber { get; set; }

3. 前端依旧使用原来的DisplayFor即可：

<span class="details-span-value">@Html.DisplayFor(model => model.Applications.AppPhoneNumber)</span>

方法三：前端JavaScript处理 #

不想改动后端代码的话，直接在前端用JS格式化：

<span class="details-span-value phone-number">@Html.DisplayFor(model => model.Applications.AppPhoneNumber)</span>

<script>
    // 批量处理所有带phone-number类的元素
    document.querySelectorAll('.phone-number').forEach(el => {
        const num = el.textContent.trim();
        if (num.length === 10) {
            el.textContent = `${num.slice(0,3)}-${num.slice(3,6)}-${num.slice(6)}`;
        }
    });
</script>

方法四：正则表达式快速替换 #

不管后端还是前端，都可以用正则简化分割逻辑：

• 后端C#示例：

public string FormattedPhoneNumber
{
    get
    {
        if (string.IsNullOrEmpty(AppPhoneNumber)) return AppPhoneNumber;
        return System.Text.RegularExpressions.Regex.Replace(AppPhoneNumber, @"(\d{3})(\d{3})(\d{4})", "$1-$2-$3");
    }
}

• 前端JS示例：

const num = el.textContent.trim();
el.textContent = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

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