帶有CSS和javascript的HTML代碼停止驗證表單-有解無憂

我正在用 HTML 代碼中包含的一些 CSS 和 HTML 中也包含 javascript 驗證來詳細說明簡單的 HTML 表單。我無法識別任何錯誤，但由于某種原因，表單中的輸入資料無法驗證......任何想法代碼的問題可能是什么？我嘗試了不同的瀏覽器（Chrome、Edge），但還沒有成功。提前謝謝了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>

  <script>
    function checkField1() {

      var field = document.getElementById("Name").value;
      var regex = /^[a-zA-Z\s]*$/; //Only letters allowed

      if (regex.test(field))
        document.getElementById("message1").innerHTML = "Input accepted!";
      else document.getElementById("message1").innerHTML = "Please enter your name!";
    }

    function checkField2() {

      var field = document.getElementById("Address").value;
      var regex = /^[0-9a-zA-Z\s]*$/; //Only alphanumerical characters allowed 

      if (regex.test(field))
        document.getElementById("message2").innerHTML = "Input accepted!";
      else document.getElementById("message2").innerHTML = "Please enter your address!";
    }

    function checkField3() {

      var field = document.getElementById("Email").value;
      var regex = /^[a-zA-Z0-9.!#$%&'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:\.[a-zA-Z0-9-] )*$/; //Only correct email format allowed

      if (regex.test(field))
        document.getElementById("message3").innerHTML = "Input accepted!";
      else document.getElementById("message3").innerHTML = "Please enter valid email address!";
    }

    function checkField4() {

      var field = document.getElementById("Password").value;
      var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed

      if (regex.test(field))
        document.getElementById("message4").innerHTML = "Input accepted!";
      else document.getElementById("message4").innerHTML = "Please enter 8 character password!";
    }

    function checkField5() {

      var field = document.getElementById("RepeatPassword").value;
      var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed

      if (regex.test(field))
        document.getElementById("message5").innerHTML = "Input accepted!";
      else document.getElementById("message5").innerHTML = "Please enter 8 character password!";
    }

    function checkField6() {

      var field = document.getElementById("Telephone").value;
      var regex = /^[0-9]{10}$/; //Only 10 character phone number allowed

      if (regex.test(field))
        document.getElementById("message6").innerHTML = "Input accepted!";
      else document.getElementById("message6").innerHTML = "Please enter your mobile phone!";
    }

    function checkPassword() {

      var pw1 = document.getElementById("Password");
      var pw2 = document.getElementById("RepeatPassword"); //Password confirmation check

      if (pw1 != pw2)
        document.getElementById("messagePWD").innerHTML = "Passwords did not match";
    else document.getElementById("messagePWD").innerHTML = "Password created successfully";
    }
  </script>


  <style>
    /* This are inline styles applicable to registration form */
    
    body {
      background-color: antiquewhite;
    }
    
    div {
      box-sizing: border-box;
      width: 100%;
      border: 100px solid black;
      float: left;
      align-content: center;
      align-items: center;
    }
    
    form {
      margin: 0 auto;
      width: 600px;
    }
  </style>
</head>

<body>
  <! If you click the "Submit" button, the form-data will be sent to a page called "/submit.php" >
  <h1 style="text-align: center;">REGISTRATION FORM</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Harvard_University_logo.svg/2560px-Harvard_University_logo.svg.png" alt="Harward University Logo" width="500" height="100" margin:auto>
  <p style="text-align: center; ">Do you want to register for a new course? You can use this registration form to sign up for new study program. We will contact you as soon as possible with further information.</p>
  <br />
  <form name="RegForm" action="/submit.php" method="post">
    <p>Name: <input type="text" size="65" name="Name" id="Name" required onblur="checkField1();"><br>
      <span id="message1"></span></p>
    <br />
    <p>Address: <input type="text" size="65" name="Address" id="Address" required onblur="checkField2();"><br>
      <span id="message2"></span></p>
    <br />
    <p>E-mail Address: <input type="text" size="65" name="EMail" id="Email" required onblur="checkField3();"><br>
      <span id="message3"></span></p>
    <br />
    <p>Password: <input type="password" size="65" name="Password" id="Password" required onblur="checkField4();"><br>
      <span id="message4"></span></p>
    <br />
    <p>Repeat Password: <input type="password" size="65" name="RepeatPassword" id="RepeatPassword" required onfocus="checkField5();" onblur="checkPassword();"><br>
      <span id="message5"></span><br>
      <span id="messagePWD"></span>
    </p>
    <br />
    <p>Telephone: <input type="text" size="65" name="Telephone" id="Telephone" placeholder="090x xxx xxx" required onblur="checkField6();"><br>
      <span id="message6"></span></p>
    <br />

    <p>
      SELECT YOUR COURSE
      <select type="text" value="" name="Subject">
        <option>MBA</option>
        <option>LLM</option>
        <option>BA</option>
        <option>MSc</option>
        <option>PhD</option>
      </select>
    </p>
    <br />
    <br />
    <p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
    <p>
      <input type="submit" value="Submit" name="Submit" />
      <input type="reset" value="Reset" name="Reset" />
    </p>

    <br>
    <p>If you click the "Submit" button, the form-data will be sent to a page called "/submit.php".</p>
    </br>
  </form>

</body>

</html>

uj5u.com熱心網友回復：

檢查您的 js 腳本，您是否錯過了每個函式if中else條件的左括號和右括號以及條件的左括號。我認為您的錯誤將得到解決:)

隨意看看這個簡單的 js 中的 HTML 表單驗證。

function validateForm() {
  let nameField = document.forms["RegForm"]["name"].value;
  const nameRegex = /^[a-zA-Z\s] $/; //Only characters allowed

  if (nameField == "" || nameField == null) {
    alert("Name must be filled out!");
    return false;
  } else if (!nameRegex.test(nameField)) {
    alert("Only characters from a-Z");
    return false;
  } else {
    alert("Name accepted :)");
    return false;
    //return true; //whenever you want to submit the form
  }
}

<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Validation</h2>
  
  <form name="RegForm" action="/submit.php" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="name">
    <input type="submit" value="Submit">
  </form>

</body>
</html>

uj5u.com熱心網友回復：

function checkField1() {
  var field = document.getElementById("Name").value;
  var regex = /^[a-zA-Z\s] $/; //Only letters allowed
  if (field == "" || field == null) {
    document.getElementById("message1").innerHTML = "Please enter your name!";
  } else if (!regex.test(field)) {
    document.getElementById("message1").innerHTML = "Only characters from a-Z";
  } else {
    document.getElementById("message1").innerHTML = "Input accepted!";
  }
}

function checkField2() {
  var field = document.getElementById("Address").value;
  var regex = /^[0-9a-zA-Z\s] $/; //Only alphanumerical characters allowed
  if (field == "" || field == null) {
    document.getElementById("message2").innerHTML = "Please enter your address!";
  } else if (!regex.test(field)) {
    document.getElementById("message2").innerHTML = "Only characters and numbers are allowed!";
  } else {
    document.getElementById("message2").innerHTML = "Input accepted!";
  }
}

function checkField3() {
  var field = document.getElementById("Email").value;
  var regex = /^[a-zA-Z0-9.!#$%&'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:\.[a-zA-Z0-9-] )*$/; //Only correct email format allowed
  if (field == "" || field == null) {
    document.getElementById("message3").innerHTML = "Please enter an email address!";
  } else if (!regex.test(field)) {
    document.getElementById("message3").innerHTML = "Please enter a valid email address!";
  } else {
    document.getElementById("message3").innerHTML = "Input accepted!";
  }
}

function checkField4() {
  var field = document.getElementById("Password").value;
  var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed
  if (field == "" || field == null) {
    document.getElementById("message4").innerHTML = "Please choose a password!";
  } else if (!regex.test(field)) {
    document.getElementById("message4").innerHTML = "Please enter 8 character password!";
  } else {
    document.getElementById("message4").innerHTML = "Password accepted!";
  }
}

function checkField5() {
  var field = document.getElementById("RepeatPassword").value;
  var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed
  if (field == "" || field == null) {
    document.getElementById("message5").innerHTML = "Please repeat your password!";
  } else if (!regex.test(field)) {
    document.getElementById("message5").innerHTML = "Please enter 8 character password!";
  } else {
    document.getElementById("message5").innerHTML = "Password accepted!";
  }
}

function checkField6() {
  var field = document.getElementById("Telephone").value;
  var regex = /^[0-9]{10}$/; //Only 10 character phone number allowed
  if (field == "" || field == null) {
    document.getElementById("message6").innerHTML = "Please enter your mobile phone!";
  } else if (!regex.test(field)) {
    document.getElementById("message6").innerHTML = "Only 10 characters phone number allowed";
  } else {
    document.getElementById("message6").innerHTML = "Input accepted!";
  }
}

function checkPassword() {
  var pw1 = document.getElementById("Password");
  var pw2 = document.getElementById("RepeatPassword"); //Password confirmation check
  if (pw1 != pw2)
    document.getElementById("messagePWD").innerHTML = "Passwords did not match";
  else document.getElementById("messagePWD").innerHTML = "Password created successfully";
}

/* This are inline styles applicable to registration form */

body {
  background-color: antiquewhite;
}

div {
  box-sizing: border-box;
  width: 100%;
  border: 100px solid black;
  float: left;
  align-content: center;
  align-items: center;
}

form {
  margin: 0 auto;
  width: 600px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <! If you click the "Submit" button, the form-data will be sent to a page called "/submit.php">
  <h1 style="text-align: center;">REGISTRATION FORM</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Harvard_University_logo.svg/2560px-Harvard_University_logo.svg.png" alt="Harward University Logo" width="500" height="100" margin:auto>
  <p style="text-align: center; ">Do you want to register for a new course? You can use this registration form to sign up for new study program. We will contact you as soon as possible with further information.</p>
  <br />
  <form name="RegForm" action="/submit.php" method="post">
    <p>Name: <input type="text" size="65" name="Name" id="Name" required onblur="checkField1();"><br>
      <span id="message1"></span>
    </p>
    <br />
    <p>Address: <input type="text" size="65" name="Address" id="Address" required onblur="checkField2();"><br>
      <span id="message2"></span>
    </p>
    <br />
    <p>E-mail Address: <input type="text" size="65" name="EMail" id="Email" required onblur="checkField3();"><br>
      <span id="message3"></span>
    </p>
    <br />
    <p>Password: <input type="password" size="65" name="Password" id="Password" required onblur="checkField4();"><br>
      <span id="message4"></span>
    </p>
    <br />
    <p>Repeat Password: <input type="password" size="65" name="RepeatPassword" id="RepeatPassword" required onfocus="checkField5();" onblur="checkPassword();"><br>
      <span id="message5"></span><br>
      <span id="messagePWD"></span>
    </p>
    <br />
    <p>Telephone: <input type="text" size="65" name="Telephone" id="Telephone" placeholder="090x xxx xxx" required onblur="checkField6();"><br>
      <span id="message6"></span>
    </p>
    <br />

    <p>
      SELECT YOUR COURSE
      <select type="text" value="" name="Subject">
        <option>MBA</option>
        <option>LLM</option>
        <option>BA</option>
        <option>MSc</option>
        <option>PhD</option>
      </select>
    </p>
    <br />
    <br />
    <p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
    <p>
      <input type="submit" value="Submit" name="Submit" />
      <input type="reset" value="Reset" name="Reset" />
    </p>

    <br />
    <p>If you click the "Submit" button, the form-data will be sent to a page called "/submit.php".</p>
    <br />
  </form>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/376006.html

標籤：javascript html 形式验证

上一篇：PHPMYSQL表單多次提交

下一篇：Nginxingress找不到服務