ASP.NET MVC中三位数字分隔符使用：输入显示/入库去除

一、前端实时添加千分位分隔符 #

先给文本框添加标识，再通过JavaScript监听输入事件实现实时格式化：

1. 修改Razor代码，为文本框添加专属类名和ID：

@Html.TextBoxFor(model => model.MablaghHazineh, new { @class = "form-control number-input", id = "mablaghHazineh" })

2. 添加JavaScript格式化逻辑：

const numberInput = document.getElementById('mablaghHazineh');

// 格式化数字为千分位格式
function formatNumber(num) {
    // 过滤非数字、非小数点字符
    const cleaned = num.replace(/[^0-9.]/g, '');
    // 拆分整数与小数部分
    const parts = cleaned.split('.');
    // 整数部分插入千分位分隔符
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
}

// 监听输入事件，实时格式化
numberInput.addEventListener('input', function(e) {
    // 记录光标位置，避免格式化后光标乱跳
    const cursorPos = this.selectionStart;
    const originalLength = this.value.length;
    this.value = formatNumber(this.value);
    // 修正光标位置
    this.selectionStart = this.selectionEnd = cursorPos + (this.value.length - originalLength);
});

二、提交时去除分隔符，保证数据库存入纯数字 #

提供两种可靠处理方式：

方式1：表单提交前预处理 #

监听表单提交事件，实时清除输入框内的分隔符：

// 替换为实际表单ID
const form = document.getElementById('your-form-id');
form.addEventListener('submit', function() {
    numberInput.value = numberInput.value.replace(/,/g, '');
});

方式2：后端模型绑定兜底处理 #

如果前端处理有遗漏，通过自定义模型绑定器统一清理：

1. 创建自定义绑定器：

public class NumberSeparatorCleanerBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
            throw new ArgumentNullException(nameof(bindingContext));

        var valueResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
        if (valueResult == ValueProviderResult.None)
            return Task.CompletedTask;

        bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueResult);
        string rawValue = valueResult.FirstValue;

        if (!string.IsNullOrEmpty(rawValue))
        {
            // 移除所有逗号分隔符
            string cleanedValue = rawValue.Replace(",", "");
            // 根据字段类型调整转换逻辑，这里以decimal为例
            if (decimal.TryParse(cleanedValue, out decimal result))
            {
                bindingContext.Result = ModelBindingResult.Success(result);
            }
            else
            {
                bindingContext.ModelState.TryAddModelError(bindingContext.ModelName, "请输入有效的数字");
            }
        }

        return Task.CompletedTask;
    }
}

2. 在模型字段上绑定该处理类：

public class YourModel
{
    [ModelBinder(BinderType = typeof(NumberSeparatorCleanerBinder))]
    public decimal MablaghHazineh { get; set; }
}

三、注意事项 #

• 前端可额外添加输入限制，仅允许数字和小数点输入，减少非法字符干扰；
• 后端必须保留数据验证逻辑，防止恶意提交非法值；
• 光标位置处理需注意，避免格式化操作影响用户输入体验。

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