使用jQuery验证的日期验证

Question

我想使用jquery验证来验证日期。包括Javascript库是：

<script type="text/javascript" src="<?php echo base_url()?>asset/jqueryui/ui/ui.core.js"></script> 
     <script type="text/javascript" src="<?php echo base_url()?>asset/jqueryui/ui/ui.datepicker.js"></script> 
     <script src="<?php echo base_url()?>asset/jquery/jquery.metadata.js" type="text/javascript"></script> 
     <script src="<?php echo base_url()?>asset/jqvalidate/jquery.validate.js" type="text/javascript"></script> 

假设我有3个输入字段。鸟的名称，地址和日期，我使用errorContainer来显示错误。

我的JavaScript是：

   <script type="text/javascript"> 
       $().ready(function() { 

        var errorContainer = $('div.errorContainer'); 
        // validate the form when it is submitted 
        var validator = $("#frm").validate({ 
         errorContainer: errorContainer, 
         errorLabelContainer: $("ol", errorContainer), 
         wrapper: 'li', 
         meta: "validate", 
         rules: { 
          datepicker: { 
           required: true, 
           date: true 
          } 
          } 
        }); 
       }); 

       $(function(){ 
        $("#datepicker").datepicker(); 
       }); 
       </script> 

<form id="frm"> 
<input type="text" id="name" name="name" class="field text {validate:{required:true}}"> 
<input type="text" id="address" name="address" class="field text {validate:{required:true}}"> 
<input type="text" id="datepicker" name="datepicker"> 
<input type="submit"> 
</form> 

，但它不日期验证工作。

我需要你的帮助。谢谢

Answer 1

得到它

<input type="text" id="datepicker" name="datepicker" class="{validate:{required:true, date:true}}"> 

Answer 2

我假设你使用this jQuery validate。如果您在jquery.validate.js文件或包含的示例中看到，有几个内置规则date。您可以阅读http://docs.jquery.com/Plugins/Validation/Methods/date中的文档。

如果您的输入具有不同的日期格式，或者您想确保日期是实际日期，那么您可以构建自己的规则。在zip文件里面，有additional-methods.js文件。你可以从中学习，然后创建你自己的规则。

Answer 3

添加类date你的日期元素和尝试。它应该工作。 jQuery验证插件适用于附加到元素的css类。

Answer 4

这是一个古老的线程，但我认为这个noob可能会帮助任何其他来的人。 我能够自定义验证方法来确定日期是否准确。不想得再添库，所以我用纯JavaScript和jQuery去：

2008年2月29日=好

2007年2月29日=坏

这里是本质的代码：

$("#submit").click(function() { 
    var form = $("#validationtest"); 
    form.validate(); 
    if (form.valid() == false) 
    { alert("Initial Data Incomplete"); } 
    else 
    { alert("Good data!"); } 
}); 

$.validator.addMethod("AccurateDate", function(value) { 
    var checkdate = $("#dob").val(); 
    var rawmonth = checkdate.substr(0,2); 
    var rawday = checkdate.substr(3,2); 
    var rawyear = checkdate.substr(6,4); 
    var checkdate = new Date($("#dob").val()); 
    return ((rawmonth == checkdate.getMonth()+1) && 
     (rawday == checkdate.getDate()) && 
     (rawyear == checkdate.getFullYear()) 
     ); 
                 }, "Not a real date"); 
$.validator.classRuleSettings.AccurateDate = {AccurateDate: true}; 

$("form").validate({ 
     debug: true, //change to false when going into production 
     rules: { 
       name: {required: true, 
        minlength: 2 }, 
       address: { required: true }, 
       dob: {required: true, 
        AccurateDate: true}, 
       zipcode: { required: true, 
          digits: true, 
          minlength: 5 } 
       }, 
    messages: { 
       name: { required: " Name required", 
         minlength: " Name must be 2 characters" }, 
       address: { required: " Address required" }, 
       dob: { required: " Date of Birth Required" }, 
       zipcode: { required: " Zipcode required", 
         digits: " Only numbers accepted", 
         minlength: " Five numbers are required." } 
       }  
}); 

它只是指向四个输入元素。 再一次，我感谢这个网站上的每个人都帮助过去 - 希望这可以帮助别人。

PS - 我试图把这个放在jsfiddle上，但不断得到一个类似“使用POST”的错误代码，并找不到原因。它在我的测试网站上正常工作。

PSS - 我只是maskedinput.js跑了，不得不到checkdate.substr调整到0,3 4,2 7,4和 - 不知道为什么......