Javascript 验证分解日期宽度jQuery验证插件

jQuery验证插件用于验证所有表单数据：

为出生日期选择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>

---

您可以使用

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

$（函数（）{
//此功能需要选择月份、日期和年份
$.validator.addMethod（“FullDate”，function（））{
//如果选择了所有值
如果（$（“#DOBd”）.val（）！=”&&（$（“#DOBm”）.val（）！=”&&（$（“#DOBy”）.val（）！=”）{
返回true；
}否则{
返回false；
}
}, '');
//此函数检查所选日期，如果超过18年，则返回true
$.validator.addMethod（“年龄”，函数（）{
//仅当所有项目都有值时比较日期
如果（$（“#DOBd”）.val（）！=”&&（$（“#DOBm”）.val（）！=”&&（$（“#DOBy”）.val（）！=”）{
//获取所选日期
var DOB=新日期（$（“#DOBy”）.val（），$（“#DOBm”）.val（），$（“#DOBd”）.val（）；
var eday=new Date（）；//获取今天
eday.setFullYear（eday.getFullYear（）-18）；//设置为18年前
//如果超过18岁
如果（DOB

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