Javascript验证用户输入

我需要主要的帮助，我已经用这段代码两天了。我有一个由javascript生成的表，用于确认用户输入。如果用户看到错误，他们可以单击单元格，这样用户就可以在那里编辑内容。我正在尝试设置它在哪里显示用户的电子邮件是有效的，还是无效的。脚本工作正常，但如果用户删除完整的电子邮件，内容将不再可编辑，这将是不好的。到目前为止，我的代码是：

HTML:

电子邮件
abc@123.com
//用于为有效电子邮件创建一种绿色，当用户第一次看到确认表时，电子邮件有效。

有效的电子邮件！

JS:

功能验证电子邮件（id）{
var email=document.getElementById.firstChild.firstChild.nodeValue；
var emailFilter=/^[^0-9][A-z0-9+（[.][A-z0-9+）*[@][A-z0-9+（[.][A-z0-9+）*[.][A-z]{2,4}$/；
如果（！emailFilter.test（电子邮件））{
document.getElementById（“validInvalid”）.innerHTML=“
不是有效的电子邮件！”；
}否则{
document.getElementById（“validInvalid”）.innerHTML=“
有效电子邮件！”；
}
}

您的div宽度减小，这就是为什么如果内容设置为

''

则无法编辑内容的原因解决问题的一种方法是为您的div指定一个固定的宽度

您可以在下面看到修复程序：

---

您的div宽度减小，这就是为什么如果内容设置为

''

则无法编辑内容的原因解决问题的一种方法是为您的div指定一个固定的宽度

您可以在下面看到修复程序：

---

---

内容在

div

中不可编辑。首先，您如何使其可编辑？为什么不使用

输入

？当提交表单时元素失去焦点时，您应该检查是否验证用户输入（我假设还有更多内容）。使用

contentEditable

属性，@matthewpavkov？fwiw document.getElementById是一个函数fwiw，我很高兴我使用jQuerythe正则表达式不正确，并将不允许某些有效地址。特别是，双引号允许在地址的“本地部分”中使用空格和其他字符。内容在

div

中不可编辑。首先，您如何使其可编辑？为什么不使用

输入

？当提交表单时元素失去焦点时，您应该检查是否验证用户输入（我假设还有更多内容）。使用

contentEditable

属性，@matthewpavkov？fwiw document.getElementById是一个函数fwiw，我很高兴我使用jQuerythe正则表达式不正确，并将不允许某些有效地址。特别是，双引号允许在地址的“本地部分”中使用空格和其他字符。或者使用

minwidth

style属性。我得到了

verifyEmail在Firefox和Chrome中没有定义。它工作得很好，我的Chrome我在这台特定的计算机上没有Firefox，但我非常确定它们几乎是一样的。我用固定宽度属性修复了它。@Vince我很高兴它修复了你的问题，如果您的问题已经解决，请将其标记为解决方案。如果您使用html5，一个更简单的方法是使用
或
最小宽度
样式属性。我正在验证Firefox和Chrome中未定义电子邮件。它工作正常，我的Chrome我在这台特定计算机上没有Firefox，但我很确定他们是一样的。我使用固定宽度属性修复了它。@Vince我很高兴它修复了您的问题，如果您的问题已解决，请将其标记为解决方案。如果您使用html5，更简单的方法是使用

<table id = 'confirm'>
  <tr>
    <th>Email</th>
    <td id = 'tdEmail'>
      <div onkeyup = 'verifyEmail(this.parentNode.id)' contentEditable>
        abc@123.com
        <div id = 'validInvalid'>
          <span class = 'dgreen'> //Use to create a sort of green for valid email, when the user first sees the confirm table, the email is valid.
            <br/>Valid email!
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>    

function verifyEmail(id){
  var email = document.getElementById.firstChild.firstChild.nodeValue;
  var emailFilter = /^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/;
  if(!emailFilter.test(email)){
    document.getElementById("validInvalid").innerHTML = "<span class = 'red'><br/>Not a valid email!</span>";
  }else{
    document.getElementById("validInvalid").innerHTML = "<span class = 'dgreen'><br/>Valid email!</span>";
  }
}