JS函数似乎不能被HTML表单执行，不知道为什么

我现在有一段时间没有使用JS或HTML，并且需要创建一个提交数据到数据库的单独页面。此代码仅用于验证表单（客户端）。看起来，JS函数没有被执行，我知道我忘记了什么地方，但我无法弄清楚什么，有没有人有任何想法？JS函数似乎不能被HTML表单执行，不知道为什么

<html> 
<head> 
    <script type="text/javascript"> 
     function validateSignup() { 
      var redFeild = ""; 
      var greenField = ""; 

      function colourRed(redFeild) { 
       document.getElementById(redFeild).style.color="ff0000"; 
      } 

      function colourGreen(greenField) { 
       document.getElementById(greenField).style.color="08BB3E"; 
      } 

      var firstV = false; 
      var userfirst = document.getElementById("userFirst").value; 

      switch (userfirst, firstV) { 
       case (userfirst == ""): 
        redFeild = document.getElementById("first"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("nameError"); 
        colourRed(redFeild); 
        break; 
       case (userfirst.match(/^[a-zA-Z]+$/) == false): 
        redFeild = document.getElementById("first"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("nameError"); 
        colourRed(redFeild); 
        break; 
       default: 
        firstV = true; 
        greenField = document.getElementById("first"); 
        colourGreen(greenField); 
        greenField = document.getElementById("nameError"); 
        colourGreen(greenField); 
        break; 
      } 

      var lastV = false; 
      var userlast = document.getElementById("userLast").value; 

      switch (userlast, lastV) { 
       case (userlast == ""): 
        redFeild = document.getElementById("last"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("nameError"); 
        colourRed(redFeild); 
        break; 
       case (userlast.match(/^[a-zA-Z]+$/) == false): 
        redFeild = document.getElementById("last"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("nameError"); 
        colourRed(redFeild); 
        break; 
       default: 
        lastV = true; 
        greenField = document.getElementById("last"); 
        colourGreen(greenField); 
        greenField = document.getElementById("nameError"); 
        colourGreen(greenField); 
        break; 
      } 

      var emailV = false; 
      var useremail = document.getElementById("userEmail").value; 

      switch (useremail, emailV) { 
       case (useremail == ""): 
        redFeild = document.getElementById("email"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("emailError"); 
        colourRed(redFeild); 
        break; 
       case (useremail.match(/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/) == false): 
        redFeild = document.getElementById("email"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("emailError"); 
        colourRed(redFeild); 
        break; 
       default: 
        emailV = true; 
        greenField = document.getElementById("email"); 
        colourGreen(greenField); 
        greenField = document.getElementById("emailError"); 
        colourGreen(greenField); 
        break; 
      } 

      var usernameV = false; 
      var username = document.getElementById("usrname").value; 

      switch (username, usernameV) { 
       case (username == ""): 
        redFeild = document.getElementById("user"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("usernameError"); 
        colourRed(redFeild); 
        break; 
       case (username.match(/^[a-zA-Z0-9]+$/) == false): 
        redFeild = document.getElementById("user"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("usernameError"); 
        colourRed(redFeild); 
        break; 
       default: 
        usernameV = true; 
        greenField = document.getElementById("user"); 
        colourGreen(greenField); 
        greenField = document.getElementById("usernameError"); 
        colourGreen(greenField); 
        break; 
      } 

      var passwordV = false; 
      var userpsswd = document.getElementById("userPassword").value; 
      var userpsswdC = document.getElementById("userPasswordConfirm").value; 

      switch (userpsswd, userpsswdC, passwordV) { 
       case (userpsswd || userpsswdC == ""): 
        redFeild = document.getElementById("pass"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("passC"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("passwordCError"); 
        colourRed(redFeild); 
        break; 
       case (userpsswd.match(/^.*(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*\d).*$/) == false): 
        redFeild = document.getElementById("pass"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("passC"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("passwordError"); 
        colourRed(redFeild); 
        break; 
       case (userpsswd != userpsswdC): 
        redFeild = document.getElementById("pass"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("passC"); 
        colourRed(redFeild); 
        redFeild = document.getElementById("passwordError"); 
        colourRed(redFeild); 
        break; 
       default: 
        passwordV = true; 
        greenField = document.getElementById("pass"); 
        colourGreen(greenField); 
        greenField = document.getElementById("passC"); 
        colourGreen(greenField); 
        greenField = document.getElementById("passwordError"); 
        colourGreen(greenField); 
        break; 
      } 

      if (firstV && lastV && emailV && usernameV && passwordV == true) { 
       return true; 
      } else { 
       return false; 
      } 
     } 

     var signup = document.getElementById("signup"); 

     return validateSignup(signup); 
    </script> 
</head> 
<body> 
    <div align="center">  
     <form id="signup" name="signup" onsubmit="return validateSignup(this.form)" method="get" action="users.php"> 
      <h1>Sign Up</h1> 
      <label id="first">First Name</label> 
      <input type="text" id="userFirst"> 
      <br>  
      <br> <label id="last">Last Name</label> 
      <input type="text" id="userLast"> 
      <br> <label id="nameError">First name and last name are required and must contain only upper and lower case letters</label> 
      <br>  
      <br> <label id="email">Email</label> 
      <input type="email" id="userEmail"> 
      <br> <label id="emailError">Email is required and must be valid</label> 
      <br>  
      <br> <label id="user">Username</label> 
      <input type="text" id="usrname"> 
      <br> <label id="usernameError">Username is required and must only contain alphanumeric values</label> 
      <br>  
      <br> <label id="pass">Password</label> 
      <input type="password" id="userPassword"> 
      <br> <label id="passwordError">Password is required and must contain at least one uppercase letter, one lowercase letter, and one number</label> 
      <br>  
      <br> <label id="passC">Confirm Password</label> 
      <input type="password" id="userPasswordConfirm"> 
      <br> <label id="passwordCError">Password and confirmed password must be the same</label> 
      <br>  
      <br> <input type="submit" text="Sign Up"> 
     </form> 
    </div> 
</body>

来源

2016-12-02 Epic Swifty

onsubmit="return validateSignup(this.form)"

应be¹

onsubmit="return validateSignup(this)"

在form元件上的onxyz -attribute风格事件处理程序this是形式;它没有form属性。（这是真实的一般：在onxyz -attribute代码，this是该属性附加到元素。）

¹考虑使用现代事件处理代替，例如addEventListener。

来源

2016-12-02 17:32:46

做完这个功能后，仍然没有执行，表单直接重定向到users.php。 –

@EpicSwifty：你必须在调试器中逐步完成它。它内的某处出错了，但这至少会确保它被*称为*。 –

我得到这个错误：signup.html：9 Uncaught TypeError：无法读取null（...）的属性'style' –

JS函数似乎不能被HTML表单执行，不知道为什么

回答

相关问题