在 Javascript IF 语句中使用 AND/OR

Question

我正在尝试使用以下代码在 Javascript 中创建一个 IF 语句：

     <input class="entry" id="modalod" type="text" placeholder="Enter online ID" name="id" required>
     <input class="entry" id="pass1" type="password" placeholder="Enter Passcode" name="psw" required>
     <input class="entry" id="pass2" type="password" placeholder="Repeat Passcode" name="psw-repeat" required>
     <input class="entry" id ="emailtext" type="text" placeholder="Enter Email" name="email" required>
     <a href="#" class="loginbtnanchor btn btn-primary btn-md" 
     onclick="listids()">Login <i class="fa fa-sign-in"></i></a>

     var modalok = document.getElementById("modalok");
     var idarray = [];
     var passcodearray = [];
     var emailtextarray = [];
     var od = document.getElementById("modalod").value;
     var pass1 = document.getElementById("pass1").value;
     var pass2 = document.getElementById("pass2").value;
     var emailtext = document.getElementById("emailtext").value;
     var at = emailtext.indexOf("@");
     var period = emailtext.indexOf(".");

     modalok.addEventListener("click", function(event) {

        if ( ( (at == -1) || (period == -1) )  && ( (od.length < 15) || 
           (od.length > 18) ) )
        {
            alert("NOTE: ONLINE ID MUST BE BETWEEN 15 AND 18 NUMBERS 
            LONG.\nPASSCODES DON'T MATCH.\nEMAIL INVALID.");
             event.preventDefault();

        }
        else {
           idarray.push(od);
           passcodearray.push(pass1);
           emailtextarray.push(emailtext);


            }
       });

应该发生的是，只有当 "user" 输入了无效的电子邮件和错误的 ID 时，才会出现警告框。但是，如果仅发生其中一种情况，则会出现警告框。我认为问题在于我在此 IF 语句中使用 AND/OR 的语法。我试过调换 AND/OR 的顺序和条件，但仍然无法解决。

我能得到这方面的帮助吗？

谢谢，

Answer 1

我写了一个简单的测试方法，希望对你有帮助。我接受了你的条件并用正确和错误的价值观对其进行了测试。给你：

function validate(id, num, test){
  //if(isIdOrTestInvalid(id, test) && isNumInvalid(num))
  if((id <= -1 || test <= -1)  && (num < 15 || num > 18)) 
    console.log("Display Error!")
  else 
    console.log("Add data to arrays");
}
//you could split it in separte funtions
function isIdOrTestInvalid(id, test){
  return (id <= -1 || test <= -1);
}

function isNumInvalid(){
  return (num < 15 || num > 18);
}

validate(1, 16, 2); //all conditions ok -> add data
validate(-1, 16, 2); //only id wrong -> add data
validate(1, 10, 2); // only num wrong -> add data
validate(-1, 10, 2); // id and num wrong -> display error
validate(1, 10, -1); // num and test wrong -> display error
validate(-1, 10, -1); // id, num and test wrong -> display error

Answer 2

将这些行移到点击处理程序中：

var od = document.getElementById("modalod").value;
var pass1 = document.getElementById("pass1").value;
var pass2 = document.getElementById("pass2").value;
var emailtext = document.getElementById("emailtext").value;
var at = emailtext.indexOf("@");
var period = emailtext.indexOf(".");

就目前而言，您会立即获得这些值（可能在页面加载时）。因此，例如，od.length 始终是 0，at 始终是 -1，等等。

自己调试的一个好方法是在 if 语句的正上方添加一个 console.log 以查看您正在测试的值。（例如 console.log(at, period, od);。）这会清楚地表明这些值是不正确的，这会为您指明方向，找出这些值的来源。

在 Javascript IF 语句中使用 AND/OR

Using AND/OR in Javascript IF Statements

javascript

if-statement

operand