使用不同的變量具有相同的JavaScript功能

我想創建一個通用的Javascript函數，我可以使用它來驗證不同的字段值並輸出正確的字段旁邊的錯誤消息。我想創建一個高效的，可重用的函數，但我是Javascript的新手，我不確定如何繼續。使用不同的變量具有相同的JavaScript功能

建議如何更改我的驗證功能以驗證firstname和lastname將不勝感激。

我迄今爲止代碼：

我的形式

function validateForm() { 
    var x = document.forms["myForm"]["firstname"].value; 
    var reg_azs = /^[^a-zA-Z\-']+$/; 
    var reg_oal = "!#$%^&*()+=[]\\\';,{}|\":<>?123456790"; 

    if (x == null || x == "") { 
     document.getElementById("fn").innerHTML = "This fuild is required."; 
     return false; 
    } else if (reg_azs.test(firstname.value)) { 
     document.getElementById("fn").innerHTML = "Only alphabetic letters."; 
     return false; 
    } else { 
     for (var i = 0; i < x.length; i++) { 
      if (reg_oal.indexOf(x.charAt(i)) != -1) { 
       document.getElementById("fn").innerHTML = "Only alphabetic letters."; 
       return false; 
      } 
     } 
    } else { 
     document.getElementById("fn").innerHTML = "correct"; 
     return true; 
    } 
}

：

<form name="myForm" action="connection.php" method="post"> 
    <label for='firstname'>First Name:</label> 
    <input type="text" id="firstname" name="firstname" onchange="return validateForm()" /> 
    <err1 id="fn"></err1> 
    <br> 

    <label for='lastname'>Last Name:</label> 
    <input type="text" id="lastname" name="lastname" onchange="return validateForm()" /> 
    <err1 id="ln"></err1> 
    <br> 
</form>

來源

2012-09-16 Paul Bosch

html無效，因爲標準中沒有指定'err1'標籤。 – Andreas

檢查我對這個問題的答案http://stackoverflow.com/questions/12434948/textbox-validation-in-jquery/12435184#12435184，它可能有助於保持乾爽。 – elclanrs

「較少的代碼」並不意味着「更快」。通常，將代碼縮短到混淆的程度使其變得更慢，並且更難以維護。 – RobG

我會做的函數接受幾個參數：元素的id正在審查中，元素的id展現錯誤消息，然後可能是一串正則表達式來驗證它（可能是可選的）。

從那裏，你可以設置x爲：

var x=document.getElementById(param1).value;

，每次你引用錯誤元素，像這樣：

document.getElementById("fn")

將其更改爲：

document.getElementById(param2)

所以你的函數聲明看起來像這樣：

function validateForm(param1, param2) {

當你罵它，它看起來像：

onchange="return validateForm('firstname', 'fn');" 
onchange="return validateForm('lastname', 'ln');"

等。

您可能還想要更改參數名稱，例如param1和param2僅爲示例，並且可能分別更好爲targetElem和errorLabel。

UPDATE：

這樣的設計也是狹隘的，這樣你必須調用validateForm爲要驗證每一個元素。一個替代方案中，以允許多個元件與一個函數調用被驗證是使用對象的數組，其中每個對象具有類似形式：

{"element_id": "whatever", "error_id": "whatever"}

但在你的函數，你將通過單個參數環路（陣列），並獲得每一個像這樣：

for (var i = 0; i < param1.length; i++) { 
    // Use param1[i]["element_id"] and param1[i]["error_id"] 
}

在這種情況下，可以額外的東西添加到每個對象，以允許特定的驗證規則，如不爲空，至少一定的長度，不超過一定的長度，等等......在循環中，你必須檢查那些正在出現的東西。

來源

2012-09-16 22:38:29 Ian

使用不同的變量具有相同的JavaScript功能

回答

相關問題