如何驗證出生日期與jQuery驗證程序的日期月年的三個文本框

Question

我需要通過使用jQuery驗證程序與三個單獨的文本框日日月和年進行驗證。

如何做到這一點，請幫助。

HTML代碼

<input type="text" maxlength="2" placeholder="DD" class="dob-day fillone" name="dob-day" id="dob-day" data-fieldgroup="dob" data-fillone-field="true" /> 
<input type="text" maxlength="2" placeholder="MM" id="dob-month" class="dob-month fillone" data-fieldgroup="dob" data-fillone-field="true"> 
<input type="text" maxlength="4" placeholder="YYYY" class="dob-year fillone" id="dob-year" data-fieldgroup="dob" data-fillone-field="true"> 

我使用的數據組進行分組文本框

Answer 1

對不起，我不會說英語

，您可以檢查日期< 30或31分別月份 月年...

我覺得這很容易，當你使用d三個TextBox :( 只是js的

Answer 2

您應該創建一個自定義的驗證方法，這與使用groups選項，驗證提供了沿：

/* Custom validation method to validate a date based on several fields: */ 
$.validator.addMethod("datemultiple", function(value, element, params) { 
    var daySelector = params[0], 
     monthSelector = params[1], 
     yearSelector = params[2], 
     day = parseInt($(daySelector).val(), 10), 
     month = parseInt($(monthSelector).val(), 10), 
     year = parseInt($(yearSelector).val(), 10), 
     dateEntered = new Date(year, month - 1, day); 

    return this.optional(element) || !isNaN(dateEntered.valueOf()); 

}, "Please enter a valid date"); 

$(document).ready(function() { 
    $("#myform").validate({ 
     groups: { 
      /* Only display one validation message for day, month, and year: */ 
      dateOfBirth: "dob-day dob-month dob-year" 
     }, 
     rules: { 
      'dob-day': { 
       required: true, 
       datemultiple: ["#dob-day", "#dob-month", "#dob-year"] 
      }, 
      'dob-month': { 
       required: true 
      } 
     }, 
     /* Place error messages after the "year" field */ 
     errorPlacement: function ($error, $element) { 
      if ($element.data("fieldgroup") === "dob") { 
       $error.insertAfter("#dob-year"); 
      } 
     } 
    }); 
}); 

例子：http://jsfiddle.net/xHC86/

Answer 3

我寫的一個處理數據是否有效的Javascript模塊，你可以在JSFiddle鏈接中查看完整的工作示例。

http://jsfiddle.net/dceast/vmHjN/

下面是確實的驗證模塊：

var compareDate, checkDates = false; 
var validateObject = { 
    init: function(year, month, day) { 
     return this.compareDate.init(year, month, day); 
    }, 
    compareDate: { 
     init: function(year, month, day) { 
      var isValid = false; 
      // Compensate for zero based index, if month was not 
      // subtracted from one 0 === Jan, 1 === Feb, 2 === Mar 
      month -= 1; 

      // Create a new date object with the selected 
      // year, month, and day values and retrieve the 
      // milliseconds from it. 
      var mSeconds = (new Date(year, month, day)).getTime(); 
      var objDate = new Date(); 

      // Set the time of the object to the milliseconds 
      // retrieved from the original date. This will 
      // convert it to a valid date. 
      objDate.setTime(mSeconds); 

      // Compare if the date has changed, if it has then 
      // the date is not valid 
      if (objDate.getFullYear() === year && 
       objDate.getMonth() === month && 
       objDate.getDate() === day) 
      { 
       isValid = true; 
      } 
      return isValid; 
     } 
    } 
}; 

Answer 4

var compareDate, checkDates = false; 
var validateObject = { 
    init: function(year, month, day) { 
     return this.compareDate.init(year, month, day); 
    }, 
    compareDate: { 
     init: function(year, month, day) { 
      var isValid = false; 
      // Compensate for zero based index, if month was not 
      // subtracted from one 0 === Jan, 1 === Feb, 2 === Mar 
      month -= 1; 

      // Create a new date object with the selected 
      // year, month, and day values and retrieve the 
      // milliseconds from it. 
      var mSeconds = (new Date(year, month, day)).getTime(); 
      var objDate = new Date(); 

      // Set the time of the object to the milliseconds 
      // retrieved from the original date. This will 
      // convert it to a valid date. 
      objDate.setTime(mSeconds); 

      // Compare if the date has changed, if it has then 
      // the date is not valid 
      if (objDate.getFullYear() === year&& 
       objDate.getMonth() === month && 
       objDate.getDate() === day) 
      {     
       if(objDate <= new Date()) 
       { 
        isValid = true; 
       }     
      } 
      return isValid; 
     } 
    } 
}; 

$(function() { 
    var validateButton = $('#btValidate'); 

    validateButton.click(function(e) { 
     var month = parseInt(document.getElementById('month').value, 0), 
      day = parseInt(document.getElementById('day').value, 0), 
      year = parseInt(document.getElementById('year').value, 0), 
      alertBox = $('#alert'), 
      isValid = false; 

     isValid = validateObject.init(year, month, day); 
     var color, message; 

     if (isValid === true) 
     { 
      color = "#008000"; 
      message = "Your date is valid!"; 
     } 
     else if (isValid === false) 
     { 
      color = "#F00"; 
      message = "Your date is not valid!"; 
     } 
     alertBox.css('background', "" + color) 
      .html("<p>"+ message +"</p>") 
      .stop() 
      .animate({ 
       width: "200px", 
       paddingLeft: "75px" 
      }, 1750, "easeOutBounce", function() { 
       $(this).animate({ 
        width: "0px", 
        paddingLeft: "0px" 
       }, 1000, "easeInBounce"); 
     }); 
    }); 
}); 

工作代碼在這裏： http://jsfiddle.net/vmHjN/140/