Validate Hiragana and Katakana

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("Furigana(Hiragana)")]
        [RegularExpression("[ぁ-ん]*", ErrorMessage = "Please enter the {0} in hiragana.")]
        [Required(ErrorMessage = "Please enter the {0} in hiragana.")]
        public string HiraganaName { get; set; } = "";

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

            System.Diagnostics.Debug.WriteLine($"No errors. {HiraganaName}");
        }
    }
}

→ Where Debug.WriteLine appear

→ The definition of Hiragana and how to customize enterable Hiragana

Note: for your test, "あいう" is ok, "あいア" is ng.

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-control Make the input a Bootstrap look.→ Forms
• text-danger The string become red to indicate danger.→ Theme colors
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

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("Furigana(Hiragana)")]
        [RegularExpression("[ぁ-ん]*", ErrorMessage = "Please enter the {0} in hiragana.")]
        public string? HiraganaName { get; set; }

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

            System.Diagnostics.Debug.WriteLine($"No errors. {HiraganaName}");
        }
    }
}

→ Where Debug.WriteLine appear

→ The definition of Hiragana and how to customize enterable Hiragana

Note: for your test, "あいう" is ok, "あいア" is ng.

Note: Just only normal space can be accepted, and it makes HiraganaName null. Hiragana characters mixed with normal space cannot be accepted.

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-control Make the input a Bootstrap look.→ Forms
• text-danger The string become red to indicate danger.→ Theme colors
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

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("Furigana(Katakana)")]
        [RegularExpression("[ァ-ヴー]*", ErrorMessage = "Please enter the {0} in full width hiragana.")]
        [Required(ErrorMessage = "Please enter the {0} in full width hiragana.")]
        public string KatakanaName { get; set; } = "";

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

            System.Diagnostics.Debug.WriteLine($"No errors. {KatakanaName}");
        }
    }
}

→ Where Debug.WriteLine appear

→ The definition of Katakana and how to customize enterable Katakana

Note: for your test, "アイウ" is ok, "アイあ" is ng.

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-control Make the input a Bootstrap look.→ Forms
• text-danger The string become red to indicate danger.→ Theme colors
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

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("Furigana(Katakana)")]
        [RegularExpression("[ァ-ヴー]*", ErrorMessage = "Please enter the {0} in full width hiragana.")]
        public string? KatakanaName { get; set; }

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

            System.Diagnostics.Debug.WriteLine($"No errors. {KatakanaName}");
        }
    }
}

→ Where Debug.WriteLine appear

→ The definition of Katakana and how to customize enterable Katakana

Note: Just only normal space can be accepted, and it makes KatakanaName null. Katakana characters mixed with normal space cannot be accepted.

Note: for your test, "アイウ" is ok, "アイあ" is ng.

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-control Make the input a Bootstrap look.→ Forms
• text-danger The string become red to indicate danger.→ Theme colors
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

The following 10 hiranaga characters cannot be entered in the example presented in this article.

"ゔ", "ゕ" (smaller か), "ゖ" (smaller け), combining voiced sound mark(結合文字の濁点), combining semi-voiced sound mark(結合文字の半濁点),"゛"(independent voiced sound mark), "゜"(independent semi-voiced sound mark),"ゝ","ゞ","ゟ"

The combining voiced/semi-voiced sound mark is not same as the diacriticalmarks attached with "が" or "ぱ".

These 10 characters are not usual, so in almost case you can ignore them. For example, most Japanese people do not know the hiragana "ゟ".

Some peoples may need to input "ゔ", "ゕ", "ゖ".

You can customize inputable characters by append them after "ん" of RegularExpression. For example you can applend "ゕ" and "ゖ" by "[ぁ-んゕゖ]*".

Reference: All Hiragana list in Unicode (I have to note you that the Unicode doesn't contains all historical hiragana characters in strict meaning)

The following 10 katakana characters cannot be entered in the example presented in this article.

"゠" (not same as 'equal'. name separater using a past), "ヵ" (smaller full width カ), "ヶ" (smaller full width "ケ"), "ヷ", "ヸ", "ヹ", "ヺ", "ヽ", "ヾ", "ヿ"

These 10 characters are not usual, so in almost case you can ignore them. For example, most Japanese people do not know the katakana "ヿ".

Some peoples may need to input "ヵ", "ヶ".

You can customize inputable characters by append them after "ァ-ヴー" of RegularExpression. For example you can applend "ヵ" and "ヶ" by "[ァ-ヴーヵヶ]*".

Reference: All Katakana list in Unicode (I have to note you that the Unicode doesn't contains all historical katakana characters in strict meaning)