如何确保我的函数被调用并正在运行

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(/[AZ]/) == -1) { error += "- Password needs to be have one UPPERCASE\\n"; } if (passwd.search(/[az]/) == -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>