使用 JQuery 验证的日期验证

Date Validation using JQuery Validation

提问by Adi Sembiring

I'm trying to validate date using jquery validation. Included Javascript Library is:

我正在尝试使用 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>

Supposed I have 3 input field. name, address, and date of bird and I use errorContainer to display error.

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

my javascript is:

我的 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>

but it doesn't work for date validator.

但它不适用于日期验证器。

回答by Adi Sembiring

Got it

知道了

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

回答by Donny Kurnia

I assume you are using this jQuery validate. If you see inside the jquery.validate.jsfile or the included example, there are several build in rules for date. You can read the documentation in http://docs.jquery.com/Plugins/Validation/Methods/date.

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

If your input have different date format, or you want to make sure the date is an actual date, then you can build your own rule. Inside the zip file, there are additional-methods.jsfile. You can learn from it, then creating your own rules.

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

回答by Teja Kantamneni

Add class dateto your date element and try. It should work. jQuery validate plugin works on css classes attached to elements.

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

回答by TimSPQR

This is an old thread, but I thought this noob might chime in to help anyone else who comes by. I was able to make a custom validation method to determine if a date is accurate. Didn't want to have to add another library, so I went with pure javascript and jquery:

这是一个旧线程，但我认为这个菜鸟可能会帮助其他任何人。我能够制作自定义验证方法来确定日期是否准确。不想添加另一个库，所以我使用了纯 javascript 和 jquery：

02/29/2008 = good

02/29/2008 = 好

02/29/2007 = bad

02/29/2007 = 坏

Here is the essence of the code:

下面是代码的本质：

$("#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."
        }
    }    
});

And it just points to four input elements. Again, I thank everyone on this site for helping me in the past - hopefully this might help someone else.

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

PS - I tried to put this on jsfiddle, but kept getting an error code something like "use POST" and couldn't figure out why. It works fine on my test website.

PS - 我试图把它放在 jsfiddle 上，但一直收到类似“使用 POST”之类的错误代码，但不知道为什么。它在我的测试网站上运行良好。

PSS - I just ran it with maskedinput.js and had to readjust the checkdate.substr to 0,3 4,2 and 7,4 - not sure why...

PSS - 我只是用 maskedinput.js 运行它，不得不将 checkdate.substr 重新调整为 0,3 4,2 和 7,4 - 不知道为什么......