Question

我有一个简单的表单，我正在验证onchange并需要对提交进行最终验证。我在错误的输入框右侧显示一条消息。我试图将它与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（）函数有点卡住了。代码在每个inputbox onchange事件上验证。不确定从这里开始的最佳方式是什么。我想为我的两个单输入框验证做一个If，但我需要发送每个参数，这是我试图避免使用它。想要一些建议。

Answer 1

分开关注。而不是验证功能不仅可以验证，还可以将自己的绘画报告给角落。而是有一个只返回true / false的validate函数，另一个是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));

Answer 2

你可以试试这个......

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

return flag;
}

提交时的JavaScript表单验证

2 个答案: