C# サンプル集

文字数のチェック

2024/1/5

この記事は ASP.NET Core Razor Pages を対象にしています。

この記事内のサンプルは、プロジェクトテンプレート「ASP.NET Core Web アプリ」を使用して、PagesフォルダーにこのRazorページを追加する前提です。

入力が8文字以内かチェックする
入力が３文字以上8文字以内かチェックする

入力が8文字以内かチェックする

StringLengthValidation.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.validation
{
    public class StringLengthValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("学籍番号")]
        [StringLength(8, ErrorMessage = "{0}は{1}文字以内で入力してください。")]
        public string? studentId { get; set; }

        public void OnPost()
        {
            //サーバー側での入力検証の判定
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine($"エラーなし。{studentId}");
        }
    }
}

→ Debug.WriteLineが表示される場所

StringLengthValidation.cshtml

@page
@model WorkStandard.Pages.validation.StringLengthValidationModel

<form method="post">
    <div class="mb-3">
        <label asp-for="studentId"></label>
        <input asp-for="studentId" class="form-control" />
        <span asp-validation-for="studentId" class="text-danger"></span>
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

@section Scripts {
    @{
        //クライアント側での検証を有効にします。
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

メモ：この例のようにサーバー側での入力検証の判定は必ず行って下さい。悪意のあるユーザーはクライアント側での検証を簡単に回避してサーバーを攻撃します。

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-control inputをBootstrapの外観にします。→ Bootstrapのフォームの概要
text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

メモ：このチェックでの文字数とは、String.Lengthプロパティで取得できる値を指しています。→ 文字列の長さ

メモ：この例で8文字以上入力してテストするには、input要素にmaxlength="100"などを明示的に追加します。

入力が３文字以上8文字以内かチェックする

StringMinLengthValidation.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.validation
{
    public class StringMinLengthValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("学籍番号")]
        [Required(ErrorMessage = "{0}は省略できません。")]
        [StringLength(8, MinimumLength = 3, ErrorMessage = "{0}は{2}文字以上{1}文字以内で入力してください。")]
        public string? studentId { get; set; }

        public void OnPost()
        {
            //サーバー側での入力検証の判定
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine($"エラーなし。{studentId}");
        }
    }
}

→ Debug.WriteLineが表示される場所

StringMinLengthValidation.cshtml

@page
@model WorkStandard.Pages.validation.StringMinLengthValidationModel

<form method="post">
    <div class="mb-3">
        <label asp-for="studentId"></label>
        <input asp-for="studentId" class="form-control" />
        <span asp-validation-for="studentId" class="text-danger"></span>
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

@section Scripts {
    @{
        //クライアント側での検証を有効にします。
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-control inputをBootstrapの外観にします。→ Bootstrapのフォームの概要
text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

メモ：このチェックでの文字数とは、String.Lengthプロパティで取得できる値を指しています。→ 文字列の長さ

メモ：この例で8文字以上入力してテストするには、input要素にmaxlength="100"などを明示的に追加します。

English Version