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);


            }
       });

应该发生的事情是，只有当“用户”输入无效的电子邮件和错误的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等。

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

在Javascript IF语句中使用AND / OR

2 个答案: