javascript - 提交前验证表单

Question

我可以提交一个表单并在 javascript 中使用一个简单的匿名函数来验证它，

 document.getElementById('myForm').onsubmit = function() {
     if(document.getElementById('email').value == "") {
         document.getElementById('errormessage').innerHTML = "Please provide at least an email address";
         return false;
     } else {
         return true; // Note this
     }
 };

在上面使用匿名函数的例子中，我可以在提交文档时简单地分配返回值并阻止页面被提交，而在下面的例子中我使用 addEventListener 添加事件提交表单，并由验证功能进一步评估。我还将返回值设置为 true 或 false，但这种方法似乎不起作用并且页面已提交。我认为我返回值是错误的

function addEventHandler(node, evt, func) {
    if(node.addEventListener)
        node.addEventListener(evt, func);
    else
        node.attachEvent("on" + evt, func);
}
function initializeAll() {
    addEventHandler(document.getElementById('myform'), 'submit', validate);
}
function validate() {
    if(document.getElementById('email').value == ""){
        document.getElementById("errormessage").innerHTML = "Please provide at least an email ";
        return false;
    } else {
        return true;
    }
}
addEventHandler(window, 'load', initializeAll);

这种方式应该如何返回值，才能防止表单提交或提交表单？

Answer 1

你在 jQuery 下发布了这个问题，所以我会为你提供一个 jQuery 解决方案:

$('#myform').on('submit', function () {
    if($('#email').val() == ""){
        $('#errormessage').html("Please provide at least an email ");
        return false;
    } else {
        return true;
    }
});

请注意，我使用了 jQuery 1.7 .on() 函数，在本例中它替换了早期版本的 .bind() 函数。

--更新--

这是上述解决方案的 jsfiddle:http://jsfiddle.net/jasper/LmaYk/