代码之家 › 专栏 › 技术社区 › Hanz Cheah

有没有办法简化函数,一次而不是逐个检查所有输入框

asp-classic date javascript

Hanz Cheah · 技术社区 · 7 年前

然而,我希望一次检查所有的日期输入框,列出所有错误的,而不是一个接一个,我还希望停止回发如果有一个错误发现,我如何才能做到这一点?请帮忙。

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

1 回复 | 直到 7 年前

OwChallie 7 年前

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

为了更新多个错误,我们不会立即返回false。相反,我们存储了一个值为true的变量“success”,因此如果一切正常,它将返回true。如果有任何错误,它将返回false,因为我们在检测到错误时更改了变量。我们只在检查完所有东西后才回来。