电子邮件验证 | jQuery

Posted 2023-05-09

【中文标题】电子邮件验证 | jQuery

【英文标题】：Email Validation | Jquery

【发布时间】：2018-07-30 03:01:26

【问题描述】：

我正在尝试为我的表单创建电子邮件验证，但我迷路了。

JS：

$(function () 

'use strict';
        // error variables
        var UserError  = true,
            EmailError = true,
            SubError   = true,
            MsgError   = true,
            emailReg = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]2,4)+$/,
            email = $(".email").val();


$(".email").blur(function() 

    if($(this).val() === '')

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;

        alert("1.");

     

    else if(emailReg.test(email))

       $(this).css('border','1px solid #080');
       $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300);

       EmailError = false;

       alert("2");

    

    else

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;

        alert("3");
    
);


 $('.contact-form').submit(function(event) 

     if(EmailError === true)

         event.preventDefault(); // prevent sending 
         $('.email').blur();
     


);

这样我只能得到警报 1（没有价值）或警报 3（有价值）。如果我尝试输入电子邮件，仍然会收到警报 3，这应该给我警报 2。

如果我尝试 !emailReg.test(email)，我会收到警报 2。

请赐教！

提前谢谢你。

BR

【问题讨论】：

相关：***.com/questions/201323/…

但与您的条件问题有关，email = $(".email").val(); 设置在逻辑的开头。它永远不会更新。

你用什么电子邮件测试它？因为你的正则表达式有明显的错误。

/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+)(\.[a-zA-Z0-9]+)+$/g refiddle.com/refiddles/5a8b348575622d0da7370000

我不建议在 javascript 中进行表单验证。因为它可以被用户操纵，并且仍然向您的数据库发送潜在危险的输入。

【参考方案1】：

将我的电子邮件变量转移到功能中，为我解决问题，

  $(".email").blur(function() 

    var email = $(".email").val();

    if($(this).val() === '')

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;


     

    else if(emailReg.test(email))

       $(this).css('border','1px solid #080');
       $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300);

       EmailError = false;


    

    else

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;


    
);