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 
}