代码之家 › 专栏 › 技术社区 › Adi Sembiring

使用jquery验证进行日期验证

jquery

Adi Sembiring · 技术社区 · 15 年前

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

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

4 回复 | 直到 6 年前

Adi Sembiring 15 年前

知道了

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

Donny Kurnia 15 年前

我想你在用 this jQuery validate . 如果你看到里面 jquery.validate.js 文件或包含的示例中,有几个内置规则用于 date . 您可以在 http://docs.jquery.com/Plugins/Validation/Methods/date .

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

Teja Kantamneni 14 年前

添加类 date 到你的日期元素并尝试。它应该能工作。jquery validate插件在附加到元素的CSS类上工作。

david 6 年前

这是一条古老的线,但我想这个角落可能会配合帮助任何人谁来过。我可以定制验证方法来确定日期是否准确。不想再添加其他库,所以我使用了纯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."
        }
    }    
});

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

我试着把它放在jsfiddle上,但是不断地得到一个错误代码,比如“use post”,无法找出原因。它在我的测试网站上运行良好。

pss-我刚用maskedinput.js运行它,不得不将checkdate.subsr重新调整为0,3,4,2和7,4-不知道为什么…