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

Question

我有一个表单，其中一个输入字段要求用户输入他们的电子邮件。但是，我只想接受@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 = "";
    }
});

Answer 1

使用正则表达式 /\@(gmail|outlook){1}\.com$/i ->

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

$( "#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 (!/\@(gmail|outlook)\.com$/i.test(this.value)) {
        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 = "";
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="email" name="email" type="email" />
<div id="emailError"></div>

Answer 2

发生这种情况是因为您检查这些域的方式。看这一行：

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

让我们看看当有人输入“@gmail.com”时会发生什么。第一个条件检查是否缺少“@outlook.com” returns 为真，并且输入代码块，而不检查“@gmail.com”。所以它似乎不起作用。

解决此问题的几种方法：

1) 使用肯定的搜索结果而不是否定的。

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

2) 使用正则表达式。根据 Sagar V 的回答，一个很好用的是：

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

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

我更喜欢正则表达式，因为当您理解它的作用时，它更容易理解。

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

How to only accept two kinds of email domain in form?

javascript

email-validation