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

如何修改下面的代码，以便在我的validate_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;
}

date1=document.getElementById（'date1'）.value
如果（日期1）{
如果（验证日期（日期1）=真）{
date1=parseDate（date1）
}否则{
$（“#date1”）.addClass（“无效”）
返回
}
}否则{
date1=null
}
date2=document.getElementById（'date2'）。值
如果（日期2）{
如果（验证日期（日期2）=真）{
date2=parseDate（date2）
}否则{
$（“#日期2”）.addClass（“无效”）
返回
}
}否则{
date2=null
}
date3=document.getElementById（'date3'）。值
如果（日期3）{
如果（验证日期（日期3）=真）{
date3=parseDate（date3）
}否则{
$（“#date3”）.addClass（“无效”）
返回
}
}否则{
date3=null
}
date4=document.getElementById（'date4'）。值
如果（日期4）{
如果（验证日期（日期4）=真）{
date4=parseDate（date4）
}否则{
$（“#date4”）.addClass（“无效”）
返回
}
}否则{
date4=null
}
函数验证日期（str）{
var t=str.match（/^（\d{2}）\/（\d{2}）\/（\d{4}）$/）；
如果（t==null）返回false；
var d=parseInt（t[1]），
m=parseInt（t[2]，10），
y=parseInt（t[3]，10）；
//下面应该是比较准确的算法
如果（m>=1&&m=1&&d您的代码有点混乱，因此我做了一些快速调整，因为我不确定您是否在使用框架。以下是我认为您所问问题的基本模型。它将查找ID为“date1”、“date2”的元素…直到到达date4并将停止。对于每个元素，它获取值，验证值，如果有效，它将解析该值并将该数据设置为父元素的值。否则，它将添加“无效”类。不确定if（值）上的其他值子句本来应该这样做的，但我把它放在了那个里，以防你们在做一些我不知道的事情

另一种方法是按标记名检查元素，并筛选出包含“date”的name/id值的元素，但我认为这更直接

var base = 'date';

for(var i=1;i<=4;i++)}

    var el = document.getElementById(base+i);
    var value = el.value;
    if (value) {
        if (validate_date(value) == true) {
            el.value = parseDate(value)
        } else {
            el.className = (el.className.length > 0) ? el.className + " invalid" : "invalid";
        }
    } else {
        el.value = "";
    }

}

var base='date'；
对于（变量i=1；i 0）？el.className+“无效”：“无效”；
}
}否则{
el.value=“”；
}
}
以下是您想要的：

JsFiddle:

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>

.invalid{color:red;}

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;
  });
});

JavaScript:

<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>

.invalid{color:red;}

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;
  });
});

函数验证日期（str）{
var t=str.match（/^（\d{2}）\/（\d{2}）\/（\d{4}）$/）；
如果（t==null）返回false；
var d=parseInt（t[1]），
m=parseInt（t[2]，10），
y=parseInt（t[3]，10）；
//下面应该是比较准确的算法
如果（m>=1&&m=1&&d，在JS中验证日期的最简单方法是尝试从输入字符串生成日期对象。而您的正则表达式
var t=str.match（/^（\d{2}）\/（\d{2}）\/（\d{4}）$/）
接受类似于
03/04/2014
（正好是两位数的mm-dd，只有斜杠分隔符）尝试
新日期（str
将接受所有这些：
12/4/1961
，
1944-12-7
，
1927年2月7日
，
1776年7月4日
，为用户提供更大的灵活性。