JavaScript 验证用户输入

Question

我需要重大帮助，我已经研究这个代码两天了。我有一个由 javascript 生成的表，用于确认用户输入。如果用户看到错误，他们可以单击该单元格，这样用户就可以在那里编辑内容。我正在尝试设置用户电子邮件是否有效的显示位置。该脚本运行良好，但如果用户删除完整电子邮件，则内容将不再可编辑，这不太好。到目前为止我的代码是:

HTML:

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

JS:

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

Answer 1

您的 div 宽度会减小，这就是为什么如果内容设置为 '' 则您无法编辑内容的原因，解决问题的一种方法是为您的 div 提供固定宽度。

您可以看到下面的修复: jsfiddle