如何使用JQuery来验证电子邮件地址?
当前回答
一个非常简单的解决方案是使用html5验证:
<form>
<input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
<input type="submit">
</form>
http://jsfiddle.net/du676/56/
其他回答
你应该看到:jquery.validate.js,把它添加到你的项目
这样使用它:
<input id='email' name='email' class='required email'/>
http://so.devilmaycode.it/jquery-validate-e-mail-address-regex/ 使用新的正则表达式 增加了对地址标签(+号)的支持
function isValidEmailAddress(emailAddress) { var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; return pattern.test(emailAddress); };
if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here (email is invalid) */ }
这是由用户Luca Filosofi提供的答案
你可以使用常规的旧javascript:
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
这个问题要比乍看之下更难回答。如果你想正确处理邮件。
世界上有很多人在寻找“统治一切的正则表达式”,但事实是,有大量的电子邮件提供商。
有什么问题吗?好吧,“a_z%@gmail.com不可能存在,但它可能通过其他提供商存在这样的地址”a__z@provider.com。
为什么? 根据RFC: https://en.wikipedia.org/wiki/Email_address RFC_specification。
为了方便讲解,我将摘录一段:
The local-part of the email address may use any of these ASCII characters: uppercase and lowercase Latin letters A to Z and a to z; digits 0 to 9; special characters !#$%&'*+-/=?^_`{|}~; dot ., provided that it is not the first or last character unless quoted, and provided also that it does not appear consecutively unless quoted (e.g. John..Doe@example.com is not allowed but "John..Doe"@example.com is allowed);[6] Note that some mail servers wildcard local parts, typically the characters following a plus and less often the characters following a minus, so fred+bah@domain and fred+foo@domain might end up in the same inbox as fred+@domain or even as fred@domain. This can be useful for tagging emails for sorting, see below, and for spam control. Braces { and } are also used in that fashion, although less often. space and "(),:;<>@[] characters are allowed with restrictions (they are only allowed inside a quoted string, as described in the paragraph below, and in addition, a backslash or double-quote must be preceded by a backslash); comments are allowed with parentheses at either end of the local-part; e.g. john.smith(comment)@example.com and (comment)john.smith@example.com are both equivalent to john.smith@example.com.
所以,我可以拥有一个这样的电子邮件地址:
A__z/J0hn.sm{it!}h_comment@example.com.co
如果你尝试这个地址,我打赌它会失败的所有或regex的主要部分张贴在整个网络。但是请记住这个地址遵循RFC规则,所以它是合理有效的。
想象一下我的沮丧,不能注册任何地方检查这些正则表达式!!
唯一真正能够验证电子邮件地址的人是电子邮件地址的提供者。
那么如何处理呢?
在几乎所有情况下,用户是否添加了无效的电子邮件都无关紧要。你可以依赖HTML 5输入type="email",这是运行接近RFC,几乎没有失败的机会。 HTML5输入类型="email"信息:https://www.w3.org/TR/2012/WD-html-markup-20121011/input.email.html
例如,这是RFC有效的电子邮件:
"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com
但是html5验证会告诉你@前面的文本不能包含"或()字符,这实际上是不正确的。
无论如何,您应该通过接受电子邮件地址并向该电子邮件地址发送电子邮件消息来实现这一点,并提供用户必须访问的代码/链接以确认有效性。
这样做的一个好做法是“再次输入您的电子邮件”,以避免用户输入错误。如果这对你来说还不够,添加一个预先提交的模式窗口,标题是“这是你当前的电子邮件吗?”,然后在用户输入的邮件中添加一个h2标签,你知道,以清楚地显示他们输入的电子邮件,然后是一个“是,提交”按钮。
我刚刚做了一个简化的,可以满足我的需要。 把它限制为字母数字,句号,下划线和@。
<input onKeyUp="testEmailChars(this);"><span id="a"></span>
function testEmailChars(el){
var email = $(el).val();
if ( /^[a-zA-Z0-9_@.-]+$/.test(email)==true ){
$("#a").html("valid");
} else {
$("#a").html("not valid");
}
}
在别人的帮助下完成
推荐文章
- 在Bootstrap模式打开时调用函数
- 当内部元素滚动位置达到顶部/底部时,防止父元素的滚动?
- 使用JQuery播放/暂停HTML 5视频
- val()和text()的区别
- HTML5文本区域占位符不出现
- 我如何捕捉Ajax查询后错误?
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)
- 在window.setTimeout()发生之前取消/终止
- 如何在AngularJS中有条件地要求表单输入?
- 检测当用户滚动到底部的div与jQuery
- 检测视口方向,如果方向是纵向显示警告消息通知用户的指示
- 禁用从HTML页面中拖动图像
- Jquery停止子事件触发父事件
- 使函数等待元素存在
- 我如何从一个URL获得片段标识符(哈希#后的值)?