带有 CSS 和 javascript 的 HTML 代码停止验证表单答案

【问题标题】：HTML code with CSS and javascript stopped validating form带有 CSS 和 javascript 的 HTML 代码停止验证表单
【发布时间】：2022-01-07 21:31:43
【问题描述】：

我正在使用 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>

【问题讨论】：

var regex = /^[a-zA-Z\s]*$/; //Only letters allowed - 量词 * 表示零或更多，因此该表达式也允许 empty 值。请改用+，要求至少需要其中一个字符。（例如，它仍然允许仅使用单个空格字符填充字段。如果您不希望这样 - 那么您不能只使用也允许空格的单个字符类。）
非常感谢您的建议！欣赏它！ :-)

标签： javascript html forms validation

【解决方案1】：

检查您的 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>

【讨论】：

即使我添加了 if 条件的左括号和右括号以及 else 条件的左括号，它看起来也不起作用:-(我不知道这是否是因为您的表单验证使用了警报和我的innerHTML + span 元素。您是否尝试使用您建议的更改运行我的代码？无论如何，我想我会根据您的模板修改我的代码 :-) 谢谢！
是的，我尝试了您的代码并应用了一些更改，现在它在我的本地机器上运行良好。您可以在下面找到更新后的代码：)
非常感谢！现在它确实在正常工作:-)
恭喜你完成了：)

【解决方案2】：

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>

【讨论】：