永远不会触发其他条件答案

【问题标题】：Else condition never being triggered永远不会触发其他条件
【发布时间】：2016-05-10 15:39:33
【问题描述】：

这是我部分观点的一部分 -

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

这是我的控制器的一部分 -

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

【问题讨论】：

标签： javascript html angularjs regex

【解决方案1】：

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

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

尽管呈现的代码还存在一些其他问题。我已经移动了closest3 的声明和初始化，以便它可以在else 块中正确使用。您还应该删除每个块中的“错误”类以确保正确的行为，否则最终会同时应用两个类。我已经使用了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";   
}

【讨论】：

【解决方案2】：

因为这不是正则表达式的工作方式。

您想使用re.test(str) 或str.match(re)。

【讨论】：

【解决方案3】：

您需要在 if 条件中使用str.match(regexp)：

 if(!self.email.value.match(re))

【讨论】：