Question

我刚开始学习HTML和JavaScript。我正在尝试为空字段验证HTML表单，并使用for循环将相应的错误消息打印为输出。

以下是jsp页面和javascript代码。

<script>
  var err = new Array();
var i = 0,
  flag = 0;

function validateForm() {
  var x = document.forms["RegistrationController"]["firstname"].value;
  if (x == null || x == "") {
    err[i++] = "First name cannot be empty";
    flag = 1;
  }
  var a = document.forms["RegistrationController"]["dob"].value;
  if (a == null || a == "") {
    err[i++] = "Date of birth cannot be empty";
    flag = 1;
  }
  var b = document.forms["RegistrationController"]["address_line_1"].value;
  if (b == null || b == "") {
    err[i++] = "Address cannot be empty";
    flag = 1;
  }
  var c = document.forms["RegistrationController"]["city"].value;
  if (c == null || c == "") {
    err[i++] = "city cannot be empty";
    flag = 1;
  }
  var d = document.forms["RegistrationController"]["pincode"].value;
  if (d == null || d == "") {
    err[i++] = "pincode cannot be empty";
    flag = 1;
  }
  var e = document.forms["RegistrationController"]["mobile_no"].value;
  if (e == null || e == "") {
    err[i++] = "mobile no cannot be empty";

    flag = 1;
  }
  var f = document.forms["RegistrationController"]["email"].value;
  if (f == null || f == "") {
    err[i++] = "email cannot be empty";
    flag = 1;
  }
  if (flag == 1) {
    var string = "";
    for (j = 0; j < err.length; j++) {
      document.getElementById("error").innerHTML = err[i];
      return false;
    }
  }

} </script>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

  <title>Registration</title>
</head>

<body>
  <div class="error" id="error"></div>
  <h1>Registration Form</h1>
  <div class="ex">
    <form name="RegistrationController" method="post" onsubmit="return validateForm()">
      <table style="with: 50%">
        <tr>
          <td>First name</td>
          <td>
            <input type="text" name="firstname" />
          </td>
        </tr>

        <tr>
          <td>Last name</td>
          <td>
            <input type="text" name="lastname" />
          </td>
        </tr>
        <tr>
          <td>Date of Birth</td>
          <td>
            <input type="text" name="dob" />
          </td>
        </tr>
        <tr>
          <td>Address Line 1</td>
          <td>
            <input type="text" name="address_line_1" />
          </td>
        </tr>
        <tr>
          <td>Address Line 2</td>
          <td>
            <input type="text" name="address_line_2" />
          </td>
        </tr>
        <tr>
          <td>state</td>
          <td>
            <input type="text" name="state" />
          </td>
        </tr>
        <tr>
          <td>city</td>
          <td>
            <input type="text" name="city" />
          </td>
        </tr>
        <tr>
          <td>pincode</td>
          <td>
            <input type="text" name="pincode" />
          </td>
        </tr>
        <tr>
          <td>Mobile no</td>
          <td>
            <input type="text" name="mobile_no" />
          </td>
        </tr>
        <tr>
          <td>email</td>
          <td>
            <input type="text" name="email" />
          </td>
        </tr>
        <tr>
          <td>gender</td>
          <td>
            <input type="radio" name="gender" />Male</td>
          <td>
            <input type="radio" name="gender" />Female</td>
        </tr>
      </table>
      <input type="submit" value="register" />
    </form>
  </div>

</body>

</html>

Answer 1

参考这个答案。我稍微修改了你的代码。

<script>标记在＆lt;

i

，但您在for循环中使用了j
我认为使用getElementById效率更高

<!DOCTYPE html>
<script>
function validateForm() {
  var err = new Array();
var i = 0;
 var flag = 0;
  var x = document.getElementById("firstname").value;

  if (x == null || x == "") {
    err[i++] = "First name cannot be empty";
    flag = 1;
  }
  var a = document.getElementById("dob").value;
  if (a == null || a == "") {
    err[i++] = "Date of birth cannot be empty";
    flag = 1;
  }
  var b = document.getElementById("address_line_1").value;
  if (b == null || b == "") {
    err[i++] = "Address cannot be empty";
    flag = 1;
  }
  var c = document.getElementById("city").value;
  if (c == null || c == "") {
    err[i++] = "city cannot be empty";
    flag = 1;
  }
  var d = document.getElementById("pincode").value;
  if (d == null || d == "") {
    err[i++] = "pincode cannot be empty";
    flag = 1;
  }
  var e = document.getElementById("mobile_no").value;
  if (e == null || e == "") {
    err[i++] = "mobile no cannot be empty";

    flag = 1;
  }
  var f = document.getElementById("email").value;
  if (f == null || f == "") {
    err[i++] = "email cannot be empty";
    flag = 1;
  }
  if (flag == 1) {
    var string = "";
    for (j = 0; j < err.length; j++) {
      document.getElementById("error").innerHTML = err[j];
      return false;
    }
  }

} </script>


<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

  <title>Registration</title>
</head>

<body>
  <div class="error"id="error"></div>
  <h1>Registration Form</h1>
  <div class="ex">
    <form>
      <table style="with: 50%">
        <tr>
          <td>First name</td>
          <td>
            <input type="text" id="firstname" />
          </td>
        </tr>

        <tr>
          <td>Last name</td>
          <td>
            <input type="text" id="lastname" />
          </td>
        </tr>
        <tr>
          <td>Date of Birth</td>
          <td>
            <input type="text" id="dob" />
          </td>
        </tr>
        <tr>
          <td>Address Line 1</td>
          <td>
            <input type="text" id="address_line_1" />
          </td>
        </tr>
        <tr>
          <td>Address Line 2</td>
          <td>
            <input type="text" id="address_line_2" />
          </td>
        </tr>
        <tr>
          <td>state</td>
          <td>
            <input type="text" id="state" />
          </td>
        </tr>
        <tr>
          <td>city</td>
          <td>
            <input type="text" id="city" />
          </td>
        </tr>
        <tr>
          <td>pincode</td>
          <td>
            <input type="text" id="pincode" />
          </td>
        </tr>
        <tr>
          <td>Mobile no</td>
          <td>
            <input type="text" id="mobile_no" />
          </td>
        </tr>
        <tr>
          <td>email</td>
          <td>
            <input type="text" id="email" />
          </td>
        </tr>
        <tr>
          <td>gender</td>
          <td>
            <input type="radio" id="gender" />Male</td>
          <td>
            <input type="radio" id="gender" />Female</td>
        </tr>
      </table>
      <input type="button" value="register" onclick="validateForm();" />
    </form>
  </div>

</body>

</html>

Answer 2

您正在使用变量j并使用i进行迭代。

   document.getElementById("error").innerHTML = err[i];

改为使用：

   document.getElementById("error").innerHTML = err[j];

正如Rayon所建议的那样，而不是重写值：

   document.getElementById("error").innerHTML += err[j];

无法使用JavaScript使用for循环打印验证错误

2 个答案: