简化表单验证

我有一个包含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(""); 

});

来源

2014-10-03 ray9209

也许使用像插件[jQuery的验证（http://jqueryvalidation.org/） – Barmar 2014-10-03 02:48:22

如果你不满意目前的答案，随意添加到您的html，使人们可以更具体和有一个更好的图片 – 2014-10-03 04:52:52

//试试这个。

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

/** 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/

来源

2014-10-03 03:18:51

如果函数在多个相似的字段上做同样的事情，最好只写一个函数。我认为每个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(""); 
     } 
    } 
}

来源

2014-10-03 03:12:41 Sean

简化表单验证

回答

相关问题