关于submition overvalidating

Question

我目前陷入了为我创建的Form开发一个有效的JavaScript验证问题。它的问题在于，当我第一次提交它时，第一个名字输入它然后发现其余的没有填写所需的内容并且发出错误需要填写的内容。但是，当我然后发送表格时，它然后添加错误消息相同的错误消息在结束，依此类推。 此外，当我尝试输入姓氏时，它不会验证其余的以检查它们是否填写正确。

按下提交按钮时出现的错误消息是（错误：无法执行INSERT INTO comeandtry（Fname，Lname，Email，Gender，Phone，Day，Month，Year，Street，Subburb，Zip，QrCode） ）价值观（＆＃39; a＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃ 39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39 ;，＆＃39; 895971bd039060f94fa526e395b0c86a＆＃39;）。错误的整数值：＆＃39;＆＃39;对于列＆＃39;电话＆＃39;在第1行）这不应该发生，因为First中只有一个值名称和其余部分不应通过验证：/

＆＃13;

＆＃13;

var errorStr = "" //initialize the errorStr
var trueOrFalse = true

function validate() {
  //initialises all of the variables which are going to be used
  //alert("hello")

  var character = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz"
  var temp2
  var difnumbers = "0123456789"
  var temp3

  x = document.registration

  validateFname(x);
  //alert("a")
  validateLname(x);
  //alert("c")
  validateEmail(x);
  //alert("d")
  validateGender(x);
  //alert("e")
  validatePhone(x);
  //alert("f")
  //validateDOB(x);
  //alert("g")
  validateStreet(x);
  //alert("h")
  validateSubburb(x);
  //alert("i")
  validateZipCode(x);
  //alert("j")
  validateCheckBox(x);

  //this will display all of the error messages at the same time.
  if (!trueOrFalse) {
    alert(errorStr);
  }
  //alert("end")

  return trueOrFalse
}

function validateFname(x) {
  //Vallidation for the Firstname
  if (x.Fname.value == "") {
    {
      errorStr = errorStr + "It seems like you havn't entered you're First Name. Please have another look.\n\n"
      trueOrFalse = false
    }
    for (var i = 0; i < x.Fname.value.length; i++) {
      temp2 = x.Fname.value.substring(i, i + 1)
      if (character.indexOf(temp2) == -1) {
        errorStr = errorStr + "It looks like you have entered a non Alphabetical character into you're First Name.\n\n"
        trueOrFalse = false
      }
    }
  }
}

function validateLname(x) {
  if (x.Lname.value == "") {
    errorStr = errorStr + "It seems like you havn't entered you're Last Name. Please have another look.\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Lname.value.length; i++) {
    temp2 = x.Lname.value.substring(i, i + 1)
    if (character.indexOf(temp2) == -1) {
      errorStr = errorStr + "It looks like you have entered a non Alphabetical character into you're Last Name.\n\n"
      trueOrFalse = false
    }
  }
}

function validateEmail(x) {
  var test = x.Email.value.indexOf("@")
  //if didn't find @
  if (test == -1) {
    errorStr = errorStr + "Please enter a valid E-Mail.\n\n"
    trueOrFalse = false
  }
  //if @ is the first character
  if (test == 0) {
    errorStr = errorStr + "The E-Mail you have Entered is not valid. The '@' can't be the first Character.\n\n"
    trueOrFalse = false
  }
  //if @ is the last character
  if (test == (x.Email.value.length - 1)) {
    errorStr = errorStr + "The E-Mail you have Entered is not valid. The '@' can't be the last Character.\n\n"
    trueOrFalse = false
  }
}

function validateGender(x) {
  if (!x.Gender[0].checked && !x.Gender[1].checked) {
    errorStr = errorStr + "Please select a gender\n\n"

    trueOrFalse = false
  }
}

function validatePhone(x) {
  //validation for the mobile number
  if (x.Phone.value == "") {
    errorStr = errorStr + "You haven't inputted a phone number (e.g. 0420 111 111.)\n\n"
    trueOrFalse = false
  }
  if (x.Phone.value.length != 10) {
    errorStr = errorStr + "please input a valid number length(10 Digits).\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Phone.value.length; i++) {
    temp3 = x.Phone.value.substring(i, i + 1)
    if (difnumbers.indexOf(temp3) == -1) {
      errorStr = errorStr + "Sorry, you have entered non valid Phone number. Please enter only numbers.\n\n"
      trueOrFalse = false
    }
  }
}

function validateStreet(x) {
  //this validates the city
  if (x.Street.value == "") {
    errorStr = errorStr + "You haven't entered your Street, please enter your Street.\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Street.value.length; i++) {
    temp2 = x.Street.value.substring(i, i + 1)
    if (character.indexOf(temp2) == -1) {
      errorStr = errorStr + "Sorry, you have entered a number. Your Street cannot contain a number. Please re-enter .\n\n"
      trueOrFalse = false
    }
  }
}

function validateSubburb(x) {
  //this part checks the street upon its entered values
  if (x.Subburb.value == "") {
    errorStr = errorStr + "You haven't entered your Street name, please enter your Subburb.\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Subburb.value.length; i++) {
    temp2 = x.Subburb.value.substring(i, i + 1)
    if (character.indexOf(temp2) == -1) {
      errorStr = errorStr + "Sorry, you have entered a number. Your Street name cannot contain a number. Please re-enter your Subburb.\n\n"
      trueOrFalse = false
    }
  }
}

function validateZipCode(x) {
  //validation for the mobile number
  if (x.Zip.value == "") {
    errorStr = errorStr + "You haven't inputted a Zip Code (e.g. 0420.)\n\n"
    trueOrFalse = false
  }
  if (x.Zip.value.length != 4) {
    errorStr = errorStr + "please input a valid Zip Code length(4 Digits).\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Zip.value.length; i++) {
    temp3 = x.Zip.value.substring(i, i + 1)
    if (difnumbers.indexOf(temp3) == -1) {
      errorStr = errorStr + "Sorry, you have entered non valid Zip Code. please enther only numbers.\n\n"
      trueOrFalse = false
    }
  }
}

function validateCheckBox(x) {
  if (!x.terms.checked) {
    alert("Please indicate that you accept the Terms and Conditions");
    trueOrFalse = false
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <center>
    <div class="container">
      <div style="margin-left:auto;margin-right:auto;">
        <form name="registration" onsubmit="return validate()" action="add.php" method="post">
          <div class="row">
            <div class="col-25">
              <label>First Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Fname" autofocus placeholder="Your first name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Last Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Lname" placeholder="Your last name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>E-mail</label>
            </div>
            <div class="col-75">
              <input type="text" name="Email" placeholder="Your Email..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Your Gender</label>
            </div>
            <div class="col-75">
              <input type="radio" value="Male" name="Gender">Male
              <br>
              <input type="radio" value="Female" name="Gender">Female
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Phone Number</label>
            </div>
            <div class="col-75">
              <input type="text" name="Phone" placeholder="Your Phone Number..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Your D.O.B.:</label>
            </div>
            <div class="col-20">
              Day:<input type="text" name="Day" size="2" maxlength="2" placeholder="5"> Month:
              <input type="text" name="Month" size="2" maxlength="2" placeholder="10"> Year:
              <input type="text" name="Year" size="4" maxlength="4" placeholder="1995">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>What Hand are you?</label>
            </div>
            <div class="col-75">
              <input type="radio" value="Right" name="Hand">Right
              <br>
              <input type="radio" value="Left" name="Hand">Left
              <br>
              <input type="radio" value="Unknown" name="Hand">Unknown
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Street Number</label>
            </div>
            <div class="col-20">
              <input type="text" name="StreetNumber" placeholder="Your Street Number..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Street Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Street" placeholder="Your Street Name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Subburb</label>
            </div>
            <div class="col-75">
              <input type="text" name="Subburb" placeholder="Your Subburb..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Postcode</label>
            </div>
            <div class="col-75">
              <input type="text" name="Zip" placeholder="Your Postcode..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>State</label>
            </div>
            <div class="col-75">
              <select name="State">
          <option value="Victoria" selected>Victoria</option>
          <option value="SouthAustrailia">South Austrailia</option>
          <option value="WesternAustrailia">Western Austrailia</option>
          <option value="NorthernTerretory">Northern Terretory</option>
          <option value="Queensland">Queensland</option>
        </select>
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>I Agree to the Terms and Conditions</label>
            </div>
            <div class="col-75">
              <label class="containerCheckBox">Agree 
  <input type="checkbox" name="terms">
  <span class="checkmark"></span>
</label>
            </div>
          </div>

          <div class="row">
            <input type="submit" value="Submit">
          </div>
        </form>
      </div>
    </div>
  </center>

</body>

</html>

＆＃13;

＆＃13;

＆＃13;

希望得到一些反馈。

Answer 1

var errorStr = "" //initialize the errorStr
var trueOrFalse = true

function validate() {
  //initialises all of the variables which are going to be used
  //alert("hello")

  var character = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz"
  var temp2
  var difnumbers = "0123456789"
  var temp3

  x = document.registration

  validateFname(x);
  //alert("a")
  validateLname(x);
  //alert("c")
  validateEmail(x);
  //alert("d")
  validateGender(x);
  //alert("e")
  validatePhone(x);
  //alert("f")
  //validateDOB(x);
  //alert("g")
  validateStreet(x);
  //alert("h")
  validateSubburb(x);
  //alert("i")
  validateZipCode(x);
  //alert("j")
  validateCheckBox(x);

  //this will display all of the error messages at the same time.
  if (!trueOrFalse) {
    alert(errorStr);
    errorStr = "";
  }
  //alert("end")

  return trueOrFalse
}

function validateFname(x) {
  //Vallidation for the Firstname
  if (x.Fname.value == "") {
    {
      errorStr = errorStr + "It seems like you havn't entered you're First Name. Please have another look.\n\n"
      trueOrFalse = false
    }
    for (var i = 0; i < x.Fname.value.length; i++) {
      temp2 = x.Fname.value.substring(i, i + 1)
      if (character.indexOf(temp2) == -1) {
        errorStr = errorStr + "It looks like you have entered a non Alphabetical character into you're First Name.\n\n"
        trueOrFalse = false
      }
    }
  }
}

function validateLname(x) {
  if (x.Lname.value == "") {
    errorStr = errorStr + "It seems like you havn't entered you're Last Name. Please have another look.\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Lname.value.length; i++) {
    temp2 = x.Lname.value.substring(i, i + 1)
    if (character.indexOf(temp2) == -1) {
      errorStr = errorStr + "It looks like you have entered a non Alphabetical character into you're Last Name.\n\n"
      trueOrFalse = false
    }
  }
}

function validateEmail(x) {
  var test = x.Email.value.indexOf("@")
  //if didn't find @
  if (test == -1) {
    errorStr = errorStr + "Please enter a valid E-Mail.\n\n"
    trueOrFalse = false
  }
  //if @ is the first character
  if (test == 0) {
    errorStr = errorStr + "The E-Mail you have Entered is not valid. The '@' can't be the first Character.\n\n"
    trueOrFalse = false
  }
  //if @ is the last character
  if (test == (x.Email.value.length - 1)) {
    errorStr = errorStr + "The E-Mail you have Entered is not valid. The '@' can't be the last Character.\n\n"
    trueOrFalse = false
  }
}

function validateGender(x) {
  if (!x.Gender[0].checked && !x.Gender[1].checked) {
    errorStr = errorStr + "Please select a gender\n\n"

    trueOrFalse = false
  }
}

function validatePhone(x) {
  //validation for the mobile number
  if (x.Phone.value == "") {
    errorStr = errorStr + "You haven't inputted a phone number (e.g. 0420 111 111.)\n\n"
    trueOrFalse = false
  }
  if (x.Phone.value.length != 10) {
    errorStr = errorStr + "please input a valid number length(10 Digits).\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Phone.value.length; i++) {
    temp3 = x.Phone.value.substring(i, i + 1)
    if (difnumbers.indexOf(temp3) == -1) {
      errorStr = errorStr + "Sorry, you have entered non valid Phone number. Please enter only numbers.\n\n"
      trueOrFalse = false
    }
  }
}

function validateStreet(x) {
  //this validates the city
  if (x.Street.value == "") {
    errorStr = errorStr + "You haven't entered your Street, please enter your Street.\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Street.value.length; i++) {
    temp2 = x.Street.value.substring(i, i + 1)
    if (character.indexOf(temp2) == -1) {
      errorStr = errorStr + "Sorry, you have entered a number. Your Street cannot contain a number. Please re-enter .\n\n"
      trueOrFalse = false
    }
  }
}

function validateSubburb(x) {
  //this part checks the street upon its entered values
  if (x.Subburb.value == "") {
    errorStr = errorStr + "You haven't entered your Street name, please enter your Subburb.\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Subburb.value.length; i++) {
    temp2 = x.Subburb.value.substring(i, i + 1)
    if (character.indexOf(temp2) == -1) {
      errorStr = errorStr + "Sorry, you have entered a number. Your Street name cannot contain a number. Please re-enter your Subburb.\n\n"
      trueOrFalse = false
    }
  }
}

function validateZipCode(x) {
  //validation for the mobile number
  if (x.Zip.value == "") {
    errorStr = errorStr + "You haven't inputted a Zip Code (e.g. 0420.)\n\n"
    trueOrFalse = false
  }
  if (x.Zip.value.length != 4) {
    errorStr = errorStr + "please input a valid Zip Code length(4 Digits).\n\n"
    trueOrFalse = false
  }
  for (var i = 0; i < x.Zip.value.length; i++) {
    temp3 = x.Zip.value.substring(i, i + 1)
    if (difnumbers.indexOf(temp3) == -1) {
      errorStr = errorStr + "Sorry, you have entered non valid Zip Code. please enther only numbers.\n\n"
      trueOrFalse = false
    }
  }
}

function validateCheckBox(x) {
  if (!x.terms.checked) {
    alert("Please indicate that you accept the Terms and Conditions");
    trueOrFalse = false
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <center>
    <div class="container">
      <div style="margin-left:auto;margin-right:auto;">
        <form name="registration" onsubmit="return validate()" action="add.php" method="post">
          <div class="row">
            <div class="col-25">
              <label>First Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Fname" autofocus placeholder="Your first name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Last Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Lname" placeholder="Your last name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>E-mail</label>
            </div>
            <div class="col-75">
              <input type="text" name="Email" placeholder="Your Email..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Your Gender</label>
            </div>
            <div class="col-75">
              <input type="radio" value="Male" name="Gender">Male
              <br>
              <input type="radio" value="Female" name="Gender">Female
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Phone Number</label>
            </div>
            <div class="col-75">
              <input type="text" name="Phone" placeholder="Your Phone Number..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Your D.O.B.:</label>
            </div>
            <div class="col-20">
              Day:<input type="text" name="Day" size="2" maxlength="2" placeholder="5"> Month:
              <input type="text" name="Month" size="2" maxlength="2" placeholder="10"> Year:
              <input type="text" name="Year" size="4" maxlength="4" placeholder="1995">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>What Hand are you?</label>
            </div>
            <div class="col-75">
              <input type="radio" value="Right" name="Hand">Right
              <br>
              <input type="radio" value="Left" name="Hand">Left
              <br>
              <input type="radio" value="Unknown" name="Hand">Unknown
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Street Number</label>
            </div>
            <div class="col-20">
              <input type="text" name="StreetNumber" placeholder="Your Street Number..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Street Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Street" placeholder="Your Street Name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Subburb</label>
            </div>
            <div class="col-75">
              <input type="text" name="Subburb" placeholder="Your Subburb..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Postcode</label>
            </div>
            <div class="col-75">
              <input type="text" name="Zip" placeholder="Your Postcode..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>State</label>
            </div>
            <div class="col-75">
              <select name="State">
          <option value="Victoria" selected>Victoria</option>
          <option value="SouthAustrailia">South Austrailia</option>
          <option value="WesternAustrailia">Western Austrailia</option>
          <option value="NorthernTerretory">Northern Terretory</option>
          <option value="Queensland">Queensland</option>
        </select>
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>I Agree to the Terms and Conditions</label>
            </div>
            <div class="col-75">
              <label class="containerCheckBox">Agree 
  <input type="checkbox" name="terms">
  <span class="checkmark"></span>
</label>
            </div>
          </div>

          <div class="row">
            <input type="submit" value="Submit">
          </div>
        </form>
      </div>
    </div>
  </center>

</body>

</html>

您必须在致电errorStr=""后重置alert(errorStr)，否则当您多次调用验证而不重置errorStr变量时，它会真正不断添加消息。

Answer 2

我会将此作为评论，但这不允许代码格式化。这种形式的表单验证是过时的，非常劳动密集型。

查看HTML5 form validation，这将大大减少你必须编写的代码量（从而减少错误的可能性）。

这不是一个库，这是一个内置的HTML5功能（support）。

例如，整个功能

function validateEmail(x) {
  var test = x.Email.value.indexOf("@")
  //if didn't find @
  if (test == -1) {
    errorStr = errorStr + "Please enter a valid E-Mail.\n\n"
    trueOrFalse = false
  }
  //if @ is the first character
  if (test == 0) {
    errorStr = errorStr + "The E-Mail you have Entered is not valid. The '@' can't be the first Character.\n\n"
    trueOrFalse = false
  }
  //if @ is the last character
  if (test == (x.Email.value.length - 1)) {
    errorStr = errorStr + "The E-Mail you have Entered is not valid. The '@' can't be the last Character.\n\n"
    trueOrFalse = false
  }
}

可以替换为input[email]：

const email = document.getElementById("emailInput");

email.addEventListener("input", event => {
  // Only for illustration, you don't need to subscribe to events to get this.
  console.log(email.validity);
})

<input type="email" id="emailInput" required>

然后，该字段将使用ValidityState进行修饰，其中包含许多属性，您可以检查这些属性以生成自定义错误。如果需要，您还可以使用自动添加到这些字段的CSS类来设置输入样式，并give in-place custom errors。

您还可以使用pattern=""属性设置自定义模式（例如，如果您希望强制执行该电子邮件地址在@后面有一个点，实际上并不需要规范）。

您似乎还希望确保用户不会为值输入一系列重复字符“111111”。那是（在数学上，并不意味着侮辱）天真，因为他们可以通过很多方式进入废话，例如电话号码“12121212”。

如果您仍想这样做，请编写一个辅助函数：

var checkRepeats = input => input.every(character => character == input[0])

当您需要setCustomValidity()时，请致电。

简而言之，使用更高级的功能将导致更少的代码，更少的错误和更好的用户体验。

Answer 3

将来，您可能需要考虑一些更现代的客户端数据验证方法（请参阅@ msanford＆＃39;帖子）。以下是您最初方法的变体。我建议在客户端和服务器端进行数据验证，但这只是客户端。

<!DOCTYPE html>
<html>

<head>

<script type="text/javascript" language="javascript">

var errorStr = ""; //initialize the errorStr
var validated = true;
var character = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
var difnumbers = "0123456789";
var temp2;
var temp3;


function validate(x) {
  //initialises all of the variables which are going to be used

  // Initialise Global variables with each call
  errorStr = "";
  validated = true;
  temp2 = "";
  temp3 = "";

  // This expression will evaluate to 0 if false, otherwise 1 if true 
  validated = ((validateFname(x) & validateLname(x) & validateEmail(x) & validateGender(x) & validatePhone(x) & validateStreet(x) & validateSubburb(x) & validateZipCode(x) & validateCheckBox(x))==1);


  //validateDOB(x); // If you add validation for this you may need to take into account LEAP YEARS and appropriate number ranges for Months (e.g. - February and 28,29,30, and 31 days in a particular month, etc.)

  //this will display all of the error messages at the same time.

  if (!validated) {
    alert(errorStr);
  }

  return validated;

}

function validateFname(x) {
  //Vallidation for the Firstname
  x.Fname.value = x.Fname.value.trim(); // Remove leading and trailing spaces
  if (x.Fname.value == "") {
      errorStr += "It seems like you haven't entered you're First Name. Please have another look.\n\n";
      return false;
    }
    for (var i = 0; i < x.Fname.value.length; i++) {
      temp2 = x.Fname.value.substring(i, i+1);
      if (character.indexOf(temp2) == -1) {
        errorStr += "It looks like you have entered a non Alphabetical character into you're First Name.\n\n";
        return false;
      }
    }

  return true;
}

function validateLname(x) {
  x.Lname.value = x.Lname.value.trim(); // Remove leading and trailing spaces
  if (x.Lname.value == "") {
    errorStr += "It seems like you haven't entered you're Last Name. Please have another look.\n\n";
    return false;
  }
  for (var i = 0; i < x.Lname.value.length; i++) {
    temp2 = x.Lname.value.substring(i, i+1);
    if (character.indexOf(temp2) == -1) {
      errorStr +="It looks like you have entered a non Alphabetical character into you're Last Name.\n\n";
      return false;
    }
  }

  return true;
}

function validateEmail(x) {
  x.Email.value = x.Email.value.trim(); // Remove leading and trailing spaces (May need to prohibit spaces altogether)
  var test = x.Email.value.indexOf("@")
  //if didn't find @
  if (test == -1) {
    errorStr += "Please enter a valid E-Mail.\n\n";
    return false;
  }
  //if @ is the first character
  if (test == 0) {
    errorStr += "The E-Mail you have Entered is not valid. The '@' can't be the first Character.\n\n";
    return false;
  }
  //if @ is the last character
  if (test == (x.Email.value.trim().length - 1)) {
    errorStr += "The E-Mail you have Entered is not valid. The '@' can't be the last Character.\n\n";
    return false;
  }

  return true;
}

function validateGender(x) {
  if (!x.Gender[0].checked && !x.Gender[1].checked) {
    errorStr += "Please select a gender\n\n";

    return false;
  }

  return true;
}

function validatePhone(x) {
  //validation for the mobile number
  x.Phone.value = x.Phone.value.trim(); // Remove leading and trailing spaces
  if (x.Phone.value == "") {
    errorStr += "You haven't inputted a phone number (e.g. 0420 111 111.)\n\n";
    return false;
  }
  if (x.Phone.value.length != 10) {
    errorStr += "please input a valid number length(10 Digits).\n\n";
    return false;
  }
  for (var i = 0; i < x.Phone.value.length; i++) {
    temp3 = x.Phone.value.substring(i, i+1);
    if (difnumbers.indexOf(temp3) == -1) {
      errorStr += "Sorry, you have entered non valid Phone number. Please enter only numbers.\n\n";
      return false;
    }
  }

  return true;
}

function validateStreet(x) {
  //this validates the city
  x.Street.value = x.Street.value.trim(); // Remove leading and trailing spaces
  if (x.Street.value == "") {
    errorStr += "You haven't entered your Street, please enter your Street.\n\n";
    return false;
  }
  for (var i = 0; i < x.Street.value.length; i++) {
    temp2 = x.Street.value.substring(i, i+1);
    if (character.indexOf(temp2) == -1) {
      errorStr += "Sorry, you have entered a number. Your Street cannot contain a number. Please re-enter .\n\n";
      return false;
    }
  }

  return true;
}

function validateSubburb(x) {
  //this part checks the street upon its entered values
  x.Subburb.value = x.Subburb.value.trim(); // Remove leading and trailing spaces
  if (x.Subburb.value == "") {
    errorStr += "You haven't entered your Suburb, please enter your Suburb.\n\n";
    return false;
  }
  for (var i = 0; i < x.Subburb.value.length; i++) {
    temp2 = x.Subburb.value.substring(i, i+1);
    if (character.indexOf(temp2) == -1) {
      errorStr += "Sorry, you have entered a number. Your Suburb name cannot contain a number. Please re-enter your Suburb.\n\n";
      return false;
    }
  }

  return true;
}

function validateZipCode(x) {
  //validation for the mobile number
  x.Zip.value = x.Zip.value.trim(); // Remove leading and trailing spaces
  if (x.Zip.value == "") {
    errorStr += "You haven't inputted a Zip Code (e.g. 0420.)\n\n";
    return false;
  }
  if (x.Zip.value.trim().length != 4) {
    errorStr += "please input a valid Zip Code length(4 Digits).\n\n";
    return false;
  }
  for (var i = 0; i < x.Zip.value.length; i++) {
    temp3 = x.Zip.value.substring(i, i+1);
    if (difnumbers.indexOf(temp3) == -1) {
      errorStr += "Sorry, you have entered non valid Zip Code. please enther only numbers.\n\n";
      return false;
    }
  }

  return true;
}

function validateCheckBox(x) {
  if (!x.terms.checked) {
    alert("Please indicate that you accept the Terms and Conditions");
    return false;
  }

  return true;
}
</script>
</head>

<body>
  <center>
    <div class="container">
      <div style="margin-left:auto;margin-right:auto;">
        <form name="registration" onsubmit="return validate(this)" action="add.php" method="post">
          <div class="row">
            <div class="col-25">
              <label>First Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Fname" autofocus placeholder="Your first name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Last Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Lname" placeholder="Your last name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>E-mail</label>
            </div>
            <div class="col-75">
              <input type="text" name="Email" placeholder="Your Email..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Your Gender</label>
            </div>
            <div class="col-75">
              <input type="radio" value="Male" name="Gender">Male
              <br>
              <input type="radio" value="Female" name="Gender">Female
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Phone Number</label>
            </div>
            <div class="col-75">
              <input type="text" name="Phone" placeholder="Your Phone Number..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Your D.O.B.:</label>
            </div>
            <div class="col-20">
              Day:<input type="text" name="Day" size="2" maxlength="2" placeholder="5"> Month:
              <input type="text" name="Month" size="2" maxlength="2" placeholder="10"> Year:
              <input type="text" name="Year" size="4" maxlength="4" placeholder="1995">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>What Hand are you?</label>
            </div>
            <div class="col-75">
              <input type="radio" value="Right" name="Hand">Right
              <br>
              <input type="radio" value="Left" name="Hand">Left
              <br>
              <input type="radio" value="Unknown" name="Hand">Unknown
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Street Number</label>
            </div>
            <div class="col-20">
              <input type="text" name="StreetNumber" placeholder="Your Street Number..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Street Name</label>
            </div>
            <div class="col-75">
              <input type="text" name="Street" placeholder="Your Street Name..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Subburb</label>
            </div>
            <div class="col-75">
              <input type="text" name="Subburb" placeholder="Your Subburb..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>Postcode</label>
            </div>
            <div class="col-75">
              <input type="text" name="Zip" placeholder="Your Postcode..">
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>State</label>
            </div>
            <div class="col-75">
              <select name="State">
          <option value="Victoria" selected>Victoria</option>
          <option value="SouthAustrailia">South Austrailia</option>
          <option value="WesternAustrailia">Western Austrailia</option>
          <option value="NorthernTerretory">Northern Terretory</option>
          <option value="Queensland">Queensland</option>
        </select>
            </div>
          </div>

          <div class="row">
            <div class="col-25">
              <label>I Agree to the Terms and Conditions</label>
            </div>
            <div class="col-75">
              <label class="containerCheckBox">Agree 
  <input type="checkbox" name="terms">
  <span class="checkmark"></span>
</label>
            </div>
          </div>

          <div class="row">
            <input type="submit" value="Submit">
          </div>
        </form>
      </div>
    </div>
  </center>

</body>

</html>

修剪文本数据总是一个好主意（例如 - 删除前导和尾随空格字符），除非您想允许前导和尾随空格字符。