提交的JavaScript表單驗證

Question

我有一個簡單的表單，正在驗證onchange並需要最終驗證onsubmit。我在錯誤的輸入框右側顯示一條消息。我試圖保持DOM 1兼容。

HTML

<form id = "myForm" action = "" onsubmit = "return validateForm(this);"> 
       <table class = "table-submit" border = "0"> 
        <tr> 
         <td> 
          Username: 
         </td> 
         <td> 
          <input type = "text" id = "username" 
           size = "30" maxlength = "30" 
           onchange = "validateUsername(this, 'msgUsername')" /> 
         </td> 
         <td id = "msgUsername"> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Password: 
         </td> 
         <td> 
          <input type = "password" id = "password" 
           size = "30" maxlength = "30" 
           onchange = "validatePassword(this, 'msgPassword')" /> 
         </td> 
         <td id = "msgPassword"> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
        <td>&nbsp;</td> 
        <td> 
         &nbsp; 
         <input type = "submit" value = "Submit" /> 
         &nbsp; 
         <input type = "reset" value = "Clear" /> 
        </td> 
       </tr> 
       </table> 
</form> 

的JavaScript

function validateUsername(myItem, myElement) { 
var dom = document.getElementById(myElement); 

    if (myItem.value.length < 3) { 
     dom.innerHTML = " Username needs to be a minimum of 3 characters! "; 
     return false; 
    } 
    else { 
     dom.innerHTML = ""; 
     return true; 
    } 
} 

function validatePassword(myItem, myElement) { 
var dom = document.getElementById(myElement); 

    if (myItem.value.length < 5) { 
     dom.innerHTML = " Password needs to be a minimum of 5 characters! "; 
     return false; 
    } 
    else { 
     dom.innerHTML = ""; 
     return true; 
    } 
} 

function validateForm (itm) { 

    // kind of stuck here... 
} 

正如你可能注意到的，我堅持我的validateForm（）函數位。 代碼驗證每個輸入框onchange事件。 不知道什麼是從這裏去的最佳途徑。我想過如果爲我的兩個單一輸入框驗證，但我需要發送每個參數，這是我試圖避免使用這個。 想要一些建議。

Answer 1

單獨的問題。而不是驗證功能不僅驗證，而且還報告你的繪畫自己到一個角落。而是有一個驗證函數只返回true/false，另一個是onChange事件處理程序，它調用驗證函數並在需要時顯示錯誤消息。然後，您的onSubmit處理程序可以輕鬆地調用if/else塊中的驗證函數來允許或取消提交操作。

function validateUsername(username) { 
    return username.length >= 3; 
} 

function validatePassword(password) { 
    return password.length >= 5; 
} 

function showErrorFn(divId, message) { 
    var div = document.getElementById(divId); 
    message = " " + message; 
    return function(message) { 
    div.innerHTML = message; 
    }; 
} 

function makeChangeHandler(myItem, validationFn, errorFn) { 
    return function(e) { 
    if (validationFn(myItem.value)) { 
     return true; 
    } else { 
     errorFn(); 
     return false; 
    } 
    }; 
} 

function makeSubmitHandler(usernameEl, passwordEl) { 
    return function(e) { 
    if (validateUsername(usernameEl.value) && validatePassword(passwordEl.value)) { 
     return true; 
    } else { 
     e.preventDefault(); 
     return false; 
    } 
} 

var usernameEl = document.getElementById("username"); 
var usernameErrorEl = document.getElementById("msgUsername"); 
usernameEl.addEventListener("change", makeChangeHandler(
    usernameEl, 
    validateUsername, 
    showErrorFn("Username must be more then 3 characters") 
); 

var usernameEl = document.getElementById("password"); 
var usernameErrorEl = document.getElementById("msgPassword"); 
usernameEl.addEventListener("change", makeChangeHandler(
    usernameEl, 
    validatePassword, 
    showErrorFn("Password must be more then 5 characters") 
); 

var formEl = document.getElementById("myForm"); 
formEl.addEventListener("submit", makeSubmitHandler(usernameEl, password)); 

Answer 2

你可以試試這個...

function validateForm (itm) { 
    var flag = true; 
    flag = (validateUsername(itm.username, 'msgUsername') && flag); 
    flag = (validatePassword(itm.password, 'msgPassword') && flag); 

return flag; 
}