如何在 Jquery 中验证电子邮件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3663968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate email in Jquery?
提问by Sammy
I have written the following contact form validation script. How can I validate a email field?
我编写了以下联系表单验证脚本。如何验证电子邮件字段？
<style type="text/css">
div.contactForm { width:370px; margin:0 auto; }
form.contactUs label { display:block; }
form.contactUs input { margin-bottom:10px; }
input.submit { margin-top:10px; }
input.error { background:#FF9B9B; border:1px solid red; }
div.errorMessage { color:#f00; padding:0 0 20px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.errorMessage').hide();
$('.submit').click(function() {
var name = $('input.name').val();
var email = $('input.email').val();
var phone = $('input.phone').val();
if (name == '') {
$('input.name').addClass('error');
$('input.name').keypress(function(){
$('input.name').removeClass('error');
});
}
if (email == '') {
$('input.email').addClass('error');
$('input.email').keypress(function(){
$('input.email').removeClass('error');
});
}
if (phone == '') {
$('input.phone').addClass('error');
$('input.phone').keypress(function(){
$('input.phone').removeClass('error');
});
}
if (name == '' || email == '' || phone == '') {
$('.errorMessage').fadeIn('medium');
return false;
}
});
});
</script>
<div class="contactForm">
<h2>Contact Us</h2>
<div class="errorMessage">Please enter all required fields.</div>
<form action="http://google.com" method="post" class="contactUs">
<label>Name <em>(required)</em></label>
<input type="text" name="name" class="name" size="30" />
<label>Email <em>(valid email required)</em></label>
<input type="text" name="email" class="email" size="30" />
<label>Phone <em>(required)</em></label>
<input type="text" name="phone" class="phone" size="30" />
<label>Message</label>
<textarea name="message" cols="40" rows="10"></textarea>
<br />
<input type="submit" name="submit" value="Submit" class="submit" />
</form>
</div><!--contactForm-->
EDIT
编辑
By validation I mean the entered value must contain a " @ " and a " . " at proper place.
通过验证，我的意思是输入的值必须在适当的位置包含“@”和“.”。
Also I don't want to use any additional plugins.
另外我不想使用任何额外的插件。
回答by Robert
You can use RegEx if you don't want to use any plugins.
如果您不想使用任何插件，可以使用 RegEx。
var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(valueToTest))
// Do whatever if it passes.
else
// Do whatever if it fails.
This will get you most emails. An interesting read about validating emails with RegEx.
这将使您收到最多的电子邮件。关于使用 RegEx 验证电子邮件的有趣阅读。
You can test the script here: http://jsfiddle.net/EFfCa/
您可以在这里测试脚本：http: //jsfiddle.net/EFfCa/
回答by CIRCLE
If you really don't want to use a plugin I've found this method to be quite good:
如果你真的不想使用插件，我发现这个方法非常好：
function validateEmail(email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if( !emailReg.test( email ) ) {
return false;
} else {
return true;
}
}
http://thejimgaudet.com/articles/support/web/jquery-e-mail-validation-without-a-plugin/
http://thejimgaudet.com/articles/support/web/jquery-e-mail-validation-without-a-plugin/
回答by andandandand
I'm currently using ketchupfor form validation. There's also bassassist's plugin. Check a plugin, it will save you hours of regex-writing code.
我目前正在使用番茄酱进行表单验证。还有basassist的插件。检查一个插件，它将为您节省数小时的正则表达式编写代码。
回答by marcofang
Change your input.emailblock as this:
将您的input.email块更改为：
if (email == '') {
$('input.email').addClass('error');
$('input.email').keypress(function(){
$('input.email').removeClass('error');
});
$('input.email').focusout(function(){
$('input.email').filter(function(){
return this.value.match(/your email regex/);
}).addClass('error');
});
}
Explaination:
Add focusout action to input.emailform element, validates the email string using RFC822 standard. If it can't pass then add the 'error' class.
说明：向input.email表单元素添加焦点操作，使用 RFC822 标准验证电子邮件字符串。如果它不能通过，则添加“错误”类。
I have not tested this on my browser but it should work for jQuery > 1.4.
我没有在我的浏览器上测试过这个，但它应该适用于 jQuery > 1.4。
EDIT: I've removed the regex, place your favorite one there.
编辑：我已经删除了正则表达式，把你最喜欢的放在那里。
