Javascript 表单验证 - 遗漏了什么？

Question

我一直在寻找我的表单验证在过去 3 小时内无法正常工作的原因，而且似乎找不到答案。

我在 HTML 中有外部脚本文件、表单 ID、onclick 事件。我错过了什么？有人可以帮忙吗？

HTML

<script src="registration.js"></script>
<form id="registration">
  <fieldset>
    <legend>Individual/Company Details</legend>
    <br />
    <label class="error">Fields with an asterisk (*) are required</label>
    <br />
    <br />
    <label>First Name *: </label>
    <br />
    <input id="firstname" name="firstname" type="text" />
    <br />
    <label>Last Name *: </label>
    <br />
    <input id="lastname" name="lastname" type="text" />
    <br />
    <label>Username *: (alpha-numeric characters only) </label>
    <br />
    <input id="username" name="username" type="text" />
    <br />
    <label>Password *: (8 characters with 2 characters being numbers) </label>
    <br />
    <input id="password" name="password" type="password" />
    <br />
    <label>Date of Birth: (dd/mm/yyyy) </label>
    <br />
    <input id="dob" name="dob" type="text" />
    <br />
    <label>Gender: </label>
    <br />
    <br />
    <input id="gender" class="radio" name="gender" type="radio" value="Male" />Male
    <input class="radio" name="gender" type="radio" value="Female" />Female
    <input class="radio" name="gender" type="radio" value="Other" />Other
    <br />
    <br />
    <label>E-mail *: </label>
    <br />
    <input id="email" name="email" type="text" />
    <br />
    <label>Address *: (alpha-numeric characters only)</label>
    <br />
    <textarea id="address" name="address" cols="20" rows="10"></textarea>
    <br />
  </fieldset>
  <fieldset>
    <legend>Membership</legend>
    <br />
    <label>Membership Type *: </label>
    <select id="membership" name="membership">
            <option value= "" selected= "selected">(select membership type)</option>
            <option value= "gold">Gold</option>
            <option value= "silver">Silver</option>
            <option value= "mithril">Mithril</option>
        </select>
    <br />
    <br />
  </fieldset>
  <p class="buttons">
    <label>
            <input class= "button" type= "reset" value= "Clear" />
            <input class= "button" type= "submit" value= "Submit" onclick= "validateForm();" />
        </label>
  </p>
</form>

注册.js

// JavaScript Document

// Conditions are checked upon submission of form and error messages are displayed
function validateForm() {
  var error_message = "";

  // Different functions for validation of different input
  error_message += validateFirstName();

  error_message += validateLastName();

  error_message += validateUserName();

  error_message += validatePassword();

  error_message += validateDoB();

  error_message += validateGender();

  error_message += validateEmail();

  error_message += validateAddress();

  error_message += validateMembership();

  error_message += validateDuration();

  if (error_message != "") {
    alert("Some fields have invalid entry:\n" + error_message);
    return false;
  }

  return true;
}

// Validation of First Name
function validateFirstName() {
  var error = "";
  var nonletters = /[^a-zA-Z]+/;

  if (document.forms["registration"]["firstname"].value.length == 0) // condition is checked if field is left blank
  {
    registration.firstname.focus();
    error = "First name is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["firstname"].value.match(nonletters)) // condition is checked if field is alphabetical characters only
  {
    registration.firstname.focus();
    registration.firstname.select();
    error = "Alphabetical characters only for first name \n"; // error message is displayed if field is not alphabetical characters only
  }

  return error;
}

// Validation of Last Name
function validateLastName() {
  var error = "";
  var nonletters = /[^a-zA-Z]+/;

  if (document.forms["registration"]["lastname"].value.length == 0) // condition is checked if field is left blank
  {
    registration.lastname.focus();
    error = "Last name is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["lastname"].value.match(nonletters)) // condition is checked if field is alphabetical characters only
  {
    registration.lastname.focus();
    registration.lastname.select();
    error = "Alphabetical characters only for last name \n"; // error message is displayed if field is not alphabetical characters only
  }

  return error;
}

// Validation of User Name
function validateUserName() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;

  if (document.forms["registration"]["username"].value.length == 0) // condition is checked if field is left blank
  {
    registration.username.focus();
    error = "User name is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["username"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.username.focus();
    registration.username.select();
    error = "Alpha-numeric characters only for user name \n"; // error message is displayed if field is not alpha-numeric characters only
  }

  return error;
}

// Validation of Password
function validatePassword() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;
  var numbers = /(?=(.*\d){2})/;

  if (document.forms["registration"]["password"].value.length == 0) // condition is checked if field is left blank
  {
    registration.password.focus();
    error = "Password is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["password"].value.length != 8) // condition is checked if password is not eight characters
  {
    registration.password.focus();
    registration.password.select();
    error = "Password of 8 characters is required \n"; // error message is displayed if password is not eight characters
  } else if (document.forms["registration"]["password"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.password.focus();
    registration.password.select();
    error = "Alpha-numeric characters only for password \n"; // error message is displayed if field is not alpha-numeric characters only
  } else if (!(document.forms["registration"]["password"].value.match(numbers))) // condition is checked if field has at least two numbers
  {
    registration.password.focus();
    registration.password.select();
    error = "Password must contain at least 2 numbers \n"; // error message is displayed if field does not have at least two numbers
  }

  return error;
}

// Validation of Date of Birth
function validateDoB() {
  var error = "";
  var dob = document.forms["registration"]["dob"].value;
  var validdob = /\d{2}\/\d{2}\/\d{4}/;

  if (dob.length == 0) // condition is checked if field is left blank
  {
    error = ""; // no error message is displayed if field is blank
  } else if (!(dob.match(validdob))) // condition is checked if field is in correct format
  {
    registration.dob.focus();
    registration.dob.select();
    error = "Please enter date of birth in valid format \n"; // error message is displayed if field is in incorrect format
  }

  return error;
}

// Validation of Gender
function validateGender() {
  var error = "";

  if (document.forms["registration"]["gender"].value.unchecked) // condition is checked if field is left blank
  {
    error = ""; // no error message is displayed if field is blank
  }

  return error;
}


// Validation of Email Address and format validity
function validateEmail() {
  var error = "";
  var email = document.forms["registration"]["email"].value;
  var emailformat = /\w+([\.-]?\w{1})*@\w{1}([\.-]?\w+)*(\.\w{1})+/

  if (email.length == 0) // condition is checked if field is left blank
  {
    registration.email.focus();
    error = "Email address is required \n"; // error message is displayed if field is blank
  } else if (!(email.match(emailformat))) // condition is checked if field is in correct format
  {
    registration.email.focus();
    registration.email.select();
    error = "Please enter a valid email address \n"; // error message is displayed if invalid email address entered
  }

  return error;
}

// Validation of Address
function validateAddress() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;

  if (document.forms["registration"]["address"].value.length == 0) // condition is checked if field is left blank
  {
    registration.address.focus();
    error = "An address is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["address"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.address.focus();
    registration.address.select();
    error = "Alpha-numeric characters only for address \n"; // error message is displayed if field is not alpha-numeric characters only
  }

  return error;
}

// Validation of Membership Type
function validateMembership() {
  var error = "";

  if (document.forms["registration"]["membership"].value == "default") // condition is checked if field is left as default
  {
    registration.membership.focus();
    error = "Membership type must be selected \n"; // error message is displayed if field is not selected
  }

  return error;
}

// Validation of Membership Duration
function validateDuration() {
  var error = "";

  if (document.forms["registration"]["duration"].value == "default") // condition is checked if field is left as default
  {
    registration.duration.focus();
    error = "Membership duration must be selected \n"; // error message is displayed if field is not selected
  }

  return error;
}

Answer 1

删除 <input class= "button" type= "submit" value= "Submit" onclick= "validateForm();" />

使用

document.getElementById("registration").addEventListener("submit", validateForm);

在你的 js 文件中，试试这个:

function validateForm(event) {
  var error_message = "";

  // Different functions for validation of different input
  error_message += validateFirstName();

  error_message += validateLastName();

  error_message += validateUserName();

  error_message += validatePassword();

  error_message += validateDoB();

  error_message += validateGender();

  error_message += validateEmail();

  error_message += validateAddress();

  error_message += validateMembership();

  error_message += validateDuration();

  if (error_message != "") {
    alert("Some fields have invalid entry:\n" + error_message);
    event.preventDefault();
  }
}

// Validation of First Name
function validateFirstName() {
  var error = "";
  var nonletters = /[^a-zA-Z]+/;

  if (document.forms["registration"]["firstname"].value.length == 0) // condition is checked if field is left blank
  {
    registration.firstname.focus();
    error = "First name is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["firstname"].value.match(nonletters)) // condition is checked if field is alphabetical characters only
  {
    registration.firstname.focus();
    registration.firstname.select();
    error = "Alphabetical characters only for first name \n"; // error message is displayed if field is not alphabetical characters only
  }

  return error;
}

// Validation of Last Name
function validateLastName() {
  var error = "";
  var nonletters = /[^a-zA-Z]+/;

  if (document.forms["registration"]["lastname"].value.length == 0) // condition is checked if field is left blank
  {
    registration.lastname.focus();
    error = "Last name is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["lastname"].value.match(nonletters)) // condition is checked if field is alphabetical characters only
  {
    registration.lastname.focus();
    registration.lastname.select();
    error = "Alphabetical characters only for last name \n"; // error message is displayed if field is not alphabetical characters only
  }

  return error;
}

// Validation of User Name
function validateUserName() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;

  if (document.forms["registration"]["username"].value.length == 0) // condition is checked if field is left blank
  {
    registration.username.focus();
    error = "User name is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["username"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.username.focus();
    registration.username.select();
    error = "Alpha-numeric characters only for user name \n"; // error message is displayed if field is not alpha-numeric characters only
  }

  return error;
}

// Validation of Password
function validatePassword() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;
  var numbers = /(?=(.*\d){2})/;

  if (document.forms["registration"]["password"].value.length == 0) // condition is checked if field is left blank
  {
    registration.password.focus();
    error = "Password is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["password"].value.length != 8) // condition is checked if password is not eight characters
  {
    registration.password.focus();
    registration.password.select();
    error = "Password of 8 characters is required \n"; // error message is displayed if password is not eight characters
  } else if (document.forms["registration"]["password"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.password.focus();
    registration.password.select();
    error = "Alpha-numeric characters only for password \n"; // error message is displayed if field is not alpha-numeric characters only
  } else if (!(document.forms["registration"]["password"].value.match(numbers))) // condition is checked if field has at least two numbers
  {
    registration.password.focus();
    registration.password.select();
    error = "Password must contain at least 2 numbers \n"; // error message is displayed if field does not have at least two numbers
  }

  return error;
}

// Validation of Date of Birth
function validateDoB() {
  var error = "";
  var dob = document.forms["registration"]["dob"].value;
  var validdob = /\d{2}\/\d{2}\/\d{4}/;

  if (dob.length == 0) // condition is checked if field is left blank
  {
    error = ""; // no error message is displayed if field is blank
  } else if (!(dob.match(validdob))) // condition is checked if field is in correct format
  {
    registration.dob.focus();
    registration.dob.select();
    error = "Please enter date of birth in valid format \n"; // error message is displayed if field is in incorrect format
  }

  return error;
}

// Validation of Gender
function validateGender() {
  var error = "";

  if (document.forms["registration"]["gender"].value.unchecked) // condition is checked if field is left blank
  {
    error = ""; // no error message is displayed if field is blank
  }

  return error;
}


// Validation of Email Address and format validity
function validateEmail() {
  var error = "";
  var email = document.forms["registration"]["email"].value;
  var emailformat = /\w+([\.-]?\w{1})*@\w{1}([\.-]?\w+)*(\.\w{1})+/

  if (email.length == 0) // condition is checked if field is left blank
  {
    registration.email.focus();
    error = "Email address is required \n"; // error message is displayed if field is blank
  } else if (!(email.match(emailformat))) // condition is checked if field is in correct format
  {
    registration.email.focus();
    registration.email.select();
    error = "Please enter a valid email address \n"; // error message is displayed if invalid email address entered
  }

  return error;
}

// Validation of Address
function validateAddress() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;

  if (document.forms["registration"]["address"].value.length == 0) // condition is checked if field is left blank
  {
    registration.address.focus();
    error = "An address is required \n"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["address"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.address.focus();
    registration.address.select();
    error = "Alpha-numeric characters only for address \n"; // error message is displayed if field is not alpha-numeric characters only
  }

  return error;
}

// Validation of Membership Type
function validateMembership() {
  var error = "";

  if (document.forms["registration"]["membership"].value == "default") // condition is checked if field is left as default
  {
    registration.membership.focus();
    error = "Membership type must be selected \n"; // error message is displayed if field is not selected
  }

  return error;
}

// Validation of Membership Duration
function validateDuration() {
  var error = "";

  if (document.forms["registration"]["duration"].value == "default") // condition is checked if field is left as default
  {
    registration.duration.focus();
    error = "Membership duration must be selected \n"; // error message is displayed if field is not selected
  }

  return error;
}