結合兩個javascript函數？

Question

我如何結合這兩個功能，以便它們都可以工作？ 目前，我只能讓一個人進行驗證，而不能讓另一個人進行驗證。

JAVASCRIPT的示例：

function validateForm() {

var x=document.forms["giftCert"]["gift_name"].value;

if (x==null || x=="") {

errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

return false;
  }
}

function validateForm() {

var x=document.forms["giftCert"]["gift_email"].value;

if (x==null || x=="") {

errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

return false;
  }
}

表單HTML的簡短版本：

<form action="http://ww6.aitsafe.com/cf/voucher.cfm" method="post" name="giftCert" onsubmit="return validateForm()"  />
    *Name:<input type="text" name="gift_name">
    <div id="emptyName" class="error"></div>

    *Email: <input type="text" name="gift_email">
    <div id="emptyEmail" class="error"></div>

    <input class="button" type="submit" value="Add to Cart" />

</form>

Answer 1

您可以將代碼放在相同的函數中。

function validateForm() {
    return ["Name", "Email"].every(function(type) {
        var lower_type = type.toLowerCase(),
            x=document.forms["giftCert"]["gift_" + lower_type].value;

        if (x==null || x=="")
            $("div#empty" + type).show().html("The recpient's " + lower_type + " is required.");
        else
            return true;
    });
}

由於大多數代碼幾乎是相同的，因此可以將"Name"和"Email"值放在數組中，然后循環數組，調用相同的代碼，並在需要的地方添加適當的值。

這使用Array.prototype.every來指示Array中的每個值是否通過驗證。

如果任何一項驗證失敗，則返回undefined ，循環暫停， validateForm返回false 。

每個通過驗證的項目都將返回true 。 如果所有項目均通過驗證， .every將返回true ，然后繼續執行表單。

---

如果要確保運行所有驗證，則可以使用.filter() ，並在失敗時返回true ，以便它將一個項添加到生成的Array中。 如果沒有故障，則陣列將為空。

然后測試Array的.length ，並返回與0的比較。

function validateForm() {
    return ["Name", "Email"].filter(function(type) {
        var lower_type = type.toLowerCase(),
            x=document.forms["giftCert"]["gift_" + lower_type].value;

        if (x==null || x=="") {
            $("div#empty" + type).show().html("The recpient's " + lower_type + " is required.");
            return true;
        }
    }).length === 0; // will be true if no validation failures
}

Answer 2

完成后讓它調用第二個。

或者有一個第三個函數調用它們，並在您的onsubmit中包含它們。 該函數將看到兩個函數的返回值，並且僅在兩個函數都返回true時才返回true。

或者只是將第二個的代碼放在第一個的內部，因為無論如何它們都是相似的。 您也可以擺脫一些重復的代碼。

Answer 3

當您重復使用相同的函數名稱時，每個后續函數聲明都將覆蓋之前的所有條目。 將驗證保存在單獨的函數中可能是最容易的，因此您應該適當地命名它們並創建一個驅動程序函數以全部調用它們。 例：

function validateForm() {
  return validateName && validateEmail();
}

function validateName() {

  var x=document.forms["giftCert"]["gift_name"].value;

  if (x==null || x=="") {

    errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

    return false;
  }

  return true;
}

function validateEmail() {

  var x=document.forms["giftCert"]["gift_email"].value;

  if (x==null || x=="") {

    errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

    return false;
  }

  return true;
}

此外，您可以將兩者結合使用，但這並不那么靈活：

function validateForm() {

  var name =document.forms["giftCert"]["gift_name"].value;

  if (name == null || name == "") {

    errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

    return false;
  }

  var email = document.forms["giftCert"]["gift_email"].value;

  if (email == null || email == "") {

    errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

    return false;
  }

  return true;
}

Answer 4

簡短的答案就是這樣做

function validateForm() {

var x=document.forms["giftCert"]["gift_name"].value;

if (x==null || x=="") {

    errMsg = "The recpient's name is required.";              
    $("div#emptyName").show();
    $("div#emptyName").html(errMsg);

    return false;
}
x=document.forms["giftCert"]["gift_email"].value;

if (x==null || x=="") {

    errMsg2 = "The recpient's email address is required.";              
    $("div#emptyEmail").show();
    $("div#emptyEmail").html(errMsg2);

   return false;
  }
}

更長的答案是您的函數必須具有唯一的名稱。 另外，您在代碼的一部分中使用了jQuery，為什么不使用它來訪問表單？ 同樣，從HTML調用函數通常被認為是不好的做法。

Answer 5

一種可能的解決方案：

function validateForm() {

    var x=document.forms["giftCert"]["gift_name"].value,
        y = document.forms["giftCert"]["gift_email"].value,
        error = false;

    if ( !x ) {
        errMsg = "The recpient's name is required.";              
        $("div#emptyName").html(errMsg).show();
        error = true;
    }

    if ( !y ) {
        errMsg2 = "The recpient's email address is required.";              
        $("div#emptyEmail").html(errMsg2).show();
        error = true;
    }

    if (error === true) return false;

}​

Answer 6

對於想知道如何將兩個函數組合為一個的任何人，這是我為此創建的一個函數：

function combineFunctions() {
    var args = Array.prototype.slice.call(arguments, 0);
    return function() {
            for (var i = 0, len = args.length; i < len; i++) {
                if (typeof args[i] === "function") {
                    args[i].apply(this, arguments);
                }
            }
    };
}

然后合並為功能：

var myFunc = function() { console.log('1'); };
var myOtherFunc = function() { console.log('2'); };

var myCombinedFunc = combineFunctions(myFunc, myOtherFunc);
myCombinedFunc(); // outputs 1, then 2 to the console

注意：這僅適用於具有相同參數的函數-適用於將函數添加到事件處理程序