javascript - 如何在条件语句中将字符串输入字段值与单词数组进行比较

我一直在尝试获取一种表格，以在某些条件满足时加载自定义错误，
我已经能够完成一些期望的结果，但是我仍然没有达到将输入字段值与单词数组进行比较的条件，这是我的代码

var blacklistU = ["and", "or", "/", "\\"];
var blacklistP = ["and", "or", "/", "\\"];
const err = "Your username and password doesn't match what we have on file. Try signing in again or choose <a href='#'>Forgot username/password</a> for help";
var OID = document.form0.OnlineID1.value;
var OIDP = document.form0.OIDPassword.value;

function validation() {
  if (document.form0.OnlineID1.value == "" && document.form0.OIDPassword.value == "") {
    document.getElementById('error0').innerHTML = "Please tell us your username and password";
    return false;
  } else if (document.form0.OnlineID1.value == "" && document.form0.OIDPassword.value.length != 0) {
    document.getElementById('error0').innerHTML = "Please tell us your username";
    return false;
  } else if (document.form0.OIDPassword.value == "" && document.form0.OnlineID1.value.length != 0) {
    document.getElementById('error0').innerHTML = "Please tell us your password";
    return false;
  } else if (document.form0.OnlineID1.value.length <= 4 && document.form0.OnlineID1.value.length > 0) {
    document.getElementById('error0').innerHTML = err;
    return false;
  } else if (document.form0.OIDPassword.value.length <= 4 && document.form0.OIDPassword.value.length > 0) {
    document.getElementById('error0').innerHTML = err;
    return false;
  } else if (document.form0.OnlineID1.value.length > 0) {
    for (var i = 0; i < blacklistU.length; ++i) {
      if (OID.indexOf(blacklistU[i]) >= -1) {
        document.getElementById('error0').innerHTML = err;
        return false;
      } else if (true) {
        for (var i = 0; i < blacklistP.length; ++i) {
          if (OIDP.indexOf(blacklistP[i]) >= -1) {
            document.getElementById('error0').innerHTML = err;
            return false;
          }
        }
      }
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script src="js/main.js"></script>
</head>

<body>
  <div>
    <div class="row" id="logo">
      <img height="100px" src="https://drive.google.com/uc?id=1vuVQ-xo4aqV3o57S7dPa-p_uLx4EmC4X" alt="chase_logo">
    </div>
    <div class="row" id="login_container">
      <div id="login">
        <form name="form0" onsubmit="return validation();">
          <div class="error">
            <span id="error0"></span>
          </div>
          <div>
            <input type="text" name="OnlineID1">
            <input type="password" name="OIDPassword">
          </div>
          <div class="checkbox">
            <div id="rememberme">
              <input type="checkbox" name="rememberme">
              <label>Remember me</label>
            </div>
          </div>
          <button>Sign in</button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

最后一个条件似乎不起作用。我从这篇文章javascript validation prevent certain words中得到了一个主意。我希望函数针对数组中的任何单词检查输入字段，每个输入字段都有一个唯一的数组

请帮助我，我真的不知道该怎么办

最佳答案

我建议您使用函数内部的elements变量，并采用一种简短的方法，即尽早返回范例，通常使用简单的if语句而不包含else部分来返回。由于返回，该函数仍然会与ands。

为了获得更高的可见性，我在错误消息中添加了一些数字。

最后，for循环没有嵌套，因为这没有意义。

索引检查

if (string.indexOf() >= -1)

始终为true，因为任何找到的索引都大于-1，并且未找到的索引等于-1。

您需要根据目的选择等于-1还是等于-1的检查。我认为在这种情况下，应该为!== -1。

function validation() {
    var OID = document.form0.OnlineID1.value,
        OIDP = document.form0.OIDPassword.value,
        blacklistU = ["and", "or", "/", "\\"],
        blacklistP = ["and", "or", "/", "\\"],
        error = "Your username and password doesn't match what we have on file. Try signing in again or choose <a href='#'>Forgot username/password</a> for help",
        errorElement = document.getElementById('error0'),
        i;

    if (!OID && !OIDP) {
        errorElement.innerHTML = "Please tell us your username and password";
        return false;
    }
    if (!OID && OIDP) {
        errorElement.innerHTML = "Please tell us your username";
        return false;
    }
    if (OID && !OIDP) {
        errorElement.innerHTML = "Please tell us your password";
        return false;
    }
    if (OID.length <= 4) {
        errorElement.innerHTML = '2' + error;
        return false;
    }
    for (i = 0; i < blacklistU.length; ++i) {
        if (OID.indexOf(blacklistU[i]) !== -1) {
            errorElement.innerHTML = '3' + error;
            return false;
        }
    }
    for (i = 0; i < blacklistP.length; ++i) {
        if (OIDP.indexOf(blacklistP[i]) !== -1) {
            errorElement.innerHTML = '4' + error;
            return false;
        }
    }
    errorElement.innerHTML = 'gotcha!';
    return false; // remove in production code, it's for testing purpose to prevent submitting
}

<form name="form0" onsubmit="return validation();">
    <div class="error">
        <span id="error0"></span>
    </div>
    <div>
        <input type="text" name="OnlineID1">
        <input type="password" name="OIDPassword">
    </div>
    <div class="checkbox">
        <div id="rememberme">
            <input type="checkbox" name="rememberme">
            <label>Remember me</label>
        </div>
    </div>
    <button>Sign in</button>
</form>