提交的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; 
}