web-dev-qa-db-ja.com

JQuery Validateを使用してdd / mm / yyyy形式の日付を検証します

生年月日と死亡日を入力しています。検証が必要です

  1. 死亡日は生年月日よりも後でなければなりません
  2. Dd/mm/yyyyの日付形式
  3. 今日以下の日付。

検証は期待どおりに機能せず、問題を把握できません。助けてください。

フィドルコード

使用されるJSライブラリ

  1. カレンダー/日付ピッカーのJQuery UI
  2. フォーム検証のためのJQuery検証

  3. 検証ライブラリの追加メソッド

    var today = new Date();
var authorValidator = $("#itemAuthorForm").validate({
rules : {
    dateOfBirth : {
        required : false,
        date : true,
        dateITA : true,
        dateLessThan : '#expiredDate'
    },
    expiredDate : {
        required : false,
        date : true,
        dateITA : true,
        dateGreaterThan : "#dateOfBirth"
    }
},
onfocusout : function(element) {
    if ($(element).val()) {
        $(element).valid();
    }
}
});
var dateOptionsDOE = {
maxDate : today,
dateFormat : "dd/mm/yy",
changeMonth : true,
changeYear : true,
onClose : function(selectedDate) {
    $("#dateOfBirth").datepicker("option", "maxDate", selectedDate);
}
};
var dateOptionsDOB = {
maxDate : today,
dateFormat : "dd/mm/yy",
changeMonth : true,
changeYear : true,
onClose : function(selectedDate) {
    $("#expiredDate").datepicker("option", "minDate", selectedDate);
}
 };

jQuery.validator.addMethod("dateGreaterThan",
function(value, element, params) {
if ($(params).val() === "")
    return true;

if (!/Invalid|NaN/.test(new Date(value))) {
    return new Date(value) > new Date($(params).val());
}
return isNaN(value) && isNaN($(params).val())
        || (Number(value) > Number($(params).val()));
        }, 'Must be greater than {0}.');
        jQuery.validator.addMethod("dateLessThan",
        function(value, element, params) {
if ($(params).val() === "")
    return true;

if (!/Invalid|NaN/.test(new Date(value))) {
    return new Date(value) < new Date($(params).val());
}

return isNaN(value) && isNaN($(params).val())
        || (Number(value) < Number($(params).val()));
        }, 'Must be less than {0}.');
        $("#expiredDate").datepicker(
    $.extend({}, $.datepicker.regional['en-GB'], dateOptionsDOE));
        $("#dateOfBirth").datepicker(
    $.extend({}, $.datepicker.regional['en-GB'], dateOptionsDOB));
javascriptjqueryvalidationdatedatetime
32
Cipher

dateバリデーターは必要ありません。それは dd/mm/yyyy形式をサポートしていません であり、それが13/01/2014のような入力に対して「有効な日付を入力してください」というメッセージを受け取っている理由です。必要に応じてdd/mm/yyyy形式を使用するdateITAバリデータを既に持っています。

dateバリデータと同様に、dateGreaterThanおよびdateLessThanのコードは、入力文字列に対してnew Dateを呼び出し、日付の解析と同じ問題を抱えています。次のような関数を使用して、日付を解析できます。

function parseDMY(value) {
    var date = value.split("/");
    var d = parseInt(date[0], 10),
        m = parseInt(date[1], 10),
        y = parseInt(date[2], 10);
    return new Date(y, m - 1, d);
}
19
izstas

これはうるう年もチェックします。これは純粋な正規表現であるため、どのlibよりも高速です（moment.jsよりも高速です）。ただし、urコードで多くの日付を使用する場合は、moment.jsを使用することをお勧めします

var dateRegex = /^(?=\d)(?:(?:31(?!.(?:0?[2469]|11))|(?:30|29)(?!.0?2)|29(?=.0?2.(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(?:\x20|$))|(?:2[0-8]|1\d|0?[1-9]))([-.\/])(?:1[012]|0?[1-9])\1(?:1[6-9]|[2-9]\d)?\d\d(?:(?=\x20\d)\x20|$))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\x20[AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/;

console.log(dateRegex.test('21/01/1986'));

enter image description here

http：//regexper.com/....

30
Leo Cavalcante

Moment jsライブラリを使用すると、このように簡単に実行できます-

jQuery.validator.addMethod("validDate", function(value, element) {
        return this.optional(element) || moment(value,"DD/MM/YYYY").isValid();
    }, "Please enter a valid date in the format DD/MM/YYYY");
15
UBF

プロジェクトで同様の問題が発生しました。たくさん苦労した後、私はこの解決策を見つけました：

if ($.datepicker.parseDate("dd/mm/yy","17/06/2015") > $.datepicker.parseDate("dd/mm/yy","20/06/2015"))
    // do something

この問題のためにjQuery ValidateやMoment.jsなどのプラグインは必要ありません。このソリューションが役立つことを願っています。

9
RushabhG

これは私には問題ありません。

$(document).ready(function () {
       $('#btn_move').click( function(){
           var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
           var Val_date=$('#txt_date').val();
               if(Val_date.match(dateformat)){
              var seperator1 = Val_date.split('/');
              var seperator2 = Val_date.split('-');

              if (seperator1.length>1)
              {
                  var splitdate = Val_date.split('/');
              }
              else if (seperator2.length>1)
              {
                  var splitdate = Val_date.split('-');
              }
              var dd = parseInt(splitdate[0]);
              var mm  = parseInt(splitdate[1]);
              var yy = parseInt(splitdate[2]);
              var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
              if (mm==1 || mm>2)
              {
                  if (dd>ListofDays[mm-1])
                  {
                      alert('Invalid date format!');
                      return false;
                  }
              }
              if (mm==2)
              {
                  var lyear = false;
                  if ( (!(yy % 4) && yy % 100) || !(yy % 400))
                  {
                      lyear = true;
                  }
                  if ((lyear==false) && (dd>=29))
                  {
                      alert('Invalid date format!');
                      return false;
                  }
                  if ((lyear==true) && (dd>29))
                  {
                      alert('Invalid date format!');
                      return false;
                  }
              }
          }
          else
          {
              alert("Invalid date format!");

              return false;
          }
       });
   });
3
neethu mohan

これにより、dd/mm/yyyの日付が検証されます。 jquery.validate.jsを編集して追加します。

参照（正規表現）： 日付形式dd/mm/yyyyを検証する正規表現

dateBR: function( value, element ) {
            return this.optional(element) || /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(value);
        }

messages: {
dateBR: "Invalid date."
}

classRuleSettings: {
dateBR: {dateBR: true}
}

使用法：

 $( "#myForm" ).validate({
            rules: {
                field: {
                    dateBR: true
                }
            }
        });
3
dubonzi