Question

我在这里创建表单验证。我想问一下表单验证是如何工作的。我在这里的脚本似乎没有返回任何内容，因为JS控制台上给出的错误是ValidateForm()函数未定义。

HTML：

    <form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
  <tr>
    <td class="newusertd">Name:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="name" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Contact Number:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="phone" placeholder="98989898" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Email:<span class="price">*<br></span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="email" placeholder="xxx@hello.com" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Address:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="address" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Password:<span class="price">*</span>
      <br>(8-16 Characters with
      <br>one UPPERCASE & numbers)</td>
    <td class="newusertd">
      <input style="color: black;" type="password" name="password" class="Btn">
  </tr>
  <tr>
    <td class="newusertd"></td>
    <td class="newusertd">
      <input style="color: black;" type="submit" value="Create Account" class="Btn" />
    </td>
  </tr>
</form>

JS：

 function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var phone = document.forms["myForm"]["phone"].value;
  var email = document.forms["myForm"]["email"].value;
  var add = document.forms["myForm"]["address"].value;
  var passwd = document.forms["myForm"]["password"].value;
  var matchesCount = email.split("@").length - 1;
  var matchesCount2 = email.split(".").length - 1;
  var error = "";
  if (!name || !phone || !email || !add || !passwd) {
    error += "All must be filled out \n"

    if (phone.search(/^[0-9]*$/) == -1 || phone.length != 8) {
      error += "- Phone number can only contain digits \n";
    }

    if (passwd.search(/^[0-9a-zA-Z]*$/) == -1) {
      error += "- Password needs to be alphanumeric \n";
    }

    if (passwd.length < 8 || passwd.length > 16) {
      error += "- Password contain only 8-16 digits \n";
    }

    if (matchesCount > 1 || matchesCount2 < 1) {
      error += "- Please enter a valid email \n";
    }
    alert(error);
    return false;
  }
}

https://jsfiddle.net/KodeError404/wpwv614c/

如果你看不到JSFiddle，请通知我。

在脚本中，我正在检查是否所有字段都已填满，如果未填写，则应返回false。如果这是严格遵守JS而不是JQuery，我将不胜感激。

编辑：此问题是密码似乎无法检查我是否输入任何内容或其字母数字是否为大写。我想知道为什么要检查所有字段，而不是我的密码字段

Answer 1

我意识到我可以打破密码的正则表达式来单独检查条件。

function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var phone = document.forms["myForm"]["phone"].value;
  var email = document.forms["myForm"]["email"].value;
  var add = document.forms["myForm"]["address"].value;
  var passwd = document.forms["myForm"]["password"].value;
  var matchesCount = email.split("@").length - 1;
  var matchesCount2 = email.split(".").length - 1;
  var error = "";
  if (name == '' || phone == '' || email == '' || add == '' || passwd == '') {
    error += "All must be filled out \n"
  } else {
    if (phone.search(/^[0-9]*$/) == -1 || phone.length != 8) {
      error += "- Phone number can only contain digits \n";
    }
    if (passwd.search(/[A-Z]/) == -1) {
      error += "- Password needs to be have one UPPERCASE\n";
    }

    if (passwd.search(/[a-z]/) == -1) {
      error += "- Password needs to be have letters\n";
    }

    if (passwd.search(/[0-9]/) == -1) {
      error += "- Password needs to be have numbers\n";
    }

    if (passwd.length < 8 || passwd.length > 16) {
      error += "- Password contain only 8-16 digits \n";
    }

    if (matchesCount > 1 || matchesCount2 < 1) {
      error += "- Please enter a valid email \n";
    }
  }
  alert(error);
  return false;
}

<form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
  <table>

    <tr>
      <td class="newusertd">Name:<span class="price">*</span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="name" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Contact Number:<span class="price">*</span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="phone" placeholder="98989898" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Email:<span class="price">*<br></span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="email" placeholder="xxx@hello.com" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Address:<span class="price">*</span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="address" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Password:<span class="price">*</span>
        <br>(8-16 Characters with
        <br>one UPPERCASE & numbers)</td>
      <td class="newusertd">
        <input style="color: black;" type="password" name="password" class="Btn">
    </tr>
    <tr>
      <td class="newusertd"></td>
      <td class="newusertd">
        <input style="color: black;" type="submit" value="Create Account" class="Btn" />
      </td>
    </tr>

  </table>
</form>

如何确保调用和运行我的函数

1 个答案: