You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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

火山引擎 最新活动