c# - MVC 5 リモート検証

Question

フォームが送信される前に、ユーザーからの入力フィールド値を検証する必要があります。

カスタムコントローラーでアクションを作成し、それでフィールドを装飾しました。

アクション名: CheckValue コントローラー名: Validate

[Remote("CheckValue", "Validate"), ErrorMessage="Value is not valid"]
public string Value { get; set; }

問題は、送信を押すとフォームが送信Value is not validされ、ユーザーが入力した値が無効な場合にメッセージが表示されることです。

ユーザーが入力した値を検証し、値が有効でない場合にフォームが送信されないようにし、エラーメッセージを表示するにはどうすればよいですか?

JavaScript で true を返すフォームが有効かどうかを確認しようとする$("#formId").valid()と、値のステータス (有効かどうか) に関係なく、フォームが有効であることを意味します。

一方、[Required]属性で別のフィールドを装飾すると、フォームは送信されず、必要なフィールドにエラーが表示されます。ただし、リモート検証フィールドの検証は舞台裏では行われません。

score 36 · Accepted Answer

MVC でのリモート検証の完全なソリューション。電子メールがデータベースに存在するかどうかを確認し、次のエラーを表示します。

メールは既に存在します

アカウントコントローラーのアクション

[AllowAnonymous]
[HttpPost]
public ActionResult CheckExistingEmail(string Email)
{
    try
    {
        return Json(!IsEmailExists(Email));
    }
    catch (Exception ex)
    {
        return Json(false);
    }
}

private bool IsEmailExists(string email)
    =>  UserManager.FindByEmail(email) != null;

モデルの検証を追加

[Required]
[MaxLength(50)]
[EmailAddress(ErrorMessage = "Invalid Email Address")]
[System.Web.Mvc.Remote("CheckExistingEmail", "Account", HttpMethod = "POST", ErrorMessage = "Email already exists")]
public string Email { get; set; }

スクリプトを追加

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

score 1 · Accepted Answer

MVC でのリモート検証

モデルクラスには、プロパティを定義した名前空間 "System.Web.Mvc" が必要です。

using System.Web.Mvc;

[Required(ErrorMessage = "E-mail is required")]
[RegularExpression(@"^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$", ErrorMessage = "Email is not valid")]
[StringLength(30, ErrorMessage = "Email must not be more than 30 char")]
[Remote("IsEmailAvailable", "User", ErrorMessage = "E-mail already in use")]
public string Email { get; set; }

コントローラーに IsEmailAvailable アクションを実装する必要があることを確認してください。

[HttpGet]
public JsonResult IsEmailAvailable(string email)
{
    // Check if the e-mail already exists
    return Json(!db.Users.Any(x => x.Email == email), JsonRequestBehavior.AllowGet);
}

クライアント側の検証のために、この js を View に追加したことを確認してください。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>

また、web.config からクライアント側の検証を有効にします

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

ノート：

リモート属性は、JavaScript が有効になっている場合にのみ機能します。エンドユーザーが自分のマシンで JavaScript を無効にすると、検証は機能しません。これは、RemoteAttribute がサーバー側の検証メソッドに対して非同期の AJAX 呼び出しを行うために JavaScript を必要とするためです。その結果、ユーザーは適切な検証をバイパスしてフォームを送信できます。これが、サーバー側の検証が常に重要である理由です。

Javascriptが無効になっている場合：

サーバー側の検証を機能させるには、JavaScript が無効になっている場合、2 つの方法があります。

コントローラーアクションメソッドにモデル検証エラーを動的に追加します。
カスタムリモート属性を作成し、IsValid() メソッドをオーバーライドします。

コントローラーアクションメソッドにモデル検証エラーを動的に追加します。[HttpPost] 属性で装飾された Create アクションメソッドを次のように変更します。

[HttpPost]
public ActionResult Create(User user)
{
    // Check if the Email already exists, and if it does, add Model validation error
    if (db.Users.Any(x => x.Email == user.Email))
    {
        ModelState.AddModelError("Email", "Email already in use");
    }
    if (ModelState.IsValid)
    {
        db.Users.AddObject(user);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(user);
}

この時点で、ブラウザーで JavaScript を無効にし、アプリケーションをテストします。クライアント側の検証は取得されませんが、フォームを送信するときにサーバー側の検証により、検証エラーがある場合はユーザーがフォームを送信できないことに注意してください。

ただし、検証を実行する責任をコントローラーのアクションメソッドに委譲すると、MVC 内の関心の分離に違反します。理想的には、すべての検証ロジックをモデルに含める必要があります。検証には、MVC モデルで検証属性を使用することをお勧めします。

c# - MVC 5 リモート検証

6 に答える 6

Related

Reference