Razor视图number输入框绑定string模型属性的校验及输入限制问题

问题1：输入无效值时触发校验并展示错误提示 #

你当前的模型注解仅校验了字段长度和必填规则，没有对输入的内容范围做限制，且string类型无法直接使用[Range]数值范围注解，需要额外添加正则校验注解：

• 给RoomNumber属性添加[RegularExpression]注解，修改后的模型代码如下：

[MaxLength(1)]
[MinLength(1)]
[Required(ErrorMessage = "请输入有效值")]
[RegularExpression(@"^[1-8]$", ErrorMessage = "请输入1-8之间的数字")]
public string RoomNumber { get; set; }

• 确认项目配置已开启校验：检查Web.config中appSettings节点下存在以下配置：

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

• 确认视图页面已引入客户端校验依赖的JS文件：jquery.validate.min.js、jquery.validate.unobtrusive.min.js

配置完成后，用户输入不符合规则的内容时，会在@Html.ValidationMessageFor对应的位置自动展示错误提示，同时服务端提交时也会自动校验ModelState.IsValid的状态。

问题2：直接限制用户仅能输入1-8范围内的数字 #

可以实现，有两种常用方案：

方案1：改用下拉选择框（最稳妥，完全避免非法输入） #

直接把输入框替换为下拉框，仅提供1-8的选项，用户无法输入其他内容，视图代码修改如下：

<div class="form-group">
@Html.LabelFor(model => model.RoomNumber, htmlAttributes: new { @class = "col-md-12" })
<div class="col-md-12">
    @Html.DropDownListFor(model => model.RoomNumber, 
        Enumerable.Range(1,8).Select(x=>new SelectListItem { Text = x.ToString(), Value = x.ToString() }),
        "请选择", 
        new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.RoomNumber, "", new { @class = "text-danger" })
</div>
</div>

方案2：保留输入框，添加前端输入限制 #

如果需要保留输入框的交互形式，可以添加JS脚本监听输入事件，过滤非法内容：

document.querySelector('.input-digit').addEventListener('input', function(e) {
    // 仅保留1-8的数字，其他内容自动清除
    this.value = this.value.replace(/[^1-8]/g, '').slice(0,1);
});

配合之前的校验规则，即可实现仅允许输入1-8的数字。

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