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

时间:2019-03-10 15:36:45

标签: javascript html arrays forms

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

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 帖子中得到了一个主意,我希望该函数根据数组中的任何单词检查输入字段,每个输入字段都有一个唯一的数组

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

2 个答案:

答案 0 :(得分:2)

我建议您使用函数内部的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>

答案 1 :(得分:0)

  

最后一个条件似乎无效

如果您指的是OIDP.indexOf(blacklistP[i]) >= -1,这是因为indexOf仅在搜索的值不在数组中时才返回-1,否则返回数字>= 0;因此条件应为OID.indexOf(blacklistU[i]) == -1

我也建议您避免这种结构

if (/*condition*/) {
    // code...
}
else if (true) {
    // code
}

赞成

if (/*condition*/) {
    // code...
}
else {
    // code
}