在核心 3.0 MVC asp-for 的文本框中只允许数字

在 ASP.NET Core 3.0 中，您可以使用 asp-for 属性来绑定模型属性到 HTML 表单控件中。如果你想要在一个文本框中只允许数字输入，可以使用以下步骤：

1. 在模型中添加类型限制

您可以在模型中添加 DataAnnotations 来限制属性的数据类型。在这种情况下，您可以使用 [RegularExpression] Annotation 来指定只允许数字。以下是一个示例：

public class MyModel
{
    [RegularExpression("^[0-9]*$", ErrorMessage = "Only numbers are allowed")]
    public int MyNumber { get; set; }
}

在上面的代码中，我们使用正则表达式“^[0-9]*$”来限制 MyNumber 属性只能包含数字。如果用户输入了非数字字符，您可以使用 ErrorMessage 属性来指定错误消息。

2. 在视图中使用输入控件

当您使用 asp-for 来绑定模型属性到 HTML 控件时，框架会自动为您创建适当的表单控件。在这种情况下，您需要使用 input 元素，而不是 textarea 或其他类型的输入控件。以下是一个示例：

<input asp-for="MyNumber" class="form-control" />

在上面的代码中，我们使用 asp-for 属性绑定到 MyNumber 属性，然后使用 class 属性添加 CSS 类。

3. 使用 JavaScript 在客户端验证输入

虽然使用 DataAnnotations 和 input 元素可以帮助您限制用户的输入，但用户仍然可以在表单中执行粘贴操作，并输入非数字字符。为了避免这种情况，您可以使用 JavaScript 在客户端验证用户的输入。

首先，在视图中添加以下 JavaScript 代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("input[data-val-regex-pattern]").keypress(function (event) {
            var char = String.fromCharCode(event.which);
            var pattern = new RegExp($(this).attr("data-val-regex-pattern"));

            if (!pattern.test(char)) {
                event.preventDefault();
            }
        });
    });
</script>

在这段代码中，我们使用 jQuery 选择器选择具有 data-val-regex-pattern 属性的所有输入元素。然后，我们使用 keypress 事件来捕捉每个按键，并使用正则表达式检查输入字符。

最后，您需要更新模型类来包括正则表达式模式。以下是一个示例：

public class MyModel
{
    [RegularExpression("^[0-9]*$", ErrorMessage = "Only numbers are allowed")]
    [Display(Name = "My Number")]
    public int MyNumber { get; set; }
}

在上面的代码中，我们使用 DisplayAttribute 来指定表单控件的标签文本。

结论

在 ASP.NET Core 3.0 MVC 中，您可以使用 DataAnnotations、input 元素和 JavaScript 来限制表单输入并确保只允许数字。