如何验证JQuery中的电子邮件？ [英] How to validate email in Jquery?

问题描述

我写了下面的联系表单验证脚本。如何验证电子邮件字段？

 < style type =text / css> 
 div.contactForm {width：370px;保证金：0汽车; } 
 form.contactUs label {display：block; } 
 form.contactUs input {margin-bottom：10px; } 
 input.submit {margin-top：10px; } 
 input.error {background：＃FF9B9B;边框：1px纯红色; } 
 div.errorMessage {color：＃f00; padding：0 0 20px; } 
< / style> 
 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js><<< ; /脚本> 
 
< 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'） ; 
返回false; 
} 
 
}）; 
}）; 
< / script> 
 
< div class =contactForm> 
 
< h2>联络我们< / h2> 
 
< div class =errorMessage>请输入所有必填字段。< / div> 
 
< form action =http://google.commethod =postclass =contactUs> 
 
< label>名称< em>（必填）< / em>< / label> 
< input type =textname =nameclass =namesize =30/> 
 
< label>电子邮件< em>（需要有效的电子邮件）< / em>< / label> 
< input type =textname =emailclass =emailsize =30/> 
 
< label>电话< em>（必填）< / em>< / label> 
< input type =textname =phoneclass =phonesize =30/> 
 
< label>讯息< / label> 
< textarea name =messagecols =40rows =10>< / textarea> 
 
< br /> 
< input type =submitname =submitvalue =Submitclass =submit/> 
 
< / form> 
 
< / div><！ -  contactForm  - > 
  

编辑

验证我的意思是输入的值必须在适当的位置包含@和。。

另外我不想使用任何额外的插件。 $ b

解决方案

如果您不想使用任何插件，则可以使用RegEx。

  var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9 - ] + \）+ [AZ] {2,4} $ / I; 
 if（testEmail.test（valueToTest））
 //做任何事情，如果它通过。 
 else 
 //如果失败，请做任何事情。 
  

这会为您带来大部分电子邮件。有关使用RegEx验证电子邮件的有趣阅读

你可以在这里测试脚本： http://jsfiddle.net/EFfCa/

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.

解决方案

You can use RegEx if you don't want to use any plugins.

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.

You can test the script here: http://jsfiddle.net/EFfCa/

这篇关于如何验证JQuery中的电子邮件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！