Razor中@Html.TextBoxFor控件如何同时限制3位数字与仅允许输入数字？

要实现仅允许数字输入和最多3位数字的双重限制，可以从以下几个方面入手：

1. 修正Razor控件的HTML属性 #

首先你代码里的maxvalue是错误的HTML属性，数字输入框的数值上限应该用max，且要设置为999（对应3位数字的最大值）。同时添加pattern属性增强前端格式验证，保留type="number"确保仅能输入数字：

@Html.TextBoxFor(model => model.Persons, new { 
    @class = "form-control w100", 
    id = "cantPersonasBloque", 
    @type = "number", 
    max = "999", 
    min = "0", // 可选，限制不能输入负数
    pattern = "\\d{1,3}" // 正则限制1-3位数字
})

2. 用JavaScript辅助限制输入位数 #

部分浏览器对type="number"的pattern属性支持有限，所以需要添加JS监听输入事件，强制限制输入长度：

const input = document.getElementById('cantPersonasBloque');
input.addEventListener('input', function() {
    // 截断超过3位的内容
    if (this.value.length > 3) {
        this.value = this.value.slice(0, 3);
    }
    // 过滤非数字字符（type=number已限制，这里做双重保险）
    this.value = this.value.replace(/[^0-9]/g, '');
});

3. 后端Model验证（关键，防止前端绕过） #

前端验证可以被篡改，所以必须在Model层添加数据注解做兜底验证：

using System.ComponentModel.DataAnnotations;

public class YourModel
{
    [Range(0, 999, ErrorMessage = "请输入0-999之间的数字")]
    [RegularExpression(@"^\d{1,3}$", ErrorMessage = "请输入1-3位有效数字")]
    public int Persons { get; set; }
}

为什么之前的方案不生效？ #

• 保留type="number"时，maxvalue（错误属性）或max=3只是限制数值不能超过3，而非位数；
• 移除type="number"后，maxlength（你提到的maxvalue可能是指这个）能限制长度，但失去了数字输入的原生限制。

通过以上三步，就能同时实现两种验证效果，且兼顾前端体验和后端安全性。

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