如何使用 JQuery 验证电子邮件地址?
如何使用 JQuery 验证电子邮件地址?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
如何使用 JQuery 验证电子邮件地址?
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(30)
您可以使用常规的旧 JavaScript 来实现:
You can use regular old javascript for that:
用于验证电子邮件的 jQuery 函数
我真的不喜欢使用插件,尤其是当我的表单只有一个需要验证的字段时。我使用此函数并在需要验证电子邮件表单字段时调用它。
现在使用这个
jQuery Function to Validate Email
I really don’t like to use plugins, especially when my form only has one field that needs to be validated. I use this function and call it whenever I need to validate an email form field.
and now to use this
看看 http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 。这是一个很好的 jQuery 插件,它允许为表单构建强大的验证系统。
这里有一些有用的示例。因此,表单中的电子邮件字段验证将如下所示:有关详细信息,请参阅电子邮件方法文档和样品。
Look at http: //bassistance.de/jquery-plugins/jquery-plugin-validation/. It is nice jQuery plugin, which allow to build powerfull validation system for forms.
There are some usefull samples
here. So, email field validation in form will look so:See Email method documentation for details and samples.
由于一些原因,我会使用 jQuery 验证插件。
你已经验证了,好吧,现在怎么办?您需要显示错误,在错误有效时处理删除它,显示总共有多少错误?它可以为您处理很多事情,无需重新发明轮子。
此外,另一个巨大的好处是它托管在 CDN 上,可以在此处找到发表此答案时的当前版本:http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx 这意味着客户端的加载时间更快。
I would use the jQuery validation plugin for a few reasons.
You validated, ok great, now what? You need to display the error, handle erasing it when it is valid, displaying how many errors total perhaps? There are lots of things it can handle for you, no need to re-invent the wheel.
Also, another huge benefit is it's hosted on a CDN, the current version at the time of this answer can be found here: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx This means faster load times for the client.
MVC/ASP.NET 中的 Javascript 电子邮件验证
我在使用 Fabian 的答案时遇到的问题是由于 Razor
@
符号而在 MVC 视图中实现它。您必须包含一个额外的@
符号来转义它,如下所示:@@
To避免 Razor In MVC
我在本页的其他地方没有看到它,所以我想这可能会有所帮助。
编辑
这是来自 Microsoft 的链接,描述了它的用法。
我刚刚测试了上面的代码并得到了以下 js:
这正是它应该做的事情。
Javascript Email Validation in MVC/ASP.NET
The problem I came across while using Fabian's answer, is implementing it in an MVC view because of the Razor
@
symbol. You have to include an additional@
symbol to escape it, like so:@@
To Avoid Razor In MVC
I didn't see it elsewhere on this page, so I thought it might be helpful.
EDIT
Here's a link from Microsoft describing it's usage.
I just tested the code above and got the following js:
Which is doing exactly what it's supposed to do.
: www.htmldrive.net
来源:htmldrive.com
: www.htmldrive.net
Source:htmldrive.com
这是由用户Luca Filosofi在此答案中提供的这个答案
this was provided by user Luca Filosofi in this answer this answer
我推荐 Verimail.js,它还有一个 JQuery 插件。
为什么? Verimail 支持以下功能:
因此,除了验证之外,Verimail.js 还为您提供建议。因此,如果您输入的电子邮件包含错误的 TLD 或与常见电子邮件域(hotmail.com、gmail.com 等)非常相似的域,它可以检测到这一点并建议更正。
示例:
等等..
要将其与 jQuery 一起使用,只需包含 verimail.jquery.js 在您的网站上并运行以下函数:
message 元素是一个将在其中显示消息的元素。这可以是从“您的电子邮件无效”到“您的意思是……?”的所有内容。
如果您有一个表单并希望对其进行限制,使其在电子邮件有效之前无法提交,那么您可以使用 getVerimailStatus 函数检查状态,如下所示:
该函数根据对象 Comfirm 返回一个整数状态代码。 AlphaMail.Verimail.Status。但一般经验法则是任何低于 0 的代码都是指示错误的代码。
I would recommend Verimail.js, it also has a JQuery plugin.
Why? Verimail supports the following:
So besides validation, Verimail.js also gives you suggestions. So if you type an email with the wrong TLD or domain that is very similar to a common email domain (hotmail.com, gmail.com, etc), it can detect this and suggest a correction.
Examples:
And so on..
To use it with jQuery, just include verimail.jquery.js on your site and run the function below:
The message element is an element in which a message will be shown. This can be everything from "Your email is invalid" to "Did you mean ...?".
If you have a form and want to restrict it so that it cannot be submitted unless the email is valid, then you can check the status using the getVerimailStatus-function as shown below:
This function returns an integer status code according to the object Comfirm.AlphaMail.Verimail.Status. But the general rule of thumb is that any codes below 0 is codes indicating errors.
正如其他人提到的,您可以使用正则表达式来检查电子邮件地址是否与模式匹配。但是您仍然可以收到与该模式匹配的电子邮件,但我的电子邮件仍然会被退回或者是虚假的垃圾邮件。
使用正则表达式检查
使用真实电子邮件验证 API
检查您可以使用 API 来检查电子邮件地址是否真实且当前处于活动状态。
有关更多信息,请参阅 https://isitarealemail.com 或 博客文章
As others have mentioned you can use a regex to check if the email address matches a pattern. But you can still have emails that match the pattern but my still bounce or be fake spam emails.
checking with a regex
checking with a real email validation API
You can use an API which will check if the email address is real and currently active.
For more see https://isitarealemail.com or blog post
一个非常简单的解决方案是使用 html5 验证:
http://jsfiddle.net/du676/56/
A very simple solution is to use html5 validation:
http://jsfiddle.net/du676/56/
这会执行更彻底的验证,例如,它会检查用户名中的连续点,例如 [email ;protected]
请参阅在 JavaScript 中使用正则表达式验证电子邮件地址。
This performs a more thorough validation, for example it checks against successive dots in the username such as [email protected]
See validate email address using regular expression in JavaScript.
如果您有基本表单,只需将输入类型设置为电子邮件:
这适用于使用 HTML5 属性的浏览器,甚至不需要 JS。即使使用上述某些脚本,仅使用电子邮件验证也起不了多大作用,因为:
[email protected ]
[电子邮件受保护]
[email protected]
等...将全部验证为“真实”电子邮件。因此,您最好确保用户必须输入他们的电子邮件地址两次,以确保他们输入的是相同的电子邮件地址。但是要保证电子邮件地址是真实的将非常困难,但看看是否有一个非常有趣方式。但如果您只是确定它是一封电子邮件,请坚持使用 HTML5 输入。
小提琴示例
这适用于 FireFox 和 Chrome。它可能无法在 Internet Explorer 中运行...但是 Internet Explorer 很糟糕。那么就有了...
If you have a basic form, just make the input type of email:
<input type="email" required>
This will work for browsers that use HTML5 attributes and then you do not even need JS. Just using email validation even with some of the scripts above will not do much since:
[email protected]
[email protected]
[email protected]
etc... Will all validate as "real" emails. So you would be better off ensuring that the user has to enter their email address twice to make sure that they put the same one in. But to guarantee that the email address is real would be very difficult but very interesting to see if there was a way. But if you are just making sure that it is an email, stick to the HTML5 input.
FIDDLE EXAMPLE
This works in FireFox and Chrome. It may not work in Internet Explorer... But internet explorer sucks. So then there's that...
像这样使用:
Use Like This :
降落在这里......结束在这里:
https://html.spec.whatwg.org/ multipage/forms.html#valid-e-mail-address
...它提供了以下正则表达式:
...我发现这要归功于 jQuery Validation 插件自述文件的注释:
https://github.com/jzaefferer/ jquery-validation/blob/master/README.md#reporting-an-issue
所以,@Fabian<的更新版本/a> 的答案是:
希望有帮助
Landed here.....ended up here:
https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address
...which provided the following regex:
...which I found thanks to a note on the jQuery Validation plugin readme:
https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue
So, the updated version of @Fabian's answer would be:
Hope that helps
这个问题比乍一看更难回答。如果你想正确处理电子邮件。
世界各地有很多人在寻找“统治他们所有人的正则表达式”,但事实是电子邮件提供商有不同的语气。
有什么问题吗?好吧,“a_z%@gmail.com 不能存在,但它可能存在通过另一个提供商提供的类似地址”[电子邮件受保护]。
为什么?
根据 RFC:
https://en.wikipedia.org/wiki/Email_address#RFC_specation。
我将摘录一段内容以方便讲座:
因此,我可以拥有这样的电子邮件地址:
如果您尝试使用此地址,我打赌它会在整个网络上发布的正则表达式的全部或主要部分中失败。但请记住,该地址遵循 RFC 规则,因此它是相当有效的。
想象一下,我无法在任何使用这些正则表达式检查的地方进行注册,这让我感到沮丧!
唯一真正可以验证电子邮件地址的人是电子邮件地址的提供者。
那么该如何处理呢?
几乎在所有情况下,用户添加无效的电子邮件都没有关系。您可以依赖在 RFC 附近运行的 HTML 5 input type="email",失败的可能性很小。
HTML5 输入类型=“电子邮件”信息: https ://www.w3.org/TR/2012/WD-html-markup-20121011/input.email.html
例如,这是一封 RFC 有效电子邮件:
但是 html5 验证会告诉您文本例如,@ 之前不得包含“或 () 字符,这实际上是不正确的。
无论如何,您应该通过接受电子邮件地址并向该电子邮件地址发送电子邮件消息来完成此操作,其中包含用户必须访问以确认的代码/链接 这样做的一个好
习惯是“再次输入您的电子邮件”输入,以避免用户输入错误。如果这对您来说还不够,请添加一个标题为“这是您当前的电子邮件吗?”的预提交模式窗口。 -mail?”,然后用户在 h2 标签内输入的邮件,你知道,为了清楚地显示他们输入的电子邮件,然后是“是的,提交”按钮。
This question is more dificult to answer than seems at first sight. If you want to deal with emails correctly.
There were loads of people around the world looking for "the regex to rule them all" but the truth is that there are tones of email providers.
What's the problem? Well, "a_z%@gmail.com cannot exists but it may exists an address like that through another provider "[email protected].
Why?
According to the RFC:
https://en.wikipedia.org/wiki/Email_address#RFC_specification.
I'll take an excerpt to facilitate the lecture:
So, i can own an email address like that:
If you try this address i bet it will fail in all or the major part of regex posted all across the net. But remember this address follows the RFC rules so it's fair valid.
Imagine my frustration at not being able to register anywhere checked with those regex!!
The only one who really can validate an email address is the provider of the email address.
How to deal with, so?
It doesn't matter if a user adds a non-valid e-mail in almost all cases. You can rely on HTML 5 input type="email" that is running near to RFC, little chance to fail.
HTML5 input type="email" info: https://www.w3.org/TR/2012/WD-html-markup-20121011/input.email.html
For example, this is an RFC valid email:
But the html5 validation will tell you that the text before @ must not contain " or () chars for example, which is actually incorrect.
Anyway, you should do this by accepting the email address and sending an email message to that email address, with a code/link the user must visit to confirm validity.
A good practice while doing this is the "enter your e-mail again" input to avoid user typing errors. If this is not enough for you, add a pre-submit modal-window with a title "is this your current e-mail?", then the mail entered by the user inside an h2 tag, you know, to show clearly which e-mail they entered, then a "yes, submit" button.
用这个
use this
Bug 位于 Jquery Validation Validation Plugin Only validates with @ 更改此
代码更改为此
Bug is in Jquery Validation Validation Plugin Only validates with @ to change this
change the code to this
对于那些想要使用比破坏性的光年长正则表达式匹配更好的可维护解决方案的人,我编写了几行代码。如果想要节省字节,请坚持使用 RegEx 变体 :)
这限制:
无论如何,仍然有可能泄漏,因此请务必将其与服务器端验证 + 电子邮件链接验证结合起来。
这是 JSFiddle
For thoose who want to use a better maintainable solution than disruptive lightyear-long RegEx matches, I wrote up a few lines of code. Thoose who want to save bytes, stick to the RegEx variant :)
This restricts:
Anyways, it's still possible to leak through, so be sure you combine this with a server-side validation + email-link verification.
Here's the JSFiddle
您可以创建自己的函数
You can create your own function
您可以使用 jQuery 验证,并且可以在单个 HTML 行中验证电子邮件和电子邮件验证消息:
type="email" required data-msg-email="输入有效的电子邮件帐户!"
您可以使用 data-msg-email 参数来放置个性化消息否则,请勿放置此参数,并且将显示默认消息:“请输入有效的电子邮件地址。”
完整示例:
You can use jQuery Validation and, in a single HTML line, you can validate the email and the email validation message:
type="email" required data-msg-email="Enter a valid email account!"
You can use the data-msg-email parameter to place a personalized message or otherwise do not place this parameter and the default message will be displayed: "Please enter a valid email address."
Full example:
参考:JQUERY UI 网站
Refernce : JQUERY UI WEBSITE
你应该看到这个:jquery.validate.js,将其添加到你的项目中,
如下所示:
you should see this:jquery.validate.js,add it to your project
using it like this:
另一个简单而完整的选项:
Another simple and complete option:
我刚刚制作的简化版可以满足我的需要。
将其限制为仅字母数字、句点、下划线和@。
在别人的帮助下制作的
A simplified one I've just made, does what I need it to.
Have limited it to just alphanumeric, period, underscore and @.
Made with help from others
此正则表达式可防止重复的域名,例如 [email protected],它只允许域名两次,例如[电子邮件受保护]。它还不允许从 [email protected] 等号码进行
统计!!!!!
This regexp prevents duplicate domain names like [email protected], it will allow only domain two time like [email protected]. It also does not allow statring from number like [email protected]
All The Best !!!!!
通过按钮状态处理在打字时验证电子邮件。
Validate email while typing, with button state handling.