二つの入力項目が同じ値かどうかを確認する方法
今回は、前回のプログラムに、メールアドレスと確認用メールアドレスの二つの入力項目を作成して、その二つの項目に同じ値が入力されたかどうかを確認する処理を追加します。
この処理は、メールアドレスだけでなく、パスワードの入力などにも使われます。
今回使うアノテーションとモデルの検証の詳しい内容は、以下のマイクロソフト公式サイトを参照してください。
ViewModelにアノテーションのCompare属性を設定
まず、ViewModelに新しくメールアドレスと確認用メールアドレスのプロパティを追加します。
追加した二つのプロパティに、アノテーションのCompare属性を設定します。
<Compare()>の引数には、比較対象のプロパティを指定します。
また、MailAddressプロパティには、<EmailAddress()>というアノテーションを設定していますが、これは画面にメールアドレスを表示する際に、メーラーに対するリンクを貼ってくれます。
今回の<Compare()>では、デフォルトのエラーメッセージを表示させていますが、ErrorMessageプロパティを使ってエラーメッセージを変更することもできます。
<Compare("比較するプロパティ", ErrorMessage:="エラーメッセージ")>
|
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 |
Imports System.ComponentModel Imports System.ComponentModel.DataAnnotations Public Class HomeViewModel <DisplayName("氏名")> <Required(ErrorMessage:="{0}が未入力")> Public Property Name As String <DisplayName("住所")> <Required(ErrorMessage:="{0}が未入力")> Public Property Address As String <DisplayName("生年月日")> <DisplayFormat(DataFormatString:="{0:yyyy年MM月dd日}")> <Required(ErrorMessage:="{0}が未入力")> Public Property Birthday As Date <DisplayName("メールアドレス")> <Required(ErrorMessage:="{0}が未入力")> <EmailAddress()> <Compare("MailAddressConf")> Public Property MailAddress As String <DisplayName("メールアドレス(確認)")> <Required(ErrorMessage:="{0}が未入力")> <Compare("MailAddress")> Public Property MailAddressConf As String End Class |
ビューにメールアドレスと確認用メールアドレスの入力項目を追加する
Input.vbhtmlにメールアドレスと確認用メールアドレスの入力項目を追加します。
|
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 35 36 37 38 39 |
@ModelType HomeViewModel @Code ViewData("Title") = "Input" End Code @Using Html.BeginForm("Input", "Home", FormMethod.Post) @<div class="container"> <div class="label"> <p class="label">@Html.LabelFor(Function(model) model.Name)</p> <p class="label">@Html.LabelFor(Function(model) model.Address)</p> <p class="label">@Html.LabelFor(Function(model) model.Birthday)</p> <p class="label">@Html.LabelFor(Function(model) model.MailAddress)</p> <p class="label">@Html.LabelFor(Function(model) model.MailAddressConf)</p> </div> <div class="input"> <p> @Html.TextBoxFor(Function(model) model.Name, New With {.size = 20}) @Html.ValidationMessageFor(Function(model) model.Name) </p> <p> @Html.TextBoxFor(Function(model) model.Address, New With {.size = 50}) @Html.ValidationMessageFor(Function(model) model.Address) </p> <p> @Html.TextBoxFor(Function(model) model.Birthday, New With {.type = "date"}) @Html.ValidationMessageFor(Function(model) model.Birthday) </p> <p> @Html.TextBoxFor(Function(model) model.MailAddress, New With {.type = "email"}) @Html.ValidationMessageFor(Function(model) model.MailAddress) </p> <p> @Html.TextBoxFor(Function(model) model.MailAddressConf, New With {.type = "email"}) @Html.ValidationMessageFor(Function(model) model.MailAddressConf) </p> <input type="submit" value="送信" /> </div> </div> End Using |
メールアドレスで使うHtml.TextBoxFor()メソッドの引数に、typeの型としてemailを指定します。
これは、入力した内容がメールアドレスかどうかをチェックします。
メールアドレスでなければ、以下のようのメッセージが表示されます。
入力した値が違う場合のエラーメッセージ
プログラムを実行して、入力したメールアドレスと確認用のメールアドレスの値が違っていた場合は、デフォルトで以下のようなエラーメッセージが表示されます。
入力内容に問題がなければ、入力値が画面に表示されます。
メールアドレスには、以下のようにメーラーに対するリンクが貼られます。
<a href="mailto:yamada@aaa.co.jp">yamada@aaa.co.jp</a>
