javascript - 否则条件永远不会被触发

Question

这是我的部分观点-

<div class="form-group row">
    <label for="email" class="col-sm-2 form-control-label">Email address</label>
    <div class="col-sm-9">
        <input type="email" class="form-control" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="Email Address" required/>
    </div>
</div>

这是我 Controller 的一部分 -

var re = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;

self.email = document.getElementById("email");

angular.element(self.email).on("input", function () {
    console.log("Inside event");
    if(self.email.value != re) {
        var closest3 = self.email.closest('div');
        closest3.className += " has-error";
    }

    else {
        closest3.className += " has-success";   
    }
});

为什么永远不会触发 else 条件。我正在输入 characters@characters.com

Answer 1

您正在将字符串与正则表达式进行比较，这几乎肯定总是不同的。相反，您需要测试正则表达式是否匹配:

if(!re.test(self.email.value)) {

尽管如此，代码中还有一些其他问题。我已经移动了 closest3 的声明和初始化，以便它可以在 else block 中正确使用。您还应该删除每个 block 中的“错误”类以确保正确的行为，否则最终将同时应用两个类。我使用了 classList 功能来这样做，但根据您的环境，您可能需要使用 different method这样做，因为它是 fairly modern property (旧版本的 IE 会失败)。

var closest3 = self.email.closest('div');
if(!re.test(self.email.value)) {
    closest3.classList.remove("has-success");
    closest3.className += " has-error";
} else {
    closest3.classList.remove("has-error");
    closest3.className += " has-success";   
}