验证分解的日期宽度 jQuery Validation 插件答案

【问题标题】：Validating broken up date width jQuery Validation plugin验证分解的日期宽度 jQuery Validation 插件
【发布时间】：2010-01-13 12:01:38
【问题描述】：

jQuery Validation 插件用于验证所有表单数据：http://docs.jquery.com/Plugins/Validation

出生日期有 3 个选择字段：日、月、年。

首先：我如何确保用户选择所有 3 个字段，并且仅当未选择所有三个字段之一时才显示“无效”图标。例如，现在我有这 3 个选择字段，但是当我先选择并且没问题时，即使没有选择其他两个选择字段（月、年），插件也会显示“确定”图标。

第二：我如何验证这 3 个选择字段并确保在这 3 个选择字段中选择的出生日期的人已超过 18 岁？

<select name="DOBd" id="DOBd">
    <option value="">DD</option>
    // day options
</select>
<select name="DOBm" id="DOBm">
    <option value="">MM</option>
    // month options
</select>
<select name="DOBy" id="DOBy">
    <option value="">YYYY</option>
    // year options
</select>

我还设置了“错误”图标不是在每个之后显示，而是在所有之后显示：

groups:{
    date_of_birth:"DOBd DOBm DOBy"
},
errorPlacement:function(error,element){
    if (element.attr("name") == "DOBd" || element.attr("name") == "DOBm" || element.attr("name") == "DOBy")
        error.appendTo(element.parent("td").next("td"));
    else
        error.appendTo(element.parent("td").next("td"));
},

【问题讨论】：

标签： javascript jquery validation date

【解决方案1】：

您可以使用$.validator.addMethod添加自定义方法

添加两种方法：一种用于检查所有 3 个选择 (FullDate)，另一种用于检查年龄 (Age)。由于这 3 个元素是分组的，我只是将一个方法放在一个选择器上，另一个放在另一个选择器上。

另外，您的 errorPlacement 函数有一个 if/else 可以做完全相同的事情，这不是必需的。

$(function() {
  // this function requires month day and year selections
  $.validator.addMethod("FullDate", function() {
    //if all values are selected
    if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") {
      return true;
    } else {
      return false;
    }
  }, '<img src="/path/to/image.png" alt="Please select a day, month, and year" title="Please select a day, month, and year" />');

  // this function checks the selected date, returning true if older than 18 years
  $.validator.addMethod("Age", function() {
    //only compare date if all items have a value
    if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") {
      //get selected date
      var DOB = new Date($("#DOBy").val(), $("#DOBm").val(), $("#DOBd").val());
      var eday = new Date(); //get today
      eday.setFullYear(eday.getFullYear() - 18); //set to eighteen years ago
      //if older than 18
      if(DOB < eday) {
        return true;
      } else {
        return false;
      }
    }
    return true;
  }, '<img src="/path/to/image.png" alt="Must be 18" title="Must be 18" />');

  $("form").validate({
    rules: {
      DOBd: "FullDate",
      DOBm: "Age"
    },
    groups:{
      date_of_birth:"DOBd DOBm DOBy"
    },
    errorPlacement:function(error,element){
      error.appendTo(element.parent("td").next("td"));
    }
  });    
});

【讨论】：