有没有一种方法来简化功能，并一次检查所有的输入框，而不是一个一个的

Question

我有一个JavaScript函数验证日期的输入。日期输入必须是DD/MM/YYYY。我试图阻止用户输入DD/MM/YY。 当我在回发期间点击表单的提交按钮时，我正在调用该函数。我在表单标签中提交了一个返回的函数。我为每个日期输入框逐个检查，如果有错误，我将返回false。这只会逐一检查每个框。 但是，我希望立即检查所有日期输入框，并列出所有错误的输入框，而不是一个一个地列出，如果发现错误，我也希望停止回发，我该怎么做？请帮忙。

我在onsubmit和表单标签中放置函数。

<form class="form-horizontal" action="tmemply_det.asp" method="post" onsubmit="return validatedt();"> 

我有5个日期输入，这里是他们

<div class="form-group"> 
    <label class="col-sm-3 control-label">Date Join : </label> 
    <div id="div_dt_join" class="col-sm-5 col-lg-3"> 
     <div class="input-group"> 
     <input id="dt_join" name="dt_join" value="<%=dt_join%>" type="text" class="form-control" date-picker> 
     <div class="input-group-addon"> 
      <i class="fa fa-calendar"></i> 
     </div> 
     </div> 
     <span id="errdt_join" class="help-block"></span> 
    </div> 
</div> 

的一个JavaScript函数

function validatedt(){ 

    var input = document.getElementById("dt_join").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (pattern.test(input)==false){ 
     alert("Date Join format is incorrect, please key in DD/MM/YYYY"); 
     document.getElementById('div_dt_join').className += ' has-error' 
     document.getElementById("errdt_join").innerHTML = "Please key in DD/MM/YYYY" 
     return false; 
     } 

    var input = document.getElementById("dt_confirm").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (input.length!=0 && pattern.test(input)==false){ 
     alert("Date Confirm format is incorrect, please key in DD/MM/YYYY"); 
     document.getElementById('div_dt_confirm').className += ' has-error' 
     document.getElementById("errdt_confirm").innerHTML = "Please key in DD/MM/YYYY" 
     return false; 
     } 

    var input = document.getElementById("dt_resign").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (input.length!=0 && pattern.test(input)==false){ 
     alert("Date Resign format is incorrect, please key in DD/MM/YYYY"); 
     document.getElementById('div_dt_resign').className += ' has-error' 
     document.getElementById("errdt_resign").innerHTML = "Please key in DD/MM/YYYY" 
     return false; 
     } 

    var input = document.getElementById("dt_DOB").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (pattern.test(input)==false){ 
     alert("Date of Birth format is incorrect, please key in DD/MM/YYYY"); 
     document.getElementById('div_dt_DOB').className += ' has-error' 
     document.getElementById("errdt_DOB").innerHTML = "Please key in DD/MM/YYYY" 
     return false; 
     } 

    var input = document.getElementById("dt_WorkPEx").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (input.length!=0 && pattern.test(input)==false){ 
     alert("Work Permit Expiry Date format is incorrect, please key in DD/MM/YYYY"); 
     document.getElementById('div_dt_WorkPEx').className += ' has-error' 
     document.getElementById("errdt_WorkPEx").innerHTML = "Please key in DD/MM/YYYY" 
     return false; 
     }  
} 

Answer 1

循环是你的朋友。

function validatedt(){ 
    var success = true; 
    var inputData = ['Join', 'Confirm', 'Resign', 'of Birth', 'Work Permit Expiry']; 
    for (var i = 0; i < inputData.length; i++) { 
    var key = inputData[i].toLowerCase(); 
    var msg = "Date " + inputData[i]; 

    //Deal with edge cases where naming doesn't follow convention 
    if (inputData[i] === 'of Birth') { 
     key = 'DOB'; 
    } 
    else if (inputData[i] === 'Work Permit Expiry') { 
     key = 'WorkPEx'; 
     msg = inputData[i]; 
    } 

    var input = document.getElementById("dt_" + key).value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (pattern.test(input)==false){ 
     alert(msg + " format is incorrect, please key in DD/MM/YYYY"); 
     document.getElementById('div_dt_' + key).className += ' has-error' 
     document.getElementById("errdt_" + key).innerHTML = "Please key in DD/MM/YYYY" 
     success = false; 
    } 
    } 
    return success; 
} 

为了更新多个错误，我们不会马上返回错误。相反，我们存储一个值为true的变量“success”，所以如果一切正常，它将返回true。如果有任何错误，它会返回false，因为我们在检测到错误时更改变量。一旦我们完成了所有的检查，我们只会返回。