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 validate插件适用于附加到元素的css类。

Answer 4

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

02/29/2008 =好

02/29/2007 =糟糕

以下是代码的本质：

$("#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: "&nbsp;Name required",
            minlength: "&nbsp;Name must be 2 characters"
        },
        address: { required: "&nbsp;Address required" },
        dob: { required: "&nbsp;Date of Birth Required" },
        zipcode: {
            required: "&nbsp;Zipcode required",
            digits: "&nbsp;Only numbers accepted",
            minlength: "&nbsp;Five numbers are required."
        }
    }    
});

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

PS - 我试图将它放在jsfiddle上，但不断收到类似“使用POST”的错误代码，并且无法找出原因。它在我的测试网站上运行良好。

PSS - 我刚用maskedinput.js运行它并且必须将checkdate.substr重新调整为0,3 4,2和7,4 - 不确定为什么......

使用JQuery验证进行日期验证

4 个答案: