javascript - 通过javascript验证表单

Question

我在使用 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;
      }

    }
}

标签： javascriptphphtml

Answer 1

现在我明白了，所以我在每个 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;
}