如何在Razor文本框中仅允许输入印地语数字?
实现仅允许输入印地语数字的Razor文本框
你当前用的type="number"属性只支持阿拉伯数字(0-9),要实现印地语数字(०,१,२,३,...९)的输入限制,得调整前端输入控制,同时加上后端校验防止恶意绕过。以下是具体实现步骤:
1. 调整Razor视图代码
先把type="number"换成type="text",并添加输入事件监听,保留原有样式和模型绑定:
@Html.EditorFor(model => model.Region, new { htmlAttributes = new { @class = "form-control", @type = "text", @oninput = "filterHindiNumbers(this)", @placeholder = "请输入印地语数字" } })
2. 添加前端JavaScript过滤函数
在视图的<script>标签里加入这个函数,实时过滤非印地语数字的字符,同时保持光标位置不跳转:
function filterHindiNumbers(inputElement) { // 印地语数字对应Unicode范围:U+0966(०)到U+096F(९) const cursorPosition = inputElement.selectionStart; // 移除所有非印地语数字的字符 inputElement.value = inputElement.value.replace(/[^०-९]/g, ''); // 恢复光标位置,提升用户体验 inputElement.setSelectionRange(cursorPosition, cursorPosition); }
3. 后端验证(关键!)
前端验证可以被绕过,必须在后端校验输入内容是否合规。这里提供两种实现方式:
方式一:自定义验证属性
创建一个自定义ValidationAttribute,方便复用:
using System.ComponentModel.DataAnnotations; using System.Text.RegularExpressions; public class HindiNumberAttribute : ValidationAttribute { protected override ValidationResult IsValid(object value, ValidationContext validationContext) { if (value == null) return ValidationResult.Success; string input = value.ToString(); // 校验是否全为印地语数字 if (!Regex.IsMatch(input, @"^[०-९]*$")) { return new ValidationResult("仅允许输入印地语数字(०,१,२,...९)"); } // 模拟你之前的min=0、max=8限制(对应印地语数字०到८) if (input.Length > 0) { int arabicDigit = input[0] - '०'; if (arabicDigit < 0 || arabicDigit > 8) { return new ValidationResult("输入的数字必须在०到८之间"); } } return ValidationResult.Success; } }
然后在模型的Region属性上添加这个特性:
public class YourModel { [HindiNumber] public string Region { get; set; } }
方式二:控制器中手动校验
如果不想创建自定义属性,也可以在Action里直接校验:
[HttpPost] public IActionResult YourAction(YourModel model) { if (!string.IsNullOrEmpty(model.Region)) { // 校验是否全为印地语数字 if (!Regex.IsMatch(model.Region, @"^[०-९]*$")) { ModelState.AddModelError("Region", "仅允许输入印地语数字(०,१,२,...९)"); } // 校验范围(०到८) else if (model.Region.Length > 0) { int arabicDigit = model.Region[0] - '०'; if (arabicDigit < 0 || arabicDigit > 8) { ModelState.AddModelError("Region", "输入的数字必须在०到८之间"); } } } if (!ModelState.IsValid) { return View(model); } // 后续业务逻辑 return RedirectToAction("Success"); }
补充说明
- 如果需要支持多位数印地语数字,只需调整后端的范围判断逻辑即可。
- 前端可选添加
@pattern="[०-९]*"属性,配合HTML5原生验证,但JavaScript过滤的兼容性和体验更好。
内容的提问来源于stack exchange,提问作者nischalinn




