javascript - 电子邮件验证 Jquery 不工作

Question

我一直在研究一个简单的电子邮件验证。但它不起作用。

知道为什么它不起作用吗？我是在做错什么，还是应该以其他方式构建我的代码？

我做了一个这样的函数:

function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if(!regex.test(email)) {
        return false;
    } else {
        return true;
    }
}

然后我在我的 setupRegistration 函数中调用该函数。

我的 JS 看起来像这样:

function doOutputMessage(type, message){
    $("#outputMessage").html("");
    $("#outputMessage").removeClass();
    $("#outputMessage").hide();
    if(type == "error") {
        $("#outputMessage").addClass("error").fadeIn("fast");
    } else if(type == "success") {
        $("#outputMessage").addClass("success").fadeIn("fast");
    }

    $("#outputMessage").text(message);
    $("#outputMessage").show();
}

function setupRegistration(){

    $("#signupWrapper").on("click", "#regUser", function(){
        var username = $("input[name='username']").val();
        var email = $("input[type='email']").val();
        var password = $("input[type='password']").val();

        if(username == ""){
            doOutputMessage("error", "Fill in your desired username!");
        }

        if(email == ""){
            doOutputMessage("error", "Fill in your email!");
        }

        if(IsEmail(email)==false){
            doOutputMessage("error", "mailen är fel förfan");
        }

        if(password == ""){
            doOutputMessage("error", "Fill in your desired password!");
        }

        if(username != "" && email != "" && password != ""){
            ajaxCall(username, email, password);
        }   
    });
}

function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if(!regex.test(email)) {
       return false;
    }else{
       return true;
    }
}


function ajaxCall(username, email, password){
    $.ajax({
        type: 'POST',
        url: '../register.php',
        data:   {
            'username' : username,
            'email' : email,
            'password' : password,
        },
        success: function(data) {
            if(data.exists){
                doOutputMessage("error","That Username is allready taken.");
            } else if(data.inserted) {
               doOutputMessage("success","You have successfully been registered!");
            }else {
                doOutputMessage("error","Something went wrong, try again later.");
            }
        }
    });
}

$(document).ready(function(){
    setupRegistration();
});


function regSubmit(){

    clearErrorMessages();

    var username = $("#regForm #username").val();
    var email = $("#regForm #email").val();
    var password = $("#regForm #password").val();

    if(username == ""){
        showValidationMessage("#regForm #error_username", "Fill in your desired username!");
    }

    if(email == ""){
        showValidationMessage("#regForm #error_email", "Fill in your email!");
    }

    if(password == ""){
        showValidationMessage("#regForm #error_password", "Fill in your desired password!");
    }

    if(username != "" && email != "" && password != ""){
        $.ajax({
            url:    'regLogin.code.php',
            type:   'POST',
            data:   {
                    'action'    :   'register',
                    'username'  :   username,
                    'email'     :   email,
                    'password'  :   password
                    },
            success: function(data, status){
                console.log(data);
                if(data == "exist"){
                    showValidationMessage("#regForm  #error_general", "A user with that username or password already exists!");
                }else if(data == "illegal"){
                    showValidationMessage("#regForm  #error_general", "Your username contains illegal characters!");
                }
                else if(data == "true"){
                    showValidationMessage("#regForm  #success", "Success!");
                    setTimeout(function(){
                        window.location.replace("/admin/inside/");
                    }, 1000);
                }
            },
            error: function(xhr, desc, err){
                showValidationMessage("#regForm  #error_general", "Something went wrong, please try again");
            }
        });
    }
}

Answer 1

@Mario-Chueca 是对的。您的代码大部分工作正常，但是，无论电子邮件是否正确，您都在进行 Ajax 调用，因此不会显示错误消息。您应该只在指定的电子邮件有效时才进行 ajax 调用:

if(username != "" && email != "" && password != "" && IsEmail(email)){
    ajaxCall(username, email, password);
}  

我在下面包含了一个代码示例，以显示您的电子邮件验证(没有 Ajax 调用)正在运行。我已经包含了@Abdulla 建议的 if(!IsEmail(email){ 修复，我还添加了来自此 post 的更复杂的正则表达式。

function IsEmail(email) {
  //var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  //More advanced regex to valid 99.99% of most emails in use, see https://stackoverflow.com/questions/46155/validate-email-address-in-javascript
  var regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
  if (!regex.test(email)) {
    return false;
  } else {
    return true;
  }
}

function doOutputMessage(type, message) {  
  $("#outputMessage").html("");
  $("#outputMessage").removeClass();
  $("#outputMessage").hide();
  if (type == "error") {
    $("#outputMessage").addClass("error").fadeIn("fast");
  } else if (type == "success") {
    $("#outputMessage").addClass("success").fadeIn("fast");
  }

  $("#outputMessage").text(message);
  $("#outputMessage").show();
}


//if (IsEmail('john.doe@stackoverflow.com')) {

//  doOutputMessage('success', 'valid email')
//}



if (!IsEmail('john.doe#stackoverflow.com')) {

  doOutputMessage('error', 'invalid email')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outputMessage">Test</div>