Javascript/jQuery表單驗證

Question

嘿傢伙。我目前使用非常低效的腳本來驗證我的表單。代碼非常龐大。

這樣做的想法是，如果輸入框爲空，輸入標籤將突出顯示爲紅色，並在窗體的頂部顯示div的錯誤信息。

function new_receiver(){ 


if (document.getElementById("RecieversName").value ==""){ //First Name 

     var txt=document.getElementById("error_receiver"); 
     txt.innerHTML="<p><font color=\"#FF0000\">You need to enter a Name!</font></p>";  
     window.document.getElementById("RecieversName_label").style.color = '#FF0000'; 

     //Reset 
     window.document.getElementById("receiver_check_label").style.color = '#000000'; 
     window.document.getElementById("RecieversNumber_label").style.color = '#000000'; 
     window.document.getElementById("RecieversEmail_label").style.color = '#000000'; 

}else if (document.getElementById("RecieversNumber").value ==""){ //First Name 

     var txt=document.getElementById("error_receiver"); 
     txt.innerHTML="<p><font color=\"#FF0000\">You need to enter a Phone Number!</font></p>";  
     window.document.getElementById("RecieversNumber_label").style.color = '#FF0000'; 

     //Reset 
     window.document.getElementById("receiver_check_label").style.color = '#000000'; 
     window.document.getElementById("RecieversName_label").style.color = '#000000'; 
     window.document.getElementById("RecieversEmail_label").style.color = '#000000' 

}else if (document.getElementById("RecieversNumber").value ==""){ //First Name 

     var txt=document.getElementById("error_receiver"); 
     txt.innerHTML="<p><font color=\"#FF0000\">You need to enter an Email!</font></p>"; 
     window.document.getElementById("RecieversEmail_label").style.color = '#FF0000'; 

     //Reset 
     window.document.getElementById("receiver_check_label").style.color = '#000000'; 
     window.document.getElementById("RecieversName_label").style.color = '#000000'; 
     window.document.getElementById("RecieversNumber_label").style.color = '#000000'; 


}else{ 
from.receiver.submit(); 

}」

任何意見或方法來使這個過程容易，因爲我的一些形式最多有9個輸入框和這種驗證方法是巨大的！

乾杯人！

塞繆爾。

Answer 1

一個建議，我認爲是這樣的：

function new_receiver() { 
    var inputs = [ 
     { 
      id: "RecieversName", 
      name: "a Name" 
     }, 
     { 
      id: "RecieversNumber", 
      name: "a Phone Number" 
     } 
     // add more here 
    ], 
    length = inputs.length, 
    error = document.getElementById("error_receiver"), 
    hasError = false, 
    i; 

    // reset 
    for (i = 0; i < length; i++) { 
     document.getElementById(inputs[i].id + "_label").style.color = "#000000"; 
    } 
    error.innerHTML = ""; 

    for (i = 0; i < length; i++) { 
     if (document.getElementById(inputs[i].id).value == "") { 
      error.innerHTML = "<p><font color=\"#FF0000\">You need to enter " + inputs[i].name + "!</font></p>";  
      document.getElementById(inputs[i].id + "_label").style.color = "#FF0000"; 
      hasError = true; 
      break; 
     } 
    } 

    if (!hasError) { 
     from.receiver.submit(); 
    } 
} 

Answer 2

你可以使用jQuery驗證插件http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 3

你可以嘗試這樣的

$('input').blur(function() { 
    if($(this).val()==""){ 
      $("#error_receiver").html("<p><font color=\"#FF0000\">This field is required!"); 
      $("label[for=' + this.attr("id") + ']").css('color', '#FF0000'); 
     } 
    }); 

Answer 4

的東西在這裏開始是沒有的jQuery

<form onsubmit="return new_receiver()"> 
. 
. 

var formFields = { 
    "RecieversName": "You need to enter a Name!", 
    "RecieversNumber":"You need to enter a Number!", 
    "RecieversEmail":"You need to enter an Email!" 
} 
function new_receiver(){ 
    var txt=document.getElementById("error_receiver"); 
    //Reset 
    txt.innerHTML=""; 
    for (var o in formFields) document.getElementById(o+"_label").style.color = '#000000'; 

    for (var o in formFields) { 
    if (document.getElementById(o).value ==""){ 
     txt.innerHTML="<p><font color=\"#FF0000\">"+formFields[o]+"</font></p>";  
     window.document.getElementById(o+"_label").style.color = '#FF0000'; 
     return false; 
    } 
    } 
    return true 
}