ASP.NET Core 3.0 MVCでテキストボックスに数字のみを許可する方法


  1. データの注釈を使用する方法:
    • モデルクラスで、該当のテキストボックスのプロパティに[RegularExpression(@"^[0-9]+$", ErrorMessage = "数字のみ入力してください。")]というデータの注釈を追加します。
    • これにより、クライアントサイドおよびサーバーサイドでバリデーションが行われ、数字以外の入力がエラーとなります。
public class MyModel
{
    [RegularExpression(@"^[0-9]+$", ErrorMessage = "数字のみ入力してください。")]
    public string NumberField { get; set; }
}
  1. jQueryを使用する方法:
    • テキストボックスにIDを指定し、jQueryを使用して入力値を監視します。
    • 数字以外の入力があった場合、それをクリアします。
<input type="text" id="numberTextBox" />
@section Scripts {
    <script>
        $(document).ready(function () {
            $('#numberTextBox').on('input', function () {
                $(this).val($(this).val().replace(/[^0-9]/g, ''));
            });
        });
    </script>
}
  1. JavaScriptを使用する方法:
    • テキストボックスにonkeypressイベントを追加し、JavaScriptを使用して数字以外のキー入力を無効化します。
<input type="text" id="numberTextBox" onkeypress="return event.charCode >= 48 && event.charCode <= 57" />

上記の方法を使用することで、ASP.NET Core 3.0 MVCアプリケーションでテキストボックスに数字のみを許可できます。必要に応じて、適切な方法を選択して実装してください。