电子邮件验证 | jQuery答案

【问题标题】：Email Validation | Jquery电子邮件验证 | 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。

请赐教！

提前谢谢你。

【问题讨论】：

相关：stackoverflow.com/questions/201323/…
但与您的条件问题有关，email = $(".email").val(); 设置在逻辑的开头。它永远不会更新。
你用什么电子邮件测试它？因为你的正则表达式有明显的错误。
/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+)(\.[a-zA-Z0-9]+)+$/g refiddle.com/refiddles/5a8b348575622d0da7370000
我不建议在 JavaScript 中进行表单验证。因为它可以被用户操纵，并且仍然向您的数据库发送潜在危险的输入。

标签： javascript jquery forms validation email

【解决方案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;


    }
});

【讨论】：