了解使用 JavaScript 进行电子邮件验证
Posted
技术标签:
【中文标题】了解使用 JavaScript 进行电子邮件验证【英文标题】：understanding email validation using JavaScript 【发布时间】：2013-02-07 15:36:13 【问题描述】：我是 javascript 新手，在互联网上发现了这个验证给定电子邮件的 JavaScript 代码（代码没有问题）-
<html>
<h2>Email Validation</h2>
<script language = "Javascript">
function checkEmail(emailId)
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3)+$/.test(emailId))
document.write("You have entered valid email.");
return true;
return false;
function ValidateEmail()
var emailID=document.form.email;
if ((emailID.value==null)||(emailID.value==""))
alert("Please Enter your Email ID")
emailID.focus()
return false
if (checkEmail(emailID.value)==false)
emailID.value=""
alert("Invalid Email Adderess");
emailID.focus()
return false
alert('valid');
return true
</script>
<form name="form" method="post" onSubmit="return ValidateEmail()">
Enter an Email Address : <input type="text" name="email" size="30"><br>
<input type="submit" name="Submit" value="Submit">
</form>
</html>
我的代码没有问题，但不知何故我无法理解正则表达式/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3)+$/ 的含义。我不明白正则表达式的每一部分是什么意思。请赐教。
【问题讨论】：
您认为这令人困惑...试试这个：ex-parrot.com/pdw/Mail-RFC822-Address.html。使用正则表达式验证电子邮件很棘手......请参阅：programmers.stackexchange.com/questions/78353/… 注意 - 如果一个长的无效电子邮件被传递给它，这个正则表达式将冻结您的浏览器窗口。见jsfiddle.net/ocqn35sm /^\w+([\.\+-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3) +$/.test(电子邮件) ^^^^^^^^^^ 修改为包含“+”字符...值得。这允许 bradchesney79+spamtag@gmail.com 格式的电子邮件地址通过。 ...gmail 允许您将“+anything”文本块附加到您的 gmail 帐户名称。这不是 gmail 独有的功能。不，我不知道哪些服务允许它的详尽列表。 【参考方案1】：两个正斜杠 /.../ 包含一个正则表达式。
开头的 ^ 和结尾的 $ 分别匹配输入字符串的开头和结尾。也就是说，整个输入字符串应该与这个正则表达式匹配，而不是输入字符串的一部分。
\w+ 匹配 1 个或多个单词字符（a-z、A-Z、0-9 和下划线）。
[.-] 匹配字符。要么 -。我们需要使用 .来代表。作为 。在正则表达式中有特殊含义。 \被称为转义码，它恢复了后面字符的原始字面意思。
[.-]？匹配 0 或 1 次出现的 [.-]。
同样，\w+ 匹配 1 个或多个单词字符。
([.-]?\w+)* 匹配 0 次或多次出现的 [.-]?\w+。
子表达式 \w+([.-]?\w+)* 用于匹配电子邮件中的用户名，位于 @ 符号之前。它以至少一个单词字符（a-z、A-Z、0-9 和下划线）开头，后跟多个单词字符或 .要么 -。然而，一个 .或 - 后面必须跟一个单词字符（a-z、A-Z、0-9 和下划线）。也就是说，字符串不能包含“..”、“--”、“.-”或“-.”。有效字符串的示例是“a.1-2-3”。
@ 匹配自身。
同样，子表达式 \w+([.-]?\w+)* 用于匹配电子邮件域名，其模式与上述用户名相同。
子表达式 .\w2,3 匹配一个 .后跟两个或三个单词字符，例如“.com”、“.edu”、“.us”、“.uk”、“.co”。
(.\w2,3)+ 指定上述子表达式应出现一次或多次，例如“.com”、“.co.uk”、“.edu.sg "等等。
Reference
【讨论】：
在 8. 这部分并不完全正确——“但是，a . 或 - 必须后跟一个单词字符”——因为你可以有一个电子邮件地址，其中 - 后跟 @——例如像这个词-@word.com【参考方案2】：在这里试试REGEX
你可以找到详细的解释。
【讨论】：
【参考方案3】：下面是正则表达式的逐个分解：
/^ => 行首
\w+ => 任何单词（字母、数字和下划线）重复 1 次或多次
([\.-]?\w+)* => 的组[可选句点 (.) 或短划线 (-) 后跟任何重复一次或多次的单词]重复0次以上
@\w+ => at 符号 (@) 后跟任何重复一次或多次的单词
([\.-]?\w+)* => 的一个组[一个可选的句点或破折号跟随任何重复 1 次或多次的单词]，可以重复 0 次或多次 p>
(\.\w2,3)+ => 的一个组[一个句点后跟任何可以重复2-3次的单词]重复1次或多次
$/ => 行尾
顺便说一句，这是一个真的很好的Introduction to Regular ExpressionsCodular。
【讨论】：
【参考方案4】：试试这个
E-mail: <input type="email" name="usremail">
它对我有用
【讨论】：
【参考方案5】：给你。正则表达式的可视化工具
Regex Visualizer 和 A JS Fiddle Regex Explained
【讨论】：
【参考方案6】：此验证码对于电子邮件地址是错误的。特别是不允许使用 first+last@domain.com 形式的地址。这是在许多商业网站上发现的普遍错误（但不是 *** -- 恭喜！）。
【讨论】：
/^\w+([\.\+-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3) +$/.test(email) 修改为包含“+”字符...值得。这允许 bradchesney79+spamtag@gmail.com 格式的电子邮件地址通过。 ...gmail 允许您将“+anything”文本块附加到您的 gmail 帐户名称。这不是 gmail 独有的功能。不，我不知道哪些服务允许它的详尽列表。另外，不要再对这个黛比·唐纳（Debbie Downer）投反对票了，他正在泄露真相。也许他是个混蛋，但他没有错。 为了允许更长的***域名（如.domain）我不得不将2,3更改为2,64【参考方案7】：
/^(\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3)+[,;]?[ ]?)+$/
这个小美将允许您在字符串中输入一个或多个电子邮件地址，以逗号或分号结尾，后跟可选空格。 :)
【讨论】：
【参考方案8】：function validchat()
$('#btn-input-email').blur(function()
if($(this).val() != '')
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]2,4\.)?[a-z]2,4$/i;
if(pattern.test($(this).val()))
$(this).css('border' : '1px solid #569b44');
$('#valid').text('');
else
$(this).css('border' : '1px solid #ff0000');
$('#valid').text('Не верно');
else
$(this).css('border' : '1px solid #ff0000');
$('#valid').text('Поле email не должно быть пустым');
);
$("#btn-input-text").blur(function()
var textlength = $(this).val().trim().length;
if( textlength < 2 )
$(this).css('border' : '1px solid #ff0000');
$('#validtext').text('Минимум 2 символ');
else
$(this).css('border' : '1px solid #569b44');
$('#validtext').text('');
);
var valid = $('#valid').text();
var validtext = $('#validtext').text();
if((!valid || valid == '') && (!validtext || validtext == ''))
return true;
validchat();
function AjaxChat ()
$('#btn-input-email , #btn-input-text').blur();
var valid = validchat();
if(valid)
var email = $('#btn-input-email').val();
var text = $('#btn-input-text').val();
var data =
email:email,
text:text
$.ajax(
url: location.origin+"/chat_block.php",
//dataType: "json", ////Тип данных
type: "POST",
async: false,
data: data,
success: function(html)
if(!html || html == 'null') AjaxChat ();
if (jQuery.html != "")
var b_chat = $('.chat-customer').html();
var chat = 'Вы: ';
var obj = $.parseJSON(html);
chat += '<span>';
chat += obj['text'];
chat += '</span>';
chat += '<br /><br />';
$('.chat-customer').html(b_chat + chat);
$('#btn-input-text , #btn-input-email').val("");
,
error: function()
//cosole.log('No result');
);
$('#btn-input-email').remove();
【讨论】：
以上是关于了解使用 JavaScript 进行电子邮件验证的主要内容，如果未能解决你的问题，请参考以下文章
我可以只使用 jQuery 验证还是需要 PHP？ [关闭]