Razor视图中文本框仅允许整数输入的问题求助

我来帮你搞定这个只允许输入整数的需求！光靠HTML5的type="number"确实没法完全阻止小数点输入，结合JavaScript验证+后端校验才能彻底解决这个问题。下面给你几个实用的方案：

方案一：HTML属性+JavaScript输入拦截（推荐） #

首先，先给你的TextBoxFor加上step="1"属性，让浏览器的数字增减按钮只操作整数；然后通过JavaScript阻止小数点输入并过滤非法字符：

1. 修改Razor代码 #

给现有控件添加step="1"：

@Html.TextBoxFor(Employee => Employee.AlternateNumber, new { 
    @id = "txtAlternateNumber", 
    @class = "form-control", 
    @type = "number",
    @step = "1", // 新增：限制步长为1
    @min = "0" // 可选：如果只允许正整数，加上最小值限制
})

2. 添加JavaScript验证 #

这段代码会同时阻止小数点按键输入，以及过滤粘贴/手动输入的非整数内容：

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

// 阻止小数点按键（包括主键盘和小键盘的小数点）
numberInput.addEventListener('keydown', function(e) {
    if (e.key === '.' || e.key === 'Decimal') {
        e.preventDefault();
    }
});

// 过滤所有非数字字符（包括小数点）
numberInput.addEventListener('input', function(e) {
    this.value = this.value.replace(/[^0-9]/g, '');
});

方案二：仅JavaScript验证（无需修改HTML） #

如果不想改动Razor代码，直接用JS也能实现：

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

numberInput.addEventListener('input', function() {
    // 只保留数字，去掉所有非整数内容
    const integerValue = this.value.replace(/\D/g, '');
    this.value = integerValue === '' ? '' : parseInt(integerValue, 10);
});

重要补充：后端校验不能少 #

前端验证可以被绕过，所以一定要在模型类里添加验证属性，确保后端也能拦截非法值：

public class Employee
{
    // 其他属性...
    
    [RegularExpression(@"^\d+$", ErrorMessage = "请输入有效的整数")]
    [Range(0, int.MaxValue, ErrorMessage = "请输入非负整数")]
    public int AlternateNumber { get; set; }
}

这样不管用户怎么操作，前端会实时拦截非法输入，后端也能兜底验证，完美解决只允许输入整数的问题！

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