使用javascript验证表单中的特定电子邮件地址

时间:2015-04-30 13:06:07

标签: javascript html css validation email

我正在设置表单并在其中我已经编码验证电子邮件表单框中是否有条目,如您所见

function checkMailing(){
//if we want to refer to the email field - which has the name 'email' - we would use the form variable (created above), as such:
//theForm.email 
//you this with the name of any field iside of the form
//alert(theForm.email.value);

//use an if statement to check the value of the form
var mailingVal = theForm.mailing.value 
mailingVal = trim(mailingVal);

if(mailingVal == "" ){
    //error message

    //add a dropshadow to the field (to highlight it)
    theForm.mailing.style.boxShadow = "0px 0px 6px #01FFFF";

    //from the form field, go up to the parent (the div with the class 'formbox', then inside of that for the div with the class 'fieldInfo', and change the text contents to be an error message
    setMessage(theForm.mailing, "error", "You must enter an address");
    /*theForm.email.parentNode.querySelector("div").innerHTML = "You must enter an email!";
    theForm.email.parentNode.querySelector("div").className = "error";*/
}else{
    //if the user entered an email (or in this anything) give them positive feedback
    theForm.mailing.style.boxShadow = "";

    setMessage(theForm.mailing, "correct", "Perfect");

    /*theForm.email.parentNode.querySelector("div").innerHTML = "Perfect)"
    theForm.email.parentNode.querySelector("div").className = "correct";*/
    }   
}

但是我需要它来验证它是一个CERTAIN电子邮件地址,而不仅仅是任何电子邮件地址。例如,它必须是@ gmail.com地址,而不是@ hotmail.com或@ anythingelse.com。感谢您的任何指导!

3 个答案:

答案 0 :(得分:2)

您可以使用正则表达式:

if (mailingVal && mailingVal.match(/@gmail\.com$/i)) {
    // it's gmail
}

答案 1 :(得分:1)

更好的方法可能是使用正则表达式,确保匹配的字符串以@gmail.com结尾

var re = /@gmail\.com$/i; 

if(re.exec(mailingVal) !== null) {
    // the test passed!
}

这将确保字符串以@gmail.com结尾,并且在.com

之后不包含任何额外字符

使用该正则表达式,someone@gmail.com将匹配,但someone@gmail.comm不匹配。由于someone@Gmail.com切换,someone@GMAIL.COM/i(依此类推)也是如此。

如果您希望它仅区分大小写,请删除/i开关,这样正则表达式就像

一样
var re = /@gmail.com$/

更新

以下是代码中的正则表达式解决方案,将exec更改为test(只返回true或false,具体取决于正则表达式是否匹配):

function checkMailing(){
    //if we want to refer to the email field - which has the name 'email' - we would use the form variable (created above), as such:
    //theForm.email 
    //you this with the name of any field iside of the form
    //alert(theForm.email.value);

    //use an if statement to check the value of the form
    var mailingVal = theForm.mailing.value,
       re = /@gmail\.com$/i;
    mailingVal = trim(mailingVal);

    if(!re.test(mailingVal)){
       //error message

       //add a dropshadow to the field (to highlight it)
       theForm.mailing.style.boxShadow = "0px 0px 6px #01FFFF";

       //from the form field, go up to the parent (the div with the class 'formbox', then inside of that for the div with the class 'fieldInfo', and change the text contents to be an error message
       setMessage(theForm.mailing, "error", "You must enter an address");
       /*theForm.email.parentNode.querySelector("div").innerHTML = "You must enter an email!";
       theForm.email.parentNode.querySelector("div").className = "error";*/

    } else {

      //if the user entered an email (or in this anything) give them positive feedback
      theForm.mailing.style.boxShadow = "";

      setMessage(theForm.mailing, "correct", "Perfect");

      /*theForm.email.parentNode.querySelector("div").innerHTML = "Perfect)"
      theForm.email.parentNode.querySelector("div").className = "correct";*/
  }   
}

这对你有用。我对你正在使用的trim()函数有一个疑问。它是什么?你正在使用的是库,还是你编写的修剪函数?我只想使用String.prototype.trimmailingVal的开头和结尾删除空格。

答案 2 :(得分:-1)

如果您确切知道要检查的邮件供应商,请尝试以下方法:

if (mailingVal.length && mailingVal.indexOf('@gmail.com') > -1 ) console.log('that is gmail!'); 

您还可能需要将自己的字符串放入情人案件,以确保“Gmail'也是有效的

mailingVal = mailingVal.toLowerCase()

UPD: 正如评论中提到的那样,这个案子会发邮件为' wut@gmail.commadot'也有效。 为了防止这种情况,你可以尝试这个检查:

mailingVal = mailingVal.split['@'];
 if (mailingVal.length > 2) {
   console.log('not Valid email');
 } else {
   if (mailingVal[1].toLowerCase() === 'gmail.com') console.log('Bingo!');
 }