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

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

  •  0
  • 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 年前
        1
  •  0
  •   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,因为我们在检测到错误时更改了变量。我们只在检查完所有东西后才回来。