为什么我的嵌套if和else语句不起作用？

Question

我希望能够做的就是每次用户在输入字段中输入新字符时验证电子邮件。 当输入字段为空时，它不应显示任何内容，但当它包含字母时，它应显示无效字符的位置。

我的代码有效但输入字段为空时不显示任何内容，因为它使用嵌套的“else”而不是它应该使用的那个。 有人帮忙吗？ 提前致谢。 andyy

var tick = "<img src='images/tick.png' width='20' height='20'/>";
var cross = "<img src='images/cross.png' width='20' height='20'/>";
var email_element = document.contact_form.email_field.value;
function validate_email(id) {
     if ( email_element != '' ) {
        var letters = /^[A-Za-z]+$/;
        if ( document.contact_form.email_field.value.match(letters) )
        {
            document.getElementById(id).innerHTML = tick;
                valid = true;
        } else {
            document.getElementById(id).innerHTML = cross;
            valid = false;
        }
    } else {
        document.getElementById(id).innerHTML = '';
    }
    return valid;
}

Answer 1

问题很可能是这一行：

var email_element = document.contact_form.email_field.value; 

您正在分配一个等于电子邮件字段值的全局变量，然后再也不会更新该变量。 这不会创建到字段当前值的“活动”链接，它只是存储执行该行时的值。 这反过来意味着函数中的第一个if语句if ( email_element != '' )正在评估电子邮件字段的非当前值。

将该行移动到函数内部的第一个内容，然后每次运行该函数时，您将获得该字段的最新（当前）值。

编辑：此外，您没有在非嵌套的else中为valid分配值。 您应该在函数中声明valid作为局部变量，并确保在每个if和else分支中正确设置它（或者在声明它时将其默认为false）。 正如thomasrutter所说，你目前没有声明函数中的var语句valid ，这意味着它将被创建为一个全局变量，这反过来意味着当你没有在你的非嵌套函数中给它一个值时你的函数将返回上次调用中已有的valid 。 （实际上，根据您发布的代码，您根本不需要valid变量：您可以说return true;或者return false;直接在if / else结构的每个分支内。）

Answer 2

尝试更换表达email_element != ''与document.contact_form.email_field.value != ''如我怀疑email_element是一个元素的引用，并且永远不会等于'' 。 更好的是，创建一个局部变量email_value并为其分配document.contact_form.email_field.value的值，并在两个地方使用它，如，

function validate_email(id) {
  var email_value = document.contact_form.email_field.value;
  if ( email_value != '' ) {         
    var letters = /^[A-Za-z]+$/;
    if ( email_value.match(letters) ) {
       document.getElementById(id).innerHTML = tick;
       valid = true;
    }
    else {
      document.getElementById(id).innerHTML = cross;
      valid = false;
   }
  } 
  else {
    document.getElementById(id).innerHTML = '';
  }
  return valid; 
} 

Answer 3

设置email_element时，您将按副本获取值一次，因为它是一个字符串。 因此，如果页面加载该字段为空，则email_element现在设置为''并保持设置为该值，直到您再次设置它为止。

标签是通过引用设置的，所以你可能想要的是：

var email_element = document.contact_form.email_field;
. . .
if(email_element.value != '')