webdevqa.jp.net

Mvcでの日付形式の検証

ExpiredDateプロパティをMVCで定義しています

[Required]
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime? ExpirationDate { get; set; }

ページの日付が正しい形式でない場合に検証したい。使用している日付の形式はMM/dd/yyyy

14
Abhishek

DataType 属性を とともに使用する必要があります_DataType.Date_ 。どちらも _System.ComponentModel.DataAnnotations_ 名前空間にあり、次のように使用できます。

_[Required]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
public DateTime? ExpirationDate { get; set; }
_

この回答 にはさらに属性が含まれています。

Update:ASP.NET MVC4でクライアント側の検証を有効にするには、これを行う必要があります。

  1. フッターにjquery.validationプラグインを追加します

    _<%: Scripts.Render("~/Scripts/jquery.validate.min.js") %>
    <%: Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") %>
    _
  2. これをweb.configに追加します

    _<appSettings>
      <add key="ClientValidationEnabled" value="true" />
      <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    </appSettings>
    _
  3. @Html.ValidationMessageFor()を使用するときにこのcssを使用すると、最初は非表示になり、JavaScript検証によって表示されます

    _/* styles for validation helpers */
    .field-validation-error {
        color: #e80c20;
        font-weight: bold;
    }
    
    .field-validation-valid {
        display: none;
    }
    
    input.input-validation-error {
        border: 1px solid #e80c20;
    }
    
    input[type="checkbox"].input-validation-error {
        border: 0 none;
    }
    
    .validation-summary-errors {
        color: #e80c20;
        font-weight: bold;
        font-size: 1.1em;
    }
    
    .validation-summary-valid {
        display: none;
    }
    _
24
truemedia

カスタム検証日付形式は手動で解決する必要があります。

クライアントの検証の問題は、jquery.validate.unobtrusive.min.jswhich何らかの方法で日付/日付時刻形式を受け入れません。 datepickerやブラウザが原因ではありません。残念ながら、手動で解決する必要があります。

私の最終的に機能するソリューション:

前に含める必要があります:

@Scripts.Render("~/Scripts/jquery-3.1.1.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/moment.js")

Moment.jsをインストールするには、次を使用します。

Install-Package Moment.js

そして、最終的に日付形式パーサーの修正を追加できます。

$(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
    }
});
9
lukyer