二つの入力項目が同じ値かどうかを確認する方法
今回は、前回のプログラムに、メールアドレスと確認用メールアドレスの二つの入力項目を作成して、その二つの項目に同じ値が入力されたかどうかを確認するアノテーションを追加します。
このアノテーションは、メールアドレスだけでなく、パスワードの入力などにも使われます。
Compareアノテーションの詳しい内容は、以下のマイクロソフト公式サイトを参照してください。
ViewModelにアノテーションのCompare属性を設定
まず、ViewModel に新しくメールアドレスと確認用メールアドレスのプロパティーを追加します。
追加した二つのプロパティーに、アノテーションの Compare属性を設定します。
[Compare()] の引数には、比較対象のプロパティーを指定します。
ErrorMessageプロパティーに何も設定しない場合は、デフォルトで「'プロパティー名' and '比較対象プロパティー名' do not match.」というメッセージを表示します。
[Compare("比較するプロパティー", ErrorMessage = "エラーメッセージ")]
また、EmailAddress属性を設定すると、入力された内容がメールアドレスかどうかをチェックし、表示画面のメールアドレスに、メーラーに対するリンクを貼ってくれます。
ErrorMessageプロパティーに何も設定しなければ、デフォルトで「The プロパティー名 field is not a valid e-mail address.」というメッセージを表示します。
[EmailAddress(ErrorMessage = "エラーメッセージ")]
EmailAddressアノテーションの詳しい内容は、以下のマイクロソフト公式サイトを参照してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
using System.ComponentModel; using System.ComponentModel.DataAnnotations; namespace MvcApp1.Models.ViewModels { public class HomeViewModel { [DisplayName("氏名")] [Required(ErrorMessage = "{0}が未入力")] public string Name { get; set; } [DisplayName("住所")] [Required(ErrorMessage = "{0}が未入力")] public string Address { get; set; } [DisplayName("生年月日")] [DisplayFormat(DataFormatString = "{0:yyyy年M月d日}")] [Required(ErrorMessage = "{0}が未入力")] public DateOnly? Birthday { get; set; } [DisplayName("メールアドレス")] [Compare("MailAddressComp", ErrorMessage = "メールアドレスが一致しません")] [EmailAddress(ErrorMessage = "メールアドレスを入力してください")] [Required(ErrorMessage = "{0}が未入力")] public string MailAddress { get; set; } [DisplayName("メールアドレス(確認)")] [Compare("MailAddress", ErrorMessage = "メールアドレスが一致しません")] [EmailAddress(ErrorMessage = "メールアドレスを入力してください")] [Required(ErrorMessage = "{0}が未入力")] public string MailAddressComp { get; set; } } } |
ビューにメールアドレスと確認用メールアドレスの入力項目を追加する
Input.cshtml にメールアドレスと確認用メールアドレスの入力項目を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
@model HomeViewModel @{ ViewData["Title"] = "Input"; } @using (Html.BeginForm("Input", "Home", FormMethod.Post)) { <p> @Html.LabelFor(model => model.Name)： @Html.TextBoxFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </p> <p> @Html.LabelFor(model => model.Address)： @Html.TextBoxFor(model => model.Address) @Html.ValidationMessageFor(model => model.Address) </p> <p> @Html.LabelFor(model=> model.Birthday)： @Html.TextBoxFor(model => model.Birthday, new { type = "date" }) @Html.ValidationMessageFor(model => model.Birthday) </p> <p> @Html.LabelFor(model => model.MailAddress)： @Html.TextBoxFor(model => model.MailAddress) @Html.ValidationMessageFor(model => model.MailAddress) </p> <p> @Html.LabelFor(model => model.MailAddressComp)： @Html.TextBoxFor(model => model.MailAddressComp) @Html.ValidationMessageFor(model => model.MailAddressComp) </p> <p><input type="submit" value=" 送 信 " /></p> } |
メールアドレス以外の場合のエラーメッセージ
入力した値がメールアドレス以外の場合は、ViewModel で設定したエラーメッセージを表示します。
入力した値が違う場合のエラーメッセージ
入力したメールアドレスと確認用メールアドレスが違っていた場合は、ViewModel で設定したエラーメッセージを表示します。
Incexビューにメールアドレスを追加する
メールアドレスが表示されるように、Index.cshtml に項目を追加します。
|
1 2 3 4 5 6 7 8 9 |
@model HomeViewModel @{ ViewData["Title"] = "Index"; } <h2>@Html.LabelFor(model => model.Name)：@Html.DisplayFor(model => model.Name)</h2> <h2>@Html.LabelFor(model => model.Address)：@Html.DisplayFor(model => model.Address)</h2> <h2>@Html.LabelFor(model => model.Birthday)：@Html.DisplayFor(model => model.Birthday)</h2> <h2>@Html.LabelFor(model => model.MailAddress)：@Html.DisplayFor(model => model.MailAddress)</h2> |
メールアドレスにリンクが貼られる
入力内容に問題がなければ、入力値が画面に表示されます。
メールアドレスには、以下のようにメーラーに対するリンクが貼られます。
<a href="mailto:yamada@aaa.com">yamada@aaa.com</a>