如何减少代码中的冗余？ [JS]

Question

我不是 js 专家，所以我的代码很乱（但它可以工作！）。我想请你帮忙在两种情况下减少一些冗余。这两个代码正在影响这两种形式：

<form action="contact.php" method="post" name="form1" onsubmit="return validateForm1()">
    <input type="text" name="name" id="inputName1" placeholder="Name">
    <input type="text" name="tel" id="inputTel1" placeholder="Telephone Number">
    <input type="text" name="address" id="inputAdr1" placeholder="Address">
    <input type="text" name="topic" id="inputTop1" placeholder="Topic">
    <input type="email" name="email" id="inputMail1" placeholder="E-mail">
    <input type="email" id="inputConfirmMail1" onblur="mailConfirm1()" placeholder="Confirm E-mail">
    <input type="submit" value="Send">
</form>

<form action="contact.php" method="post" name="form2" onsubmit="return validateForm2()">
    <input type="text" name="name" id="inputName2" placeholder="Name">
    <input type="text" name="tel" id="inputTel2" placeholder="Telephone Number">
    <input type="text" name="address" id="inputAdr2" placeholder="Address">
    <input type="text" name="topic" id="inputTop2" placeholder="Topic">
    <input type="email" name="email" id="inputMail2" placeholder="E-mail">
    <input type="email" id="inputConfirmMail2" onblur="mailConfirm2()" placeholder="Confirm E-mail">
    <input type="submit" value="Send">
</form>

FIRST（防止我的两个表单在提交前输入为空的功能）

function validateForm1() {
    var c = document.forms["form1"]["name"].value;
    var d = document.forms["form1"]["tel"].value;
    var e = document.forms["form1"]["address"].value;
    var f = document.forms["form1"]["topic"].value;
    var g = document.forms["form1"]["email"].value;
    if (c == null || c == "") {
            alert("insert your name");
            return false;
        }
        else if (d == null || d == "") {
            alert("insert your telephone");
            return false;
        }
        else if (e == null || e == "") {
            alert("insert your address");
            return false;
        }
        else if (f == null || f == "") {
            alert("insert a topic");
            return false;
        }
        else if (g == null || g == "") {
            alert("insert your email");
            return false;
        }
    }
    function validateForm2() {
        var c = document.forms["form2"]["name"].value;
        var d = document.forms["form2"]["tel"].value;
        var e = document.forms["form2"]["address"].value;
        var f = document.forms["form2"]["topic"].value;
        var g = document.forms["form2"]["email"].value;
        if (c == null || c == "") {
            alert("insert your name");
            return false;
        }
        else if (d == null || d == "") {
            alert("insert your telephone");
            return false;
        }
        else if (e == null || e == "") {
            alert("insert your address");
            return false;
        }
        else if (f == null || f == "") {
            alert("insert a topic");
            return false;
        }
        else if (g == null || g == "") {
            alert("insert your email");
            return false;
        }
    }

SECOND（我的表单中有一个 "confirm your email" 区域，所以我执行此功能以确保用户在两个区域中输入相同的值）

function mailConfirm1() {
    var mail1 = document.getElementById("inputMail1").value;
    var conMail1 = document.getElementById("inputConfirmMail1").value;
    if(mail1 != conMail1) {
        alert('both emails are not the same');
    }
}
function mailConfirm2() {
    var mail2 = document.getElementById("inputMail2").value;
    var conMail2 = document.getElementById("inputConfirmMail2").value;
    if(mail2 != conMail2) {
        alert('both emails are not the same');
    }
}

Answer 1

无论如何，这里你有一些优化：

function validateForm(form){
    var c = document.forms[form]["name"].value;
    var d = document.forms[form]["tel"].value;
    var e = document.forms[form]["address"].value;
    var f = document.forms[form]["topic"].value;
    var g = document.forms[form]["email"].value;
    if (c == null || c == "") {
            alert("insert your name");
            return false;
        }
        else if (d == null || d == "") {
            alert("insert your telephone");
            return false;
        }
        else if (e == null || e == "") {
            alert("insert your address");
            return false;
        }
        else if (f == null || f == "") {
            alert("insert a topic");
            return false;
        }
        else if (g == null || g == "") {
            alert("insert your email");
            return false;
        }
}

function mailConfirm(formNum){
    var mail = document.getElementById("inputMail"+formNum).value;
    var conMail = document.getElementById("inputConfirmMail"+formNum).value;
    if(mail != conMail) {
        alert('both emails are not the same');
    }
}

form{
  padding: 1.2rem;
}

<form action="contact.php" method="post" name="form1" onsubmit="return validateForm('form1')">
    <input type="text" name="name" id="inputName1" placeholder="Name">
    <input type="text" name="tel" id="inputTel1" placeholder="Telephone Number">
    <input type="text" name="address" id="inputAdr1" placeholder="Address">
    <input type="text" name="topic" id="inputTop1" placeholder="Topic">
    <input type="email" name="email" id="inputMail1" placeholder="E-mail">
    <input type="email" id="inputConfirmMail1" onblur="mailConfirm(1)" placeholder="Confirm E-mail">
    <input type="submit" value="Send">
</form>

<form action="contact.php" method="post" name="form2" onsubmit="return validateForm('form2')">
    <input type="text" name="name" id="inputName2" placeholder="Name">
    <input type="text" name="tel" id="inputTel2" placeholder="Telephone Number">
    <input type="text" name="address" id="inputAdr2" placeholder="Address">
    <input type="text" name="topic" id="inputTop2" placeholder="Topic">
    <input type="email" name="email" id="inputMail2" placeholder="E-mail">
    <input type="email" id="inputConfirmMail2" onblur="mailConfirm(2)" placeholder="Confirm E-mail">
    <input type="submit" value="Send">
</form>

如何减少代码中的冗余？ [JS]

How can I reduce the redundancies in my code? [JS]

javascript

forms

optimization

jquery

redundancy