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

Answer 2

您的代码有点令人困惑，因此我做了一些快速调整，因为我不确定您是否使用了框架。这是我相信你问的基本模型。它将使用ids＆＃34; date1＆＃34;，＆＃34; date2＆＃34; ...查找元素，直到它到达date4并将停止。对于每个元素，它获取值，验证值，如果有效则解析它并将该数据设置为父元素的值。否则它会添加＆＃34;无效＆＃34;类。不确定if（value）子句上的其他内容是应该做什么的，但我确实将它保留在那里以防你做了一些我不知道的事情。

另一种方法是按标签名称检查元素，并过滤出名称/ id值包含＆＃34; date＆＃34;但我认为这更直接。

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 = "";
    }

}

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

2 个答案: