Javascript 表单验证jQueryAjax

我需要做一个简单的联系方式。我是Javascript的新手。我为新手尝试了很多教程，但没有一个教程解决了我的问题，所以我尝试制作自己的JS

但它有两个问题：

发送的表单为空，但验证不正确 如果验证失败，它应该同时返回所有错误 $submit.clickfunction{ 如果验证{ $.post$contact-form.attraction， $contact form:input.serializeArray， 功能信息{ $f1Err.empty； $f1Err.htmlinfo； $f2Err.empty； $f2Err.htmlinfo； $f3Err.empty； $f3Err.htmlinfo； $f4Err.empty； $f4Err.htmlinfo； 清楚的 }; $contact-form.submitfunction{ 返回false； }; } }; 功能验证{ 如果$f1.val=={ 需要$f1Err.htmlName； 返回false； } 如果$f2.val=={ 需要$f2Err.htmlE-mail； 返回false； } 变量re=/^[^[]\；：s@]+.[^[]\；：s@]+*.+[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[a-zA-Z-0-9]+.+.[a-zA-Z]{2，}/igm； 如果！重新测试$f2.val{ $f2Err.htmlin正确的电子邮件格式； 返回false； } 如果$f3.val=={ $f3Err.htmlMessage主题是必需的； 返回false； } 如果$f4.val=={ 需要$f4Err.htmlMessage； 返回false； } 返回true； } 功能清晰{ $contact form:input.eachfunction{ $this.val； }; } 名称 电子邮件 消息主题 消息

---

让我们从first click函数和submit函数开始，您没有使用preventedDefault来阻止您提供的submit输入的默认方法，因此您需要像这样防止正在发送的事件的默认方法

$("#submit").click(function (e) {
e.preventDefault();
if (validate()) {
    $.post($("#contact-form").attr("action"),
    $("#contact-form :input").serializeArray(),

    function (info) {

        $("#f1Err").empty();
        $("#f1Err").html(info);
        $("#f2Err").empty();
        $("#f2Err").html(info);
        $("#f3Err").empty();
        $("#f3Err").html(info);
        $("#f4Err").empty();
        $("#f4Err").html(info);
        clear();
    });

    $("#contact-form").submit(function () {
        return false;
    });
}

});

正如方法名称所示，它会阻止默认行为的运行。接下来在验证方法中，在检查字段后返回false，因此一旦其中一个验证失败，就返回。也许您应该返回一个标志，如下所示：

function validate() {
      var flag = true;
if ($("#f1").val() == "") {
    $("#f1Err").html("Name is requied");
    flag = false;
}
if ($("#f2").val() == "") {
    $("#f2Err").html("E-mail is requied");
    flag = false;
}

var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/igm;

if (!re.test($("#f2").val())) {
    $("#f2Err").html("Incorrect e-mail format");
    flag = false;
}

if ($("#f3").val() == "") {
    $("#f3Err").html("Message subject is requied");
    flag = false;
}
if ($("#f4").val() == "") {
    $("#f4Err").html("Message is requied");
    flag = false;
}

return flag;
}

我认为你应该解决两个最大的问题，你指出的是错误的。这不一定是最好的实现和变量名，我将留给您学习和改进它。在验证每个输入之前，我将errors设置为false，然后对于每个检查，如果为空，我将error设置为true。确保在运行时检查控制台是否存在错误。我为每个检查添加了一个console.log。如果没有错误，发送并清除表单

$("#submit").click(function(event) {
        event.preventDefault();


        var hasError = false;
        var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/igm;


        if ($("#f1").val() == "") {
            hasError = true;
            $("#f1Err").html("Name is required");
        }
        console.log($("#f1").val());

        if ($("#f2").val() == "") {
            hasError = true;
            $("#f2Err").html("E-mail is required");
        }
        console.log($("#f2").val());

        if (!re.test($("#f2").val())) {
            hasError = true;
            $("#f2Err").html("Incorrect e-mail format");
        }
        console.log($("#f3").val());

        if ($("#f3").val() == "") {
            hasError = true;
            $("#f3Err").html("Message subject is required");
        }
        console.log($("#f3").val());

        if ($("#f4").val() == "") {
            hasError = true;
            $("#f4Err").html("Message is required");
        }
        console.log($("#f4").val());

       if(!hasError){
         console.log('no errors');
         //send your form
         $.ajax({
            url: 'url-here',
            type: 'post',
            dataType: 'json',
            action : 'submit',
            data: $('#contact-form').serialize(),
            success: function(response) {
                console.log(response);
                //do something
                clear();
            }
         });
      } else {
         console.log('something is up');
      }


     function clear() {
        $("#contact-form :input").each(function () {
            $(this).val("");
        });
     }

  });

---

寻求调试帮助的问题此代码为什么不起作用？必须包括想要的行为，一个特定的问题或错误，以及在问题本身中复制它所需的最短代码。真的不清楚你在问什么。对不起，我的英语不好。1.问题：虽然表单是空的，但是表单被发送了。我想指出，AEA将验证留在函数中的方式很好，这实际上更好，因为它更模块化，他可以在任何地方使用验证。尽管它可以更加模块化。虽然你写的没有错，很好，谢谢。不幸的是，表单仍然被发送，尽管它是空的。在JSFIDLE中，一切似乎都正常。我不支持它。@AEA因为如果验证没有问题，您仍然在提交表单？然后在文章中，你正在序列化一个数组，当预期的数据在对象表单中时，我不知道问题出在哪里，解决这个问题3个小时后，也许我更愿意使用纯基于PHP的解决方案。但是谢谢你的帮助。@AEA祝你好运。我认为在你的空闲时间尝试和调试一些问题是值得的，特别是serilizeArray，因为javascript是web的一个相当大的部分，不管你喜欢与否。此外，它还将帮助您更好地进行编程：