使用jQuery进行电子邮件验证
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jQuery进行电子邮件验证相关的知识，希望对你有一定的参考价值。
我是jQuery的新手，想知道如何使用它来验证电子邮件地址。
您可以使用常规的旧javascript：
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
一个非常简单的解决方案是使用html5验证：
<form>
<input type="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">
<input type="submit">
</form>
如果您有基本表单，只需输入电子邮件类型：<input type="email" required>
这适用于使用HTML5属性的浏览器，然后您甚至不需要JS。即使使用上面的一些脚本，使用电子邮件验证也不会做太多事情：
some@email.com so@恶魔.com有@法克麦罗.net
等...将全部验证为“真实”电子邮件。因此，最好确保用户必须输入两次电子邮件地址，以确保他们将相同的电子邮件地址放入其中。但是为了保证电子邮件地址是真实的，这将是非常困难的，但很有趣，看看是否有办法。但如果你只是确保它是一封电子邮件，请坚持使用HTML5输入。
这适用于FireFox和Chrome。它可能无法在Internet Explorer中工作......但是Internet Explorer很糟糕。那么那就是......
function isValidEmail(emailText) {
var pattern = new RegExp(/^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i);
return pattern.test(emailText);
};
使用像这样：
if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }
function validateEmail(emailaddress){
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(emailaddress)) {
alert("Please enter valid email id");
}
}
Javascript Email Validation in MVC/ASP.NET
我在使用Fabian的答案时遇到的问题是在MVC视图中实现它，因为Razor @符号。你必须包括一个额外的@符号来逃避它，如：@@
在MVC中避免使用Razor
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+@@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
我没有在本页的其他地方看到它，所以我认为它可能会有所帮助。
EDIT
这是来自微软的link描述它的用法。 我刚刚测试了上面的代码，得到了以下js：
function validateEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
这正是它应该做的事情。
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
function ValidateEmail(email) {
var expr = /^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/;
return expr.test(email);
};
$("#btnValidate").live("click", function () {
if (!ValidateEmail($("#txtEmail").val())) {
alert("Invalid email address.");
}
else {
alert("Valid email address.");
}
});
</script>
<input type = "text" id = "txtEmail" />
<input type = "button" id = "btnValidate" value = "Validate" />
登陆这里......最终来到这里：https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address
......提供了以下正则表达式：
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
...我发现这要归功于jQuery Validation插件自述文件中的注释：https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue
function IsEmail(email) {
var regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
return regex.test(email);
}
希望有所帮助
用这个
if ($this.hasClass('tb-email')) {
var email = $this.val();
var txt = /^([a-zA-Z0-9_.-+])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!txt.test(email)) {
e.preventDefault();
$this.addClass('error');
} else {
$this.removeClass('error');
}
}
对于那些想要使用比破坏性光年长RegEx匹配更好的可维护解决方案的人，我写了几行代码。那些想节省字节的人，坚持使用RegEx变种:)
这限制了：
- 字符串中没有@
- 字符串中没有点
- @之后超过2个点
- 用户名中的坏字符（在@之前）
- 字符串中超过2 @
- 域中的坏字符
- 子域中的坏字符
- TLD中的坏字符
- TLD - 地址
无论如何，它仍然可能泄漏，因此请务必将其与服务器端验证+电子邮件链接验证相结合。
这是JSFiddle
//validate email
var emailInput = $("#email").val(),
emailParts = emailInput.split('@'),
text = 'Enter a valid e-mail address!';
//at least one @, catches error
if (emailParts[1] == null || emailParts[1] == "" || emailParts[1] == undefined) {
yourErrorFunc(text);
} else {
//split domain, subdomain and tld if existent
var emailDomainParts = emailParts[1].split('.');
//at least one . (dot), catches error
if (emailDomainParts[1] == null || emailDomainParts[1] == "" || emailDomainParts[1] == undefined) {
yourErrorFunc(text);
} else {
//more than 2 . (dots) in emailParts[1]
if (!emailDomainParts[3] == null || !emailDomainParts[3] == "" || !emailDomainParts[3] == undefined) {
yourErrorFunc(text);
} else {
//email user
if (/[^a-z0-9!#$%&'*+-/=?^_`{|}~]/i.test(emailParts[0])) {
yourErrorFunc(text);
} else {
//double @
if (!emailParts[2] == null || !emailParts[2] == "" || !emailParts[2] == undefined) {
yourErrorFunc(text);
} else {
//domain
if (/[^a-z0-9-]/i.test(emailDomainParts[0])) {
yourErrorFunc(text);
} else {
//check for subdomain
if (emailDomainParts[2] == null || emailDomainParts[2] == "" || emailDomainParts[2] == undefined) {
//TLD
if (/[^a-z]/i.test(emailDomainParts[1])) {
yourErrorFunc(text);
} else {
yourPassedFunc()以上是关于使用jQuery进行电子邮件验证的主要内容，如果未能解决你的问题，请参考以下文章
使用 JQuery、Ajax、PHP、Json 进行表单验证