javascript - 同时检查 4 个输入框的值，而不是逐一检查

Question

如何修改下面的代码，以便如果我的 validate_date(date) 为 false，我就能够检查值并向 4 个输入框添加一个类，同时而不是逐一检查每个字段 -一、每次都按当前设置退出该功能？

我正在使用一些 jQuery，所以我对 jQuery 很友好

date1 = document.getElementById('date1').value
if (date1) {
    if (validate_date(date1) == true) {
        date1 = parseDate(date1)
    } else {
        $("#date1").addClass("invalid")
        return
    }
} else {
    date1 = null
}
date2 = document.getElementById('date2').value
if (date2) {
    if (validate_date(date2) == true) {
        date2 = parseDate(date2)
    } else {
        $("#date2").addClass("invalid")
        return
    }
} else {
    date2 = null
}
date3 = document.getElementById('date3').value
if (date3) {
    if (validate_date(date3) == true) {
        date3 = parseDate(date3)
    } else {
        $("#date3").addClass("invalid")
        return
    }
} else {
    date3 = null
}
date4 = document.getElementById('date4').value
if (date4) {
    if (validate_date(date4) == true) {

        date4 = parseDate(date4)
    } else {
        $("#date4").addClass("invalid")
        return
    }
} else {
    date4 = null
}
function validate_date(str) {
    var t = str.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
    if (t === null) return false;
    var d = parseInt(t[1]),
        m = parseInt(t[2], 10),
        y = parseInt(t[3], 10);
    //below should be more acurate algorithm
    if (m >= 1 && m <= 12 && d >= 1 && d <= 31) {
        return true;
    }
    return false;
}

Answer 1

这就是你想要的:

JsFiddle: http://jsfiddle.net/RqyDT/1/

HTML:

<form class="validation" action="your_page.html">
<p>
    <label for="date1">Date 1</label>
    <input type="text" name="date1" class="date"/>
</p>
<p>
    <label for="date2">Date 2</label>
    <input type="text" name="date2" class="date"/>
</p>
<p>
    <label for="date1">Date 3</label>
    <input type="text" name="date3" class="date"/>
</p>
<p>
    <label for="date2">Date 4</label>
    <input type="text" name="date4" class="date"/>
</p>
<p>
    <input type="submit" value="Submit"/>
</p>
</form>

CSS:

.invalid{color:red;}

JavaScript:

function validate_date(str) {
    var t = str.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
    if (t === null) return false;
    var d = parseInt(t[1]),
        m = parseInt(t[2], 10),
        y = parseInt(t[3], 10);
    //below should be more acurate algorithm
    if (m >= 1 && m <= 12 && d >= 1 && d <= 31) {
        return true;
    }
    return false;
}

$(document).ready(function(){
  $(".validation").submit(function(){
      //Initialize
      var valid_fields = true;
      $('label').removeClass("invalid");

      //Loop through date input
      $(".date").each(function(){
          var date_val = $(this).val();

          //If validation function return false, add class "invalid" to the label
          if (validate_date(date_val) == false) {
              $('label[for="'+ $(this).attr('name') +'"]').addClass('invalid');
              valid_fields = false;
          }
      });

      //Return true or false, depends of the form validation
      return valid_fields;
  });
});