フォームで2種類の電子メールドメインのみを受け入れる方法は？

Question

私はフォームを持っていて、入力フィールドの1つにユーザーに電子メールの入力を要求します。しかし、私は@ 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.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の回答から、使用するのが良いです：3）ユーザーが1つのドメインを選択するように選択するボックスを使用してください。私の意見では、これは良いUI/UXではありません。ユーザーがこのような電子メールを入力することに慣れていない可能性があります。

私はそれが何をしているのか理解しているとき、それは簡単に従う方が好きです。

Answer 2

使用正規表現/\@(gmail|outlook){1}\.com$/i - @は

@含まれている必要があります>

• \（Gmailの|アウトルック）一つだけの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>