Javascript 使用jQuery验证表单

单击表单提交按钮时，将调用验证所有字段的函数。但是，如果验证失败，则不会发生任何事情

我正在使用

mailto:

作为我的行动，这会有什么不同吗？
我想澄清两件事：

单击submit按钮时，这是调用函数的正确方法吗

$(document).ready(function(){
    $('#contactForm').submit(function(){
        checkMail();
    });
});

即使使用了

mailto:

，我仍然可以验证字段吗

以下是代码的其余部分：

function checkEmail(){
    var email = document.contact.email.value;

    if(email == "") {
        document.getElemtById("email_error").innerHTML = "No Email Address";
        return false;
    }
    else {
        document.getElementById("email_error").innerHTML = ""
        return true;
    }
}

HTML:

电子邮件

此外，我在单击“提交”时没有收到错误消息。

以下是您需要的：

$(document).ready(function(){
   $('#contactForm').submit(function(){
       if (!validate()) {
           return false; // Prevent the submit
       }
   });
});

---

否，如果验证失败，则需要事件处理程序

返回false

。这将阻止执行操作，即邮件程序被启动

我们可以通过调用事件对象上的.preventDefault（）或通过处理程序返回false来取消提交操作

修改如下：

$(document).ready(function(){
    $('#contactForm').submit(function(){
        return validate();
    });
});

当然，这意味着如果验证失败，

validate（）

函数需要实际返回

false

，否则返回

true

进一步您的

标签上缺少

id=“contactForm”

此外，您还需要正确获取电子邮件值：

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

还有一个错误：您拼错了

getElementById（）

。下面是一个更正的版本：

function checkEmail() {
    var email = $("#email").val();

    if (email == "") {
        document.getElementById("email_error").innerHTML = "No Email Address";
        return false;
    }
    else {
        document.getElementById("email_error").innerHTML = ""
        return true;
    }
}

或者，使用所有jQuery：

function checkEmail() {
    var email = $("#email").val();
    var $error = $("#email_error");
    if (email == "") {
        $error.html("No Email Address");
        return false;
    }
    else {
        $error.html("");
        return true;
    }
}

---

为了验证表单的字段，在发送表单之前，可以使用jQuery的验证插件：

$(document).ready(function(){

    $("#contactForm").validate({
        submitHandler: function(form) {
            // some other code
            // maybe disabling submit button
            // then:
            $(form).submit();
        }
    });

});

---

有关更多信息和示例，请查看联机文档：

您不需要使用

if

来决定返回哪个布尔值。@phant0m这两种方法都是一样的。感谢您提供的信息，因此返回函数（return validate（）；）可以阻止默认操作吗？那么就不需要返回false了？@richleiss我假设

validate（）

函数在验证失败时返回false。然后它充当

返回false

。编辑：澄清。有些东西仍然不起作用，我要稍微编辑一下我的帖子，你介意看一下吗？抱歉，最后有点困惑。我的理解是（这是错误的）$（'#contactForm'）.submit（function（）选择此元素输入id=“contactForm”type=“submit”value=“submit”>啊，现在我明白了，非常感谢你的帮助，更干净的方式获取电子邮件的价值，也将保留在内存银行，不能感谢你，你需要提供更多的HTML，即表单标签。

$(document).ready(function(){

    $("#contactForm").validate({
        submitHandler: function(form) {
            // some other code
            // maybe disabling submit button
            // then:
            $(form).submit();
        }
    });

});