电子邮件验证功能不适用于javascript表单验证中的element [x]

Question

I added this validate email function here at the top, and i don't know how to make it ref. element[6] which is the email field in the form, and I'm not sure what the

return re.test(email); 

statement is all about here is the full script code:

<script type="text/javascript">

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\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,}))$/;
    return re.test(email);
}   


function validation(form) {
  if(form.elements[3].value == '' ) {
      alert('Please enter your first name');
      form.first_name.focus();
      return false;
  }

  if(form.elements[4].value == '') {
      alert('Please enter your last name');
      form.last_name.focus();
      return false;
  }

  if(form.elements[6].value == '') {
      alert('Please enter your email address');
      form.email.focus();
      return false;

  if (validateEmail(email)) {
    $("#result").text(email + " is a valid email address :)");
    $("#result").css("color", "green");
  } else {
    $("#result").text(email + "is not a valid email address :(");
    $("#result").css("color", "red");
    return false;
  }

  if(form.elements[7].value == '') {
      alert('Please enter your telephone number');
      form.phone.focus();
      return false;
  }

  if(form.elements[17].value == '') {
      alert('Please let us know what you are most interested in');
      form.phone.focus();
      return false;
  }

  if(form.elements[18].value == '') {
      alert('Please enter the area you are most interested in');
      form.phone.focus();
      return false;
  }

  if(form.elements[20].value == '') {
      alert('Please enter the low end of your budget');
      form.phone.focus();
      return false;
  }

  if(form.elements[21].value == '') {
      alert('Please enter the high end of your budget');
      form.phone.focus();
      return false;
  }

  return true;
}
</script>

Answer 1

The function:

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\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,}))$/;
    return re.test(email);
}   

has a regex object ( re ), the regex object uses the test function to test if the email passed into the function validates according to the regex. the test function returns true if it validates as an email and false if it doesnt.

you can use it like this:

if(!validateEmail(form.elements[6].value)) {
  alert('Please enter a valid email address');
  form.email.focus();
  return false;
}

The test function is native to regex objects, meaning your browser will know what to do with it (specs for the test function: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/ )

Answer 2

Inside you validation() function variable email that is being passed to validateEmail is pretty much undefined.

You should either:

validateEmail(form.email.value);

OR

validateEmail($('#email').val()); // considering that `email` field has id="email"

Hope this helps...

Answer 3

form.elements was the way you selected DOM elements in 1996. You should be using document.getElementById instead:

var resultElement = $("#result");
var emailVal = document.getElementById('emailBoxId').value;
if (validateEmail(emailVal )) {
    resultElement
      .text(emailVal + " is a valid email address :)")
      .css("color", "green");
} else {
    resultElement
      .text(emailVal + "is not a valid email address :(")
      .css("color", "red");
    return false;
}

Answer 4

Create a variable email and set its value to form.elements[6].value

eg

function validation(form) {
  if(form.elements[3].value == '' ) {
    alert('Please enter your first name');
    form.first_name.focus();
    return false;
  }
  //...
  var email = form.elements[6].value
  if (validateEmail(email)) {
    $("#result").text(email + " is a valid email address :)");
    $("#result").css("color", "green");
  } else {
    $("#result").text(email + "is not a valid email address :(");
    $("#result").css("color", "red");
    return false;
  }
 //...
}