indexOf 不是专注于输入时的函数错误

Question

$('input').focusout(function() {
if ($(this).indexOf('@') > -1 && $(this).indexOf('.') > -1) {
$('.status').html('Valid Email');
} else {
$('.status').html('Your email is invalid, Please try again');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="email" placeholder="Email">
<p class="status"></p>

当我从输入区域聚焦时，它会给出错误indexOf is not a function。

Answer 1

在解决方案中应考虑两件事。

1. $(this)将引用其父级，在您的特定情况下，它是$('input').因此，如果要检查输入值中是否存在@或.，则应在查询中引用val()方法，因此它将返回输入的当前值。

所以你的最终代码应该是这样的：

$('input').focusout(function() {
if ($(this).val().indexOf('@') > -1 && $(this).val().indexOf('.') > -1) {
$('.status').html('Valid Email');
} else {
$('.status').html('Your email is invalid, Please try again');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="email" placeholder="Email">
<p class="status"></p>

2. 虽然您在电子邮件中检查特殊符号的解决方案工作正常，但它不会检查整个输入字符。因此，检查此类内容的最好方法(最佳实践(是使用正则表达式。因此，您应该使用RegExp或正则表达式文本创建一个适当的正则表达式。

所以你的最终代码将是这样的：

const emailRegex = /^(([^<>()[]\.,;: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,}))$/;
$('input').focusout(function() {
if (emailRegex.test($(this).val())) {
$('.status').html('Valid Email');
} else {
$('.status').html('Your email is invalid, Please try again');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="email" placeholder="Email">
<p class="status"></p>