Javascript 电子邮件验证Jquery不工作

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

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

我做过这样一个函数：

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 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");
            }
        });
    }
}

然后我在我的

setupRegistration

函数中调用该函数

我的JS看起来像这样：

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 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");
            }
        });
    }
}

---

在此处删除

false

if(!IsEmail(email){

和

regex

应该是

regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

---

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

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

我在下面提供了一个代码示例，以表明您的电子邮件验证（没有Ajax调用）是有效的。我已经包括了@Abdulla建议的

if（！IsEmail（email）{

fix，我还从中添加了一个更复杂的正则表达式

功能电子邮件（电子邮件）{
//变量正则表达式=/^（[a-zA-Z0-9\.-\+]）+\@（[a-zA-Z0-9\-]）+）+（[a-zA-Z0-9]{2,4}）+$/；
//使用更高级的正则表达式可以有效处理99.99%的大多数电子邮件，请参阅https://stackoverflow.com/questions/46155/validate-email-address-in-javascript
var regex=/^[a-z0-9！#$%&'*+/=？^{{{124;}-]+（？：\.[a-z0-9！{35;$%&'*+/=？^{{124;}-]+*（[a-z0-9]（？：[a-z0-9-]*[a-z0-9]）+[a-z0-9]（？：[a-z0-z0-9-]）+[a-z0-9]。]；
如果（！正则表达式测试（电子邮件））{
返回false；
}否则{
返回true；
}
}
函数doOutputMessage（类型，消息）{
$（“#outputMessage”）.html（“”）；
$（“#outputMessage”）.removeClass（）；
$（“#outputMessage”）.hide（）；
如果（类型==“错误”）{
$（“#outputMessage”）.addClass（“error”）.fadeIn（“fast”）；
}else if（类型=“成功”）{
$（“#outputMessage”）.addClass（“success”）.fadeIn（“fast”）；
}
$（“#输出消息”）。文本（消息）；
$（“#outputMessage”）.show（）；
}
//如果我是约翰。doe@stackoverflow.com')) {
//doOutputMessage（'成功'，'有效电子邮件'）
//}
如果（！IsEmail（'john.doe#stackoverflow.com'））{
doOutputMessage（'错误'，'无效电子邮件'）
}

测试

使用以前的一些建议，但也要改变这一点，错误不会停止ajax调用：

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

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

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

请尝试：

function IsEmail(email){
    var reg = /^[a-zA-Z0-9\.\-\+]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/
    return reg.test(email)
}

---

只要试着使用

if（！IsEmail（email））{

而不是

if（IsEmail（email）==false）{

就可以了，正则表达式应该是：/^（[\w-\.]+@（[\w-]+\]+[\w-]{2,4}）？$/其他表单验证是否有效？@DavidSkx是的，其他一切都有效。您可以在此处查看：regform.jonasalvarson.see即使iEmail为false，它也会显示错误，但不会停止Ajax调用：if（username！=“”&&email！=“”&&password！=“”）{ajaxCall（用户名、电子邮件、密码）；}我测试了你的链接登录表单验证中有错误。修复这个问题。我测试了你的解决方案，但它似乎不起作用。我在这里遗漏了什么吗..现场演示：（进行硬刷新，在代码中做了一些更改）尝试使用此

if（IsEmail（email）==false）{

错误没有停止ajax调用。但我认为@Mario Chueca有解决方案：）？是的ofc..ajaxcall已经完成了，修复了这个问题。现在它工作了。THX！这个工作了。添加了&&IsEmail（电子邮件）因此，即使邮件有误，我们也不会发出ajaxCall。谢谢大家的帮助。我对jquery很陌生，但我每天都在学习。困难的部分是代码的结构太好了。感觉就像我只是随机放置代码，没有任何结构。但也许我会在编写代码时学会这样做？