Question

我需要完成一个作业，该作业显示基本的Javascript表单处理。目的是要有一个“ details.html”页面，该页面检查所有输入字段是否有效（例如，名称均为文本）。我试图完成两个文档，但是它们似乎没有正确链接：

什么都没有触发“ validateForm（）”函数，并且任何输入仅在提交时通过，我做错了什么？

function validateForm() {
  var firstname = document.getElementById("fName").value;
  var lastname = document.getElementById("lName").value;
  var email = document.getElementById("email").value;
  var address = document.getElementById("address").value;
  var postCode = document.getElementById("pCode").value;
  var accepted = document.getElementById("accept").checked;

  var allLetters = /^[a-zA-z]+$/i;
  var allNumbers = /^[0-9]+$/;
  var validEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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,}))$/;
  var validAddress = new RegExp(allNumbers.source + "|" + allLetters.source);


  if (address.match(validAddress) && firstname.match(allLetters) && lastname.match(allLetters) && email.match(validEmail) && address != "" && postCode.match(allNumbers) && accepted) {
    return true;
  } else {
    window.alert("Error! Invalid input in form. Please try again.");
    return false;
  }
}

.header {
  background-color: tomato;
  color: white;
  padding: 2px;
}

.focusPage {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgrey;
  min-height: 600px;
  height: 600px;
  height: auto !important;
}

.userDetails {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  border: 2px solid black;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
}

.inputs {
  float: right;
  direction: ltr;
  margin-right: 5px;
}

.acceptTerms {
  font-size: 15px;
  font-family: "Times New Roman", Times, serif;
}

p {
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.thePage {
  background-color: black;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="someName" content="someContent">
  <title> Home </title>
  <script type="text/javascript" src="myScripts.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body class="thePage">
  <div>
    <div class="focusPage">
      <div class="header">
        <h1>Welcome user!</h1>
      </div>
      <p>This form will allow you to enter your personal details for storage in our database.</p>
      <p>Be sure to read our <a href="agreement.html">User Agreement</a> before submitting your details</p>

      <ul class="userDetails">
        <form class="userForm" onsubmit="validateForm()" method="post">
          <li><label for="inputNames" required>First Name - </label>
            <label for="inputs"><input type="text" class="inputs" id="fname" name="fname"></label></li>

          <li><label for="inputNames">Last Name - </label>
            <label for="inputs" required><input type="text" class="inputs" id="lname" name="lname"></li>

            <li><label for="inputNames">Email - </label>
            <label for="inputs" required><input type="email" class="inputs" id="email" name="email"></li>

            <li><label for="inputNames">Address number - </label>
            <label for="inputs" required><input type="text" class="inputs" id="address" name="address"></li>

            <li><label for="inputNames">Post code - </label>
            <label for="inputs" required><input type="text" class="inputs" id="pCode" name="pCode"></li>

            <li><label for="inputNames">Additional Detail - </label></li>
          <textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea>

          <div class="agreement">
            <input type="checkbox"> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
          </div>
          <input type="submit" value="Submit">
        </form>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

JS：，您提到了错误 ID，请记住它们是区分大小写。

var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;

HTML：：您在标签标记中提到了必需，该标记无效，将其添加到输入标记中。

   <form class="userForm" onsubmit="validateForm()">
        <li><label for="inputNames" >First Name - </label>
        <label for="inputs"><input type="text" class="inputs" id="fname" name="fname" required></label></li>

        <li><label for="inputNames">Last Name - </label>
        <label for="inputs" ><input type="text" class="inputs" id="lname" name="lname" required></li>

        <li><label for="inputNames">Email - </label>
        <label for="inputs" ><input type="email" class="inputs" id="email" name="email" required></li>

        <li><label for="inputNames">Address number - </label>
        <label for="inputs" ><input type="text" class="inputs" id="address" name="address" required></li>

        <li><label for="inputNames">Post code - </label>
        <label for="inputs" ><input type="text" class="inputs" id="pCode" name="pCode" required></li>

        <li><label for="inputNames">Additional Detail - </label></li>
        <textarea rows="5" cols="50"  class="textfield" placeholder="Add detail here..."></textarea>

        <div class="agreement">
        <input type="checkbox" required> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
        </div>
        <input type="submit" value="Submit">
    </form>

Javascript验证表单不适用于HTML

1 个答案: