如何只接受表单中的两种电子邮件域名?

时间:2017-03-01 15:02:46

标签: javascript email-validation

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

2 个答案:

答案 0 :(得分:1)

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

  • \ @应包含@
  • (gmail | outlook)必须只有一次gmail或outlook
  • .com $ .com和结束
  • i - &gt; flag case insensitive

$( "#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>

答案 1 :(得分:0)

由于您检查这些域的方式,这种情况正在发生。看看这一行:

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)使用正则表达式。从Sagar V的回答来看,一个好用的是:

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

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

我更喜欢正则表达式,因为当你理解它正在做什么时,它更容易理解。