Question

我正在进行实时验证功能。问题是函数执行中的条件的后果在满足最后一个部分之前执行。在满足条件之前，条目验证指示器不应变为绿色，但情况并非如此。

满足第三个条件后指示灯变为绿色。在满足所有条件之前，它不应该。关于如何解决这个问题的任何建议。

我的代码如下所示。

＆＃13;

$(function() {

  // Pre-define extensions
  var xTension = ".com .net .edu";

  $("input").keyup(function() {

    // Check the position of "@" symbol
    var firstLetter = $(this).val().slice(0, 1);
    var lastLetter = $(this).val().slice(-1);
    var userXs = "No";

    // User provided extension
    var userX = $(this).val();
    userX = userX.substr(userX.indexOf(".") + 0);

    if (xTension.indexOf(userX) > -1) {
      if (userX != "") {
        userXs = "Yes";
      } else {
        userXs = "No";
      }
    } else {
      userXs = "No";
    };

    if ($(this).val().indexOf("@") > -1 && (firstLetter != "@") && (lastLetter != "@") && (userXs != "No")) {
      $("#input-status").removeClass("red").addClass("green");
    } else {
      $("#input-status").removeClass("green").addClass("red");
    }
  });
});

＆＃13;

.rack {
  width: 250px;
  margin: 0 auto;
}

#input-status {
  width: 1px;
  height: 3px;
  with: 0;
  display: inline-block;
  transition: all 2s;
}

input {
  width: 230px;
  height: 30px;
  text-align: center;
}

#input-status.green,
#input-status.red {
  width: 235px;
  background: darkGreen;
  transition: all 2s;
}

#input-status.red {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rack">

  <h1>Live Validat.ion</h1>

  <input type="text" placeholder="Enter email address">
  <div id="input-status">

  </div>
</div>

＆＃13;

Answer 1

使ggplot(mtcars, aes(disp, mpg, col=as.factor(cyl))) + geom_point() + theme_bw() + theme(legend.text=element_text(size=rel(0.5)))成为数组，而不是字符串。如果用户输入xTension，则user@foo.c将为userX，并且.c将匹配字符串，因为没有什么可以强制它匹配整个话。执行此操作时，您不再需要检查indexOf()是否为空字符串。

我对代码进行了一些其他简化：

不是获取第一个和最后一个字符，只需在适当的限制范围内测试userX的位置。
@之后无需+ 0。
不要一直打电话给indexOf()，把它放在变量中。
用户$(this).val()的布尔变量。

＆＃13;

userXs

＆＃13;

$(function() {

  // Pre-define extensions
  var xTension = [".com", ".net", ".edu"];

  $("input").keyup(function() {
    var val = $(this).val();

    // User provided extension
    userX = val.substr(val.indexOf("."));

    userXs = xTension.indexOf(userX) > -1;
    atPos = val.indexOf("@");
    if (atPos > 0 && atPos < val.length - 1 && userXs) {
      $("#input-status").removeClass("red").addClass("green");
    } else {
      $("#input-status").removeClass("green").addClass("red");
    }
  });
});

＆＃13;

.rack {
  width: 250px;
  margin: 0 auto;
}

#input-status {
  width: 1px;
  height: 3px;
  with: 0;
  display: inline-block;
  transition: all 2s;
}

input {
  width: 230px;
  height: 30px;
  text-align: center;
}

#input-status.green,
#input-status.red {
  width: 235px;
  background: darkGreen;
  transition: all 2s;
}

#input-status.red {
  background: red;
}

＆＃13;

如何在执行善后之前检查所有条件

1 个答案: