簡化表單驗證

我有一個包含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

簡化表單驗證

回答

相關問題