jquery验证电子邮件不适用于^字符答案

【问题标题】：jquery validating email not working with ^ characterjquery验证电子邮件不适用于^字符
【发布时间】：2015-02-24 21:08:25
【问题描述】：

我正在尝试按照本页 Email validation using jQuery 上的说明验证电子邮件，但我不知道如果我将这个字符 ^ 放在表达式的开头会出现错误：

function checkEmail(){
    var email = this.innerHTML;
    var emailPattern = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;

    if (!emailPattern.test(email)){
        alert("Invalid email address.");
    }
    else {
        alert("Valid email address.");
    }
}

如果我使用另一个（不带 ^ 和 +$），它会完美运行：

var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;

只是为了理解它，我的第一个表达有什么问题？

这是一个证明我的问题的小提琴：http://jsfiddle.net/5en4cxy9/

谢谢，

【问题讨论】：

你得到什么错误？
您的程序运行良好 - 在此处检查 jsfiddle：jsfiddle.net/2wbpy2mf/9
您的验证对我很有效。你确定this.innerHTML 的值确实是你想要验证的，尝试通过console.log(this.innerHTML) 或alert(this.innerHTML) 输出它的值并检查它是否适合你。
@ user1428716 和@avenet 我刚刚用一个包含我的代码的小提琴容器更新了我的问题。如果我提醒我的 this.innerHTML 它会显示正确的值。这很奇怪，因为如果我尝试@ user1428716 的小提琴，其他表达式就可以了。

标签： jquery regex email-validation

【解决方案1】：

您的小提琴在电子邮件地址之前包含一个前导空格。此前导空格包含在 .text() 或 .innerHTML 中，因此锚定正则表达式 (/^.../) 失败。

首先修剪前导/尾随空格：

var email = this.innerHTML.trim();
var emailPattern = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;

if (!emailPattern.test(email)){
    alert("Invalid email address.");
}
else {
    alert("Valid email address.");
}

$(document).ready(function() {
  $("div").blur(function() {
    // alert("This input field has lost its focus.");
    var email = $("div#email").text().trim();

    var emailPattern = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;

    if (!emailPattern.test(email)) {
      alert("Invalid email address.");
      $(this).css('color', 'red');
    } else {
      alert("Valid email address.");
    }


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr class="tabel_header">
      <th width="10%" align="center"><strong> Email:</strong>
      </th>
      <th width="7%" align="center"><strong> Username:</strong>
      </th>
    </tr>
    <tr data-row-no="1" height="35">
      <td>
        <div id="email" style="width: 100%; height: 100%;" contenteditable="true"> admin@dracus.co</div>
      </td>
      <td>
        <div style="width: 100%; height: 100%;" contenteditable="true">Admin</div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：