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();
    }
}