提交时的JavaScript表单验证

我有一个简单的表单，正在进行更改验证，需要提交最终验证。我正在输入框右侧显示一条关于错误的消息。我正在努力使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...
}

函数validateUsername（myItem，myElement）{
var dom=document.getElementById（myElement）；
如果（myItem.value.length<3）{
dom.innerHTML=“用户名至少需要3个字符！”；
返回false；
}
否则{
dom.innerHTML=“”；
返回true；
}
}
函数validatePassword（myItem，myElement）{
var dom=document.getElementById（myElement）；
如果（myItem.value.length<5）{
dom.innerHTML=“密码至少需要5个字符！”；
返回false；
}
否则{
dom.innerHTML=“”；
返回true；
}
}
功能验证表单（itm）{
//有点困在这里了。。。
}

正如您可能注意到的那样，我对validateForm（）函数有点迷恋。 代码在每个inputbox onchange事件上进行验证。 不知道从这里开始最好的方式是什么。我曾考虑为我的两个单输入框验证做一个If，但我需要发送每个参数，这正是我试图通过使用这个来避免的。

---

希望得到一些建议。

单独关注。而不是让验证功能不仅验证，而且报告你的画你自己到一个角落。相反，有一个validate函数只返回true/false，另一个是onChange事件处理程序，它调用validate函数并在需要时显示错误消息。然后，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));

你可以试试这个

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

return flag;
}

---

这很好，但我正在尝试将它保持在DOM 1，preventDefault（）是DOM 2+。然后删除该行或将其包装在

if

块中。没有理由支持旧浏览器会妨碍您的可读性和可组合性。addEventListener（）也是DOM 2+。@Rick Why DOM 1？您需要支持哪种浏览器？我必须修复语法错误的原因：

return（validateUsername（itm.username，“msgUsername”）&&validateUsername（itm.passwordword，“msgPassword”）它正在工作，但只执行第一个验证函数，在本例中不是两个。我编辑了我的帖子，现在它将执行两个验证