通过JavaScript验证表单

Question

im仍然是使用javascript验证表单的新方法，因此我的表单具有数据库中默认值的默认值。我的问题是，当我尝试在street和barangay文本字段中输入无效输入时，通过javascript进行的验证有效，但涉及到下一个文本字段，例如在城市文本字段中，验证无效。

<form method="POST" action="#" onsubmit="return validateEmployeeAdd()">
    <center><br><br>
    <!-- <h1 style='color:blue'>EDIT EMPLOYEE</h1> -->
    <img src='images/2.png' width="100" height="100">
    <input type='hidden' name='add_id' value="<?php echo $data['add_id']?>"><br><br>
    <div>      
      <strong>Street:</strong>
      <input type='text' name='street' value="<?php echo $data['street']?>" id="street_id" autocomplete="off"><br>
      <span id="street_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>Barangay:</strong>
      <input type='text' name='brgy' value="<?php echo $data['brgy']?>" id="brgy_id" autocomplete="off"><br>
      <span id="brgy_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>City:</strong>
      <input type='text' name='city' value="<?php echo $data['city']?>" id="city_id" autocomplete="off"><br>
      <span id="city_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>Province:</strong>
      <input type='text' name='province' value="<?php echo $data['province']?>" id="province_id" autocomplete="off"><br>
      <span id="province_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>Zip Code:</strong>
      <input type='text' name='zip' value="<?php echo $data['zip_code']?>" id="zip_id" autocomplete="off"><br>
      <span id="zip_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>
        <input type='submit' value='Submit' name="submit" class='btn btn-primary'>
    </div>
    </center>
 </form>

这是我的脚本，我不知道我搞砸了哪一部分，顺便说一句，在表格结尾后我放脚本的方式请帮帮我

<script type="text/javascript" >

 function validateEmployeeAdd(){

 var street = document.getElementById('street_id').value;
 var brgy = document.getElementById('brgy_id').value;
 var city = document.getElementById('city_id').value;
 var province = document.getElementById('province_id').value;
 var zip = document.getElementById('zip_id').value;

  //Street validation
    if (street == "") {

        document.getElementById('street_error').innerHTML = "** Street address is requiered";
        document.getElementById('street_id').style.borderColor= "red";
        document.getElementById('street_id').style.borderStyle= "solid";
        return false;

    } else {

      if (street.trim().length==0) {
        document.getElementById('street_error').innerHTML = "** Street address should not consist of spaces only";
        document.getElementById('street_id').style.borderColor= "red";
        document.getElementById('street_id').style.borderStyle= "solid";
        return false;
      }
      if (street.length <= 3) {
        document.getElementById('street_error').innerHTML = "** Street address too short";
        document.getElementById('street_id').style.borderColor= "red";
        document.getElementById('street_id').style.borderStyle= "solid";
        return false;
      }

    }

//barangay validation
    if (brgy == "") {

      document.getElementById('brgy_error').innerHTML = "** Barangay address is requiered ";
      document.getElementById('brgy_id').style.borderColor= "red";
      document.getElementById('brgy_id').style.borderStyle= "solid";
      return false;

    } else {

      if (brgy.trim().length==0) {
        document.getElementById('brgy_error').innerHTML = "** Barangay address should not consist of spaces only";
        document.getElementById('brgy_id').style.borderColor= "red";
        document.getElementById('brgy_id').style.borderStyle= "solid";
        return false;
      }
      if (brgy.length <= 3) {
        document.getElementById('brgy_error').innerHTML = "** Barangay address too short";
        document.getElementById('brgy_id').style.borderColor= "red";
        document.getElementById('brgy_id').style.borderStyle= "solid";
        return false;
      }

      if (/^[a-zA-Z.- ]*$/.test(brgy) == false) {
        document.getElementById('brgy_error').innerHTML = "** Invalid special characters";
        document.getElementById('brgy_id').style.borderColor= "red";
        document.getElementById('brgy_id').style.borderStyle= "solid";
        return false;
      }


    }

  //City validation
    if (city == "") {

      document.getElementById('city_error').innerHTML = "** City address is requiered";
      document.getElementById('city_id').style.borderColor= "red";
      document.getElementById('city_id').style.borderStyle= "solid";
      return false;

    } else {

      if (city.trim().length==0) {
        document.getElementById('city_error').innerHTML = "** City address should not consist of spaces only";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }
      if (city.length <= 3) {
        document.getElementById('city_error').innerHTML = "** City address too short";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }
      if (/^[a-zA-Z ]*$/.test(city) == false) {
        document.getElementById('city_error').innerHTML = "** City address should consist of letters only";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }

    }

  //Province validation'
    if (province == "") {

      document.getElementById('province_error').innerHTML = "** Province address is requiered";
      document.getElementById('province_id').style.borderColor= "red";
      document.getElementById('province_id').style.borderStyle= "solid";
      return false;

    } else {

      if (province.trim().length==0) {
        document.getElementById('province_error').innerHTML = "** Province address should not consist of spaces only";
        document.getElementById('province_id').style.borderColor= "red";
        document.getElementById('province_id').style.borderStyle= "solid";
        return false;
      }
      if (province.length <= 3) {
        document.getElementById('province_error').innerHTML = "** Province address too short";
        document.getElementById('province_id').style.borderColor= "red";
        document.getElementById('province_id').style.borderStyle= "solid";
        return false;
      }
      if (/^[a-zA-Z ]*$/.test(city) == false) {
        document.getElementById('city_error').innerHTML = "** Province address should consist of letters only";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }

    }   

  //Username validation
    if (zip == "") {

      document.getElementById('zip_error').innerHTML = "** Zip Code is requiered";
      document.getElementById('zip_id').style.borderColor= "red";
      document.getElementById('zip_id').style.borderStyle= "solid";
      return false;

    } else {
      if (zip.trim().length==0) {
        document.getElementById('zip_error').innerHTML = "** Zip Code should not consist of spaces only";
        document.getElementById('zip_id').style.borderColor= "red";
        document.getElementById('zip_id').style.borderStyle= "solid";
        return false;
      }
      if (isNaN(zip)) {
        document.getElementById('zip_error').innerHTML = "** Zip Code should be a numeric character only";
        document.getElementById('zip_id').style.borderColor= "red";
        document.getElementById('zip_id').style.borderStyle= "solid";
        return false;
      }
      if (zip.length == 4) {
        document.getElementById('zip_error').innerHTML = "** Zip Code should be 4 numbers only";
        document.getElementById('zip_id').style.borderColor= "red";
        document.getElementById('zip_id').style.borderStyle= "solid";
        return false;
      }

    }
}

Answer 1

每次验证后，您实际上都会停止运行该功能。您对返回该函数的期望如何？

以下是您正在做的事情的展示：
您认为会发生什么？

先输入“是”，然后输入“哦，是”还是“是”？

const myFunc = (arg1, arg2) => {

    if(arg1) {
        return 'yes';
    }

    if(arg2) {
        return 'oh, yesss';
    }
}

console.log(myFunc(true, true));

在上面的示例中，当我第一次在第一个if块中返回该函数时，该函数将停止。
因此，以上代码将记录为“是”。

即使条件为true，它也不会继续执行下一个if条件，因为您正在返回该函数。

Answer 2

现在我明白了，所以我在每个if语句中所做的一切都得到了所有返回值，例如，用var i进行了更改。

if (street == "") {
    document.getElementById('street_error').innerHTML = "** Street address is requiered";
    document.getElementById('street_id').style.borderColor= "red";
    document.getElementById('street_id').style.borderStyle= "solid";
    var i = false;
} 
if (zip.trim().length==0) {
    document.getElementById('zip_error').innerHTML = "** Zip Code should not consist of spaces only";
    document.getElementById('zip_id').style.borderColor= "red";
    document.getElementById('zip_id').style.borderStyle= "solid";
    var i = false;
}
if (isNaN(zip)) {
    document.getElementById('zip_error').innerHTML = "** Zip Code should be a numeric character only";
    document.getElementById('zip_id').style.borderColor= "red";
    document.getElementById('zip_id').style.borderStyle= "solid";
    var i = false;
}
if (zip.length == 4) {
    document.getElementById('zip_error').innerHTML = "** Zip Code should be 4 numbers only";
    document.getElementById('zip_id').style.borderColor= "red";
    document.getElementById('zip_id').style.borderStyle= "solid";
    var i = false;
}

我在var i中放置了一个假值，然后检查所有if语句的最后部分是否为假

if (i == false) {
   return false;
}