Question

我有一个包含5个输入字段的表单（4个文本输入，1个复选框），我编写了这段代码来处理输入字段中缺少的信息。代码工作正常，但似乎重复和低效。有没有更简单的方法来编写这段代码？

$("#main-form").on('submit', function(event) {

if (!$("#field1").val()) {
event.preventDefault();
$("#field1-error").html("Error!");
}
else
$("#field1-error").html("");

if (!$("#field2").val()) {
event.preventDefault();
$("#field2-error").html("Error");
}
else
$("#field2-error").html("");

if (!$("#field3").val()) {
event.preventDefault();
$("#field3-error").html("Error");
}
else
$("#field3").html("");

if (!$("#field4").val() && !$("#checkbox1").prop('checked')) {
event.preventDefault();                                       
$("#field4-error").html("Error");
}
else
$("#field4-error").html("");

});

Answer 1

如果函数在多个相似字段上执行相同操作，则最好只编写一个函数。我认为每个Javascript工程师都会在某个方面撞到墙上，试图想出一个更流畅的方式运行表单验证。

对于这种情况，我会编写函数并在需要时调用它。试试这个：

$("#main-form").on('submit', function(event) {
  myValidations.contentsPresent('#field1', '#field1-error');//call the first field validaitions
  myValidations.contentsPresent('#field2', '#field2-error');//second
  //third 
  //etc
});

var myValidations = 
{
    contentsPresent: function(fieldId, errorId)
    {
        if (!$(fieldId).val()) {
            event.preventDefault();
            $(errorId).html("Error!");
        }       
        else
            $(errorId).html("");
        }
    },
    contentsPresentCheckBox: function(fieledId, checkboxId, errorId)
    { 
        if (!$(fieledId).val() && !$(checkboxId).prop('checked')) {
            event.preventDefault();                                       
            $(errorId).html("Error");
        }
        else
            $(errorId).html("");
        }
    }
}

Answer 2

//试试这个。

（文档）$。就绪（函数（）{

    /** Form Validation */
    $("#formId").validate({
        rules: {
             field1:{ required: true },
             field2:{ required: true },
             field3:{ required: true },
             field4:{ required: true }
        },
        messages: {
             field1:{ required: 'Field1 is required!' },
             field2:{ required: 'Field2 is required!' },
             field3:{ required: 'Field3 is required!' },
             field4:{ required: 'Field4 is required!' }
        }

        // Submit function

}）;

//这是一个简单的jquery表单验证，但您需要包含jquery验证插件。 http://jqueryvalidation.org/

简化表单验证

2 个答案: