电子邮件验证函数在 JavaScript 表单验证中与 element[x] 不起作用

email validation function not working with element[x] in javascript form validation

本文关键字：验证 element 不起作用 函数 JavaScript 表单 电子邮件      更新时间：2023-09-26

我在顶部添加了这个验证电子邮件功能，我不知道如何使它成为 ref. 元素[6]，这是表单中的电子邮件字段，我不确定 

return re.test(email);

声明是关于以下是完整的脚本代码：

<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>

函数：

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);
}

有一个正则表达式对象(re(，正则表达式对象使用 test 函数来测试传递到函数中的电子邮件是否根据正则表达式进行验证。 test 函数如果作为电子邮件进行验证，则返回true，如果未验证，则返回false。

你可以像这样使用它：

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

是正则表达式对象的原生函数，这意味着您的浏览器将知道如何处理它(测试函数的规格：developer.mozilla.org/en/JavaScript/Reference/Global_Objects/(

在你内部validation()传递给validateEmail的函数变量email几乎是未定义的。

您应该：

validateEmail(form.email.value);

或

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

希望这有帮助...

form.elements是你在1996年选择DOM元素的方式。您应该改用document.getElementById：

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;
}

创建一个变量email并将其值设置为 form.elements[6].value

例如 

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;
  }
 //...
}
相关文章：