ヘッダー
C# サンプル集
 

Visual Basic 中学校 > C# サンプル集 > C# サンプル集目次 > ASP.NET Core > Razor Pages

ひらがな・カタカナのチェック

2024/4/20

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

 

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

 

目次

 

ひらがな のみであるかチェックする (必須入力の場合)

HiraganaValidation.cshtml.cs

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

namespace WorkStandard.Pages.validation
{
    public class HiraganaValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("ふりがな(ひらがな)")]
        [RegularExpression("[ぁ-ん]*", ErrorMessage = "{0}は ひらがな で入力してください。")]
        [Required(ErrorMessage = "{0}は ひらがな を入力してください。")]
        public string HiraganaName { get; set; } = "";

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

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

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

→ ひらがなの定義と入力可能文字のカスタマイズ 参照

 

HiraganaValidation.cshtml

@page
@model WorkStandard.Pages.validation.HiraganaValidationModel

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

主なCSSクラスの効果

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

 

 

ひらがな のみであるかチェックする (必須入力ではない場合)

HiraganaValidation.cshtml.cs

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

namespace WorkStandard.Pages.validation
{
    public class HiraganaValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("ふりがな(ひらがな)")]
        [RegularExpression("[ぁ-ん]*", ErrorMessage = "{0}は ひらがな で入力してください。")]
        public string? HiraganaName { get; set; }

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

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

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

メモ：半角スペースのみ入力された場合は、省略されたのと同じ扱いになり、HiraganaName は null になります。平仮名と半角スペースを混在して入力した場合は、チェックにひっかかってエラーになります。

→ ひらがなの定義と入力可能文字のカスタマイズ 参照

 

HiraganaValidation.cshtml

@page
@model WorkStandard.Pages.validation.HiraganaValidationModel

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

主なCSSクラスの効果

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

 

 

全角カタカナ のみであるかチェックする (必須入力の場合)

KatakanaValidation.cshtml.cs

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

namespace WorkStandard.Pages.validation
{
    public class KatakanaValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("フリガナ(カタカナ)")]
        [RegularExpression("[ァ-ヴー]*", ErrorMessage = "{0}は 全角カタカナ で入力してください。")]
        [Required(ErrorMessage = "{0}は 全角カタカナ を入力してください。")]
        public string KatakanaName { get; set; } = "";

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

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

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

→ カタカナの定義と入力可能文字のカスタマイズ 参照

 

KatakanaValidation.cshtml

@page
@model WorkStandard.Pages.validation.KatakanaValidationModel

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

主なCSSクラスの効果

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

 

 

全角カタカナ のみであるかチェックする (必須入力ではない場合)

KatakanaValidation.cshtml.cs

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

namespace WorkStandard.Pages.validation
{
    public class KatakanaValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("フリガナ(カタカナ)")]
        [RegularExpression("[ァ-ヴー]*", ErrorMessage = "{0}は 全角カタカナ で入力してください。")]
        public string? KatakanaName { get; set; }

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

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

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

メモ：半角スペースのみ入力された場合は、省略されたのと同じ扱いになり、KatakanaName は null になります。カタカナと半角スペースを混在して入力した場合は、チェックにひっかかってエラーになります。

→ カタカナの定義と入力可能文字のカスタマイズ 参照

 

KatakanaValidation.cshtml

@page
@model WorkStandard.Pages.validation.KatakanaValidationModel

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

主なCSSクラスの効果

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

 

 

参考：ひらがなの定義と入力可能文字のカスタマイズ

この記事で紹介しているひらがなの入力チェックの例で入力できないひらがなは

「ゔ」・「ゕ」(小さいひらがなのか)・「ゖ」(小さいひらがかのけ)・結合文字の濁点・結合文字の半濁点・「゛」(独立した文字としての濁点)・「゜」(独立した文字としての半濁点)・「ゝ」・「ゞ」・「ゟ」

の１０文字です。

結合文字の濁点・半濁点とは「が」「ぱ」などに使われている濁点・半濁点のことではありません。滅多に使われない特殊な文字です。

結合文字の２文字以外の8文字を入力可能にしたい場合は RegularExpressionの引数の「ん」の後に追加します。たとえば、「ゕ」と「ゖ」を入力できるようにしたい場合、"[ぁ-んゕゖ]*"とします。

参考：Unicodeで定義されているひらがなの一覧

 

 

参考：カタカナの定義と入力可能文字のカスタマイズ

この記事で紹介しているカタカナの入力チェックの例で入力できないカタカナは

「゠」(かつてよく外国人の名前の区切りの表記に使用されていた文字。算数の=とは異なります。)・「ヵ」(小さな全角カタカナのカ)・「ヶ」(小さな全角カタカナのケ)・「ヷ」・「ヸ」・「ヹ」・「ヺ」・「ヽ」・「ヾ」・「ヿ」

の１０文字です。

これらを入力可能にしたい場合は RegularExpressionの引数の「ァ-ヴー」の後に追加します。たとえば、「ヵ」と「ヶ」を入力できるようにしたい場合、"[ァ-ヴーヵヶ]*"とします。

参考：Unicodeで定義されているカタカナの一覧

 

English