Javascript 如何在表单中只接受两种电子邮件域？

我有一个表单和一个输入字段，要求用户输入他们的电子邮件。但是，我只想接受@gmail.com和@outlook.com，但我的代码似乎只接受@outlook.com。有人能就我的代码给出一些建议吗

    $( "#email" ).change(function() {
    if (this.value.length <= 0 ) {
        email=0;
        $(this).removeClass( 'success_class' );
        $(this).addClass( 'error_class' );
        document.getElementById("emailError").innerHTML = "You need to enter your email";
    } else if (this.value.length > 200) {
        email=0;
        $(this).removeClass( 'success_class' );
        $(this).addClass( 'error_class' );
        document.getElementById("emailError").innerHTML = "The email is too big.";
    } else if ((this.value.search('@outlook.com') == -1 || this.value.search('@gmail.com') == -1) || (this.value.length != this.value.search('@outlook.com')+12 ||this.value.length != this.value.search('@gmail.com')+10)) {
        email=0;
        $(this).removeClass( 'success_class' );
        $(this).addClass( 'error_class' );
        document.getElementById("emailError").innerHTML = "You must enter your Gmail or Outlook email";
    } else {
        email=1;
        $(this).removeClass( 'error_class' );
        $(this).addClass( 'success_class' );
        document.getElementById("emailError").innerHTML = "";
    }
});

$（“#电子邮件”）.change（函数（）{
if（this.value.length 200）{
电子邮件=0；
$（this.removeClass（'success_class'）；
$（this.addClass（'error_class'）；
document.getElementById（“emailError”）.innerHTML=“电子邮件太大。”；
}否则如果（（this.value.search（'@outlook.com'）=-1 | | this.value.search（'@gmail.com'）=-1）| | |（this.value.length！=this.value.search（'@outlook.com'）+12 | | this.value.length！=this.value.search（'@gmail.com'）+10））{
电子邮件=0；
$（this.removeClass（'success_class'）；
$（this.addClass（'error_class'）；
document.getElementById（“emailError”）.innerHTML=“您必须输入您的Gmail或Outlook电子邮件”；
}否则{
电子邮件=1；
$（this.removeClass（'error_class'）；
$（this.addClass（'success_class'）；
document.getElementById（“emailError”）.innerHTML=“”；
}
});

使用regex

/\@（gmail | outlook）{1}\.com$/i

->

• \@应包含@
• （gmail | outlook）必须只出现一次gmail或outlook
• .com$.com和结束
• i->标记不区分大小写

$（“#电子邮件”）.change（函数（）{
if（this.value.length 200）{
电子邮件=0；
$（this.removeClass（'success_class'）；
$（this.addClass（'error_class'）；
document.getElementById（“emailError”）.innerHTML=“电子邮件太大。”；
}否则如果（！/\@（gmail | outlook）\.com$/i.test（this.value））{
电子邮件=0；
$（this.removeClass（'success_class'）；
$（this.addClass（'error_class'）；
document.getElementById（“emailError”）.innerHTML=“您必须输入您的Gmail或Outlook电子邮件”；
}否则{
电子邮件=1；
$（this.removeClass（'error_class'）；
$（this.addClass（'success_class'）；
document.getElementById（“emailError”）.innerHTML=“”；
}
});
发生这种情况是因为您检查这些域的方式。请看这一行：

else if ((this.value.search('@outlook.com') == -1 || this.value.search('@gmail.com') == -1)

让我们看看当有人进入“@gmail.com”时会发生什么。检查是否缺少'@outlook.com'的第一个条件返回true，并输入代码块，而不检查'@gmail.com'。因此，它似乎不起作用

有几种方法可以解决此问题：

1） 使用肯定搜索结果，而不是否定搜索结果

if(this.value.search('@outlook.com') > -1 || this.value.search('@gmail.com') > -1) {
// code for correctly entered email
}

2） 使用正则表达式。根据萨加尔五世的回答，一个好的答案是：

/\@(gmail|outlook)\.com$/i

3） 使用选择框强制用户选择一个域。在我看来，这不是一个好的UI/UX，因为用户可能不熟悉这样输入电子邮件，而且可能会将其全部输入到您的输入中

我更喜欢正则表达式，因为当您了解它的作用时，它更容易理解。
您可以添加一个
select
标记，该标记只包含这两个选项。我会将
I
标记添加到正则表达式中，因为
ME@GMAIL.COM
是一个有效的Gmail地址。请确定@Pavlo。因为SO和我们的目标都是提供高质量的答案。无论是谁和谁编辑的。：-）谢谢大家：）。这很有帮助。标记为答案将有助于这篇文章的未来访问者
{1}
似乎多余。感谢你的有用建议。非常感谢你！