时间戳

首页 > 解决方案 > 如何在条件语句中将字符串输入字段值与单词数组进行比较

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 验证防止某些单词 我希望该函数根据数组中的任何单词检查输入字段 每个输入字段都有一个唯一的数组

请帮帮我，我真的不知道从这里做什么

标签： javascripthtmlarraysforms

解决方案

我建议你在函数内部使用元素变量，并使用一种简短的方法，尽早采用范式返回，经常使用不带部分的简单if语句返回。else因为return，函数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>

推荐阅读