有没有办法简化功能并一次检查所有输入框而不是一个一个检查

Question

我有一个 javascript 函数来验证日期的输入。输入的日期必须是 DD/MM/YYYY。我试图阻止用户输入 DD/MM/YY。当我在 post-back 期间单击表单的提交按钮时，我正在调用该函数。我在表单标签中放置了带有 return 的 onsubmit 函数。我对每个日期输入框都一一检查，如果有错误，我会return false。这只会一一检查每个框。但是，我希望一次检查所有日期输入框，并列出所有错误的而不是一个一个地列出，我也希望在发现错误时停止post返回，我该如何做到这一点？请帮忙。

我把函数放在 onsubmit 和 form 标签中。

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

为了更新多个错误，我们不直接return假。相反，我们存储一个值为 true 的变量 "success"，因此如果一切正常，它将 return 为真。如果有任何错误，它将 return false，因为我们在检测到错误时更改变量。一旦我们检查完所有内容，我们只会 return。

有没有办法简化功能并一次检查所有输入框而不是一个一个检查

Is there a way to simplify the functions and check all the input box at once and not one by one

javascript

date

asp-classic