我似乎无法弄清楚我的代码哪里出错了,是我的正则表达式还是我的 javascript 代码。当我输入正确的电子邮件格式时,警报仍然出现,而它应该只在电子邮件格式错误时才会出现。
我正在使用 javascript 的 toggleClass 功能来处理事件模式中的警报。
$('.email').blur(function() {
var regex =
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var isEmailCorrect = $(this).val().match(regex);
$('.modal:visible').find('.popemail').toggleClass('hide', isEmailCorrect);
$('.sub').prop('disabled', !isEmailCorrect);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Email</label>
<span id="popover-email" class="popemail hide pull-right block-help">
<i class="fa fa-info-circle text-danger" aria-hidden="true"></i>
Please use the proper format of an email</span>
<input type="email" class="email form-control" id="email" name="email" placeholder="Email" value="<?php echo $row['email']; ?>">
当放置格式正确的电子邮件时,不应出现警报,但放置错误格式的电子邮件时,应该会出现警报。我为警报使用了切换类,请参阅第 4 行。
最佳答案
您正在使用 .match()
,它将在您的正则表达式中返回匹配的子字符串数组。这不是 bool 值。运行此示例以查看:
var regex =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log("bob@aol.com".match(regex));
如果你使用 .test()
,你想要什么,如果它匹配或不匹配,它将返回一个 bool 值。
var regex =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(regex.test("bob@aol.com"));
console.log(regex.test("banana"));
编辑:
需要说明的是,这就是您的代码应有的样子。我添加了一些调试 console.log
调用以帮助您了解内容。我稍微更改了 HTML 以使该演示能够正常运行。单击“运行代码片段”按钮。
$('.email').blur(function() {
var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var isEmailCorrect = regex.test(this.value);
console.log('Email Value:', this.value);
console.log('Is Email Correct:', isEmailCorrect);
$('.modal:visible').find('.popemail').toggleClass('hide', isEmailCorrect);
$('.sub').prop('disabled', !isEmailCorrect);
});
.hide{display:none;}
.popover-email{color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal">
<label for="email">Email</label>
<input type="email" id="email" class="email" name="email" placeholder="Email">
<span id="popover-email" class="hide popemail">Please use the proper format of an email</span>
</div>
关于Javascript 功能在我的正则表达式上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56480345/