C# サンプル集

入力値が一致するかチェック

2024/4/14

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

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

メールアドレスと確認用メールアドレスが一致するかチェックする

メールアドレスと確認用メールアドレスが一致するかチェックする

SameValueValidation.cshtml.cs

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

namespace WorkStandard.Pages.validation
{
    public class SameValueValidationModel : PageModel
    {
        [BindProperty]
        [DisplayName("メールアドレス")]
        [DataType(DataType.EmailAddress)]
        [Required(ErrorMessage = "{0}は省略できません。")]
        [Display(Name = "メールアドレス")] //CompareのErrorMessageの{1}はこの値
        public string? MailAddress { get; set; }

        [BindProperty]
        [DisplayName("確認用メールアドレス")]
        [DataType(DataType.EmailAddress)]
        [Required(ErrorMessage = "{0}は省略できません。")]
        [Compare(nameof(MailAddress),ErrorMessage = "{1}と異なります。")]
        public string? ConfirmMailAddress { get; set; }

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

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

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

SameValueValidation.cshtml

@page
@model WorkStandard.Pages.validation.SameValueValidationModel

<form method="post">
    <div class="mb-3">
        <label asp-for="MailAddress"></label>
        <input asp-for="MailAddress" class="form-control" />
        <span asp-validation-for="MailAddress" class="text-danger"></span>
    </div>
    <div class="mb-3">
        <label asp-for="ConfirmMailAddress"></label>
        <div class="form-text">確認用に同じメールアドレスを入力してください。</div>
        <input asp-for="ConfirmMailAddress" class="form-control" />
        <span asp-validation-for="ConfirmMailAddress" 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 文字を赤くして、危険であることを示します。→ テーマカラー
form-text 入力項目の説明用の文字列にします。→ フォームテキスト
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

English