使用javascript提交表单验证

Question

我想在用户提交表单时使用javascript验证表单，这是我的代码，

 document.getElementById("form").addEventListener("submit", function(event){ var elements = document.getElementById("form").elements; var error = 0; for(var i = 0; i < elements.length; i++) { //code if(elements[i].type == "checkbox" || elements[i].type == "radio") { var check_box = document.getElementById(elements[i].id).checked; if (check_box == false) { //code error++; var checkbox_div = elements[i].parentNode.parentNode.id; produce_warning("you must agree to proceed", checkbox_div, elements[i].id); } } else { if (elements[i].value == "" || elements[i].value == null) { //code error++; produce_warning("you can not leave this field empty", elements[i].parentNode.id, elements[i].id); } } } if (error > 0) { //code event.preventDefault(); } else{ return true; } }); 

这里event.preventDefault（）语句未执行，请帮助我谢谢。

Answer 1

该问题似乎是由于在回调函数中使用了参数event而引起的，请尝试使用evt ，在此处进行演示： https : //jsfiddle.net/5c4gw4st/1/

document.getElementById("form").addEventListener("submit", function(evt){
    var elements = document.getElementById("form").elements;
    var error = 0;
    for(var i = 0; i < elements.length; i++)
    {
            //code
            if(elements[i].type == "checkbox" || elements[i].type == "radio") {
                var check_box = document.getElementById(elements[i].id).checked;
                  if (check_box == false) {
                      //code
                      error++;
                      var checkbox_div = elements[i].parentNode.parentNode.id;
                      produce_warning("you must agree to proceed", checkbox_div, elements[i].id);
                  }
            }

            else {
                if (elements[i].value == "" || elements[i].value == null) {
                    //code
                    error++;
                    produce_warning("you can not leave this field empty", elements[i].parentNode.id, elements[i].id);
                }

            }
    }

    if (error > 0) {
        //code
        evt.preventDefault();
    }
    else{
        return true;
    }

});

Answer 2

尝试使用括号表示法：

if (error > 0) {
     //code
     event[preventDefault()];
}

还要检查事件是否是对象。