正規表現を使って正しい郵便番号かどうかを確認する方法
今回は、前回のプログラムに、郵便番号用の入力項目を作成して、その項目が郵便番号の形式(999-9999)で入力されたかどうかを確認するアノテーション(RegularExpression)を追加します。
[RegularExpression("正規表現", ErrorMessage = "エラーメッセージ")]
ErrorMessageプロパティーに何も設定しなければ、デフォルトで「The field プロパティー名 must match the regular expression '設定した正規表現'.」というメッセージを表示します。
RegularExpressionアノテーションの詳しい内容は、以下のマイクロソフト公式サイトを参照してください。
|
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 |
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}が未入力")] [RegularExpression("[0-9]{3}-[0-9]{4}", ErrorMessage = "999-9999 の形式で入力してください")] public string ZipCode { 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; } } } |
正規表現を使って郵便番号をチェックするやり方は、ここでは以下のようにしています。
"[0-9{3}-[0-9]{4}"
これは、「数字3桁」-(ハイフン)「数字4桁」かどうかチェックしています。
また、以下のように記述しても上記と同様の内容になりますが、全角文字もチェックを通してしまうので、半角のみをOKにしたい場合は、上記の書き方にしてください。
@"¥d{3}-¥d{4}"
先頭の「@」は、円マーク(￥)を使う場合に必要になります。
ビューに郵便番の入力項目を追加する
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 35 36 37 38 39 |
@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.ZipCode)： @Html.TextBoxFor(model => model.ZipCode, new { placeholder = "999-9999"}) @Html.ValidationMessageFor(model => model.ZipCode) </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> } |
テキストボックスに placeholder属性を設定して、どのように入力すればいいのかをガイドしています。
郵便番号形式以外の場合のエラーメッセージ
入力した値が郵便番号の形式ではない場合は、ViewModel で設定したエラーメッセージを表示します。
Indexビューに郵便番号を追加する
郵便番号が表示されるように、Index.cshtml に項目を追加します。
|
1 2 3 4 5 6 7 8 9 10 |
@model HomeViewModel @{ ViewData["Title"] = "Index"; } <h2>@Html.LabelFor(model => model.Name)：@Html.DisplayFor(model => model.Name)</h2> <h2>@Html.LabelFor(model => model.ZipCode)：@Html.DisplayFor(model => model.ZipCode)</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> |
入力した郵便番号が表示される
入力内容に問題がなければ、入力値が画面に表示されます。
