Validação de email usando jQuery

356

Eu sou novo no jQuery e queria saber como usá-lo para validar endereços de email.

DuH
fonte
Antes de tentar "validar" um endereço de e-mail, você deve ler o seguinte: hackernoon.com/…
Mikko Rantalainen

Respostas:

703

Você pode usar javascript antigo comum para isso:

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
Fabian
fonte
66
Sim, vai, lembre-se jQuery é ainda javascript :)
Fabian
36
Mesmo que esse regexp considere a maioria dos endereços do mundo real válidos, ainda possui muitos falsos positivos e falsos negativos. Por exemplo, veja exemplos de endereços de email válidos e inválidos na Wikipedia.
Arseny #
11
O @Umingo [email protected] ainda é um email válido, no entanto, ainda pode ser escrito da melhor maneira. Nenhuma parte do domínio pode começar com outro caractere que não seja [a-z0-9] (sem distinção entre maiúsculas e minúsculas). Além disso, o email válido (e o domínio) tem algum limite de len, que também não é testado.
Tomis
10
Com os novos domínios de alto nível cada vez mais comum este regex pode precisar modificar .systems e .poker etc são todos os TLDs válidos agora, mas iria falhar a verificação de regex
Liath
3
Por comentário de Theo em outra resposta, você deve mudar var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;para var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,6})+$/;apoiar .museum mais recente do TLD como, etc
Ira Herman
164

Função jQuery para validar email

Realmente não gosto de usar plug-ins, especialmente quando meu formulário possui apenas um campo que precisa ser validado. Eu uso essa função e a chamo sempre que preciso validar um campo de formulário de email.

 function validateEmail($email) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test( $email );
}

e agora para usar isso

if( !validateEmail(emailaddress)) { /* do stuff here */ }

Felicidades!

Manish Shrivastava
fonte
16
Você deve apenas voltaremailReg.test($email);
nffdiogosilva
7
Apenas para sua informação, isso retorna verdadeiro para um endereço de email em branco. por exemplo emailReg.text("") true. Eu simplesmente a função até a declaração do var emailReg então este:return ( $email.length > 0 && emailReg.test($email))
Diziet
14
O regex para verificar a validade do endereço de email está desatualizado, já que agora temos extensões de nome de domínio com 6 caracteres como .museum, portanto você gostaria de mudar var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;para #var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
Theo
3
certo você é @ h.coates! Eu vim para este tópico esperando descobrir que o jQuery realmente tinha uma validação de email embutida. Mover ao longo, estes não são os droids que você está procurando ...
iGanja
3
@ O ponto de Theo é vital, mas o tamanho real do TLD deve ser superior a 6, o limite superior teórico para a extensão é de 63 caracteres. atualmente o mais longo tem mais de 20 anos, consulte data.iana.org/TLD/tlds-alpha-by-domain.txt
Jeroenv3
41

Eu usaria o plug-in de validação jQuery por alguns motivos.

Você validou, ok ótimo, e agora? Você precisa exibir o erro, manipular apagá-lo quando for válido, exibindo quantos erros, no total, talvez? Há muitas coisas que ele pode lidar com você, sem necessidade de reinventar a roda.

Além disso, outro grande benefício é que ele está hospedado em uma CDN; a versão atual no momento desta resposta pode ser encontrada aqui: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Isso significa tempos de carregamento mais rápidos para o cliente.

Nick Craver
fonte
6
Ok ... não há necessidade de reinventar a roda. Mas por que tenho que instalar dezenas de KByte de Javascript para validar um campo. É como construir uma fábrica de automóveis se tudo que você precisa é uma nova roda :)
kraftb
3
@kraftb Conforme declarado na minha resposta, é o manuseio e a exibição da validação, não apenas a validação do texto.
Nick Craver
5
Obrigado por este @NickCraver: esta realmente parece ser uma abordagem de "melhores práticas" para o problema de lidar com a validação de um email. Certamente isso NÃO é como construir uma fábrica (escrevendo as bibliotecas para fazer todo o trabalho) para obter uma roda. É como seguir as instruções da fábrica para instalar a roda em um veículo moderno (levante o carro, coloque a roda - coloque as porcas) em vez de tentar descobrir como colocar uma roda de carroça no seu carro. Este plugin é super simples de usar. Para fazer a validação do formulário, é literalmente uma inclusão, algumas anotações e uma única chamada de método.
Jfgrissom 30/07
3
Agora você está reinventando a metáfora 'reinventar a roda'!
Dom Vinyard
Para as pessoas preso trabalhando em webforms aplicativos encosia.com/using-jquery-validation-with-asp-net-webforms
Jerreck
38

Veja http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ . É um ótimo plugin jQuery, que permite criar um poderoso sistema de validação de formulários. Existem algumas amostras úteis aqui . Portanto, a validação do campo de email no formulário ficará assim:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

Consulte a documentação do método Email para obter detalhes e amostras.

Andrew Bashtannik
fonte
11
O último ainda está vivo)
Andrew Bashtannik
6
mas o formato aceito é x@x(isso é estranho) ele deve [email protected]Como posso corrigir isso?
Basheer AL-MOMANI
2
@ BasheerAL-MOMANI [ jqueryvalidation.org/jQuery.validator.methods/] $.validator.methods.email = function( value, element ) { return this.optional( element ) || //^.+@.+\..+$/.test( value ); }
Bill Gillingham
17
<script type="text/javascript">
    $(document).ready(function() {
      $('.form_error').hide();
      $('#submit').click(function(){
           var name = $('#name').val();
           var email = $('#email').val();
           var phone = $('#phone').val();
           var message = $('#message').val();
           if(name== ''){
              $('#name').next().show();
              return false;
            }
            if(email== ''){
               $('#email').next().show();
               return false;
            }
            if(IsEmail(email)==false){
                $('#invalid_email').show();
                return false;
            }

            if(phone== ''){
                $('#phone').next().show();
                return false;
            }
            if(message== ''){
                $('#message').next().show();
                return false;
            }
            //ajax call php page
            $.post("send.php", $("#contactform").serialize(),  function(response) {
            $('#contactform').fadeOut('slow',function(){
                $('#success').html(response);
                $('#success').fadeIn('slow');
               });
             });
             return false;
          });
      });
      function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
      }
  </script>

<form action="" method="post" id="contactform">
                            <table class="contact-table">
                              <tr>
                                <td><label for="name">Name :</label></td>
                                <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="form_error">Please enter your name</span></td>
                              </tr>
                              <tr>
                                <td><label for="email">Email :</label></td>
                                <td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="form_error">Please enter your email</span>
                                  <span class="form_error" id="invalid_email">This email is not valid</span></td>
                              </tr>
                              <tr>
                                <td><label for="phone">Phone :</label></td>
                                <td class="phone"><input name="phone" id="phone" type="text" placeholder="Please enter your phone" class="contact-input"><span class="form_error">Please enter your phone</span></td>
                              </tr>
                              <tr>
                                <td><label for="message">Message :</label></td>
                                <td class="message"><textarea name="message" id="message" class="contact-input"></textarea><span class="form_error">Please enter your message</span></td>
                              </tr>
                              <tr>
                                <td></td>
                                <td>
                                  <input type="submit" class="contactform-buttons" id="submit"value="Send" />
                                  <input type="reset" class="contactform-buttons" id="" value="Clear" />
                                </td>
                              </tr>
                            </table>
     </form>
     <div id="success" style="color:red;"></div>
user1993920
fonte
15

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#validate").keyup(function(){

        var email = $("#validate").val();

        if(email != 0)
        {
            if(isValidEmailAddress(email))
            {
                $("#validEmail").css({
                    "background-image": "url('validYes.png')"
                });
            } else {
                $("#validEmail").css({
                    "background-image": "url('validNo.png')"
                });
            }
        } else {
            $("#validEmail").css({
                "background-image": "none"
            });         
        }

    });

});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

</script>

<style>
    #validEmail
    {
        margin-top: 4px;
        margin-left: 9px;
        position: absolute;
        width: 16px;
        height: 16px;
    }

    .text
    {
        font-family: Arial, Tahoma, Helvetica;
    }
</style>

    <title>Live Email Validation with jQuery Demo</title>
</head>
<body>
    <div class="text"><h1>Reynoldsftw.com - Live Email Validation</h1><h2>Type in an email address in the box below:</h2></div>
    <div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>
    <div class="text"><P>More script and css style

: www.htmldrive.net


Fonte: htmldrive.com

SwatiKothari
fonte
14

Eu recomendaria o Verimail.js , ele também possui um plug-in JQuery .

Por quê? A Verimail suporta o seguinte:

  • Validação de sintaxe (de acordo com a RFC 822)
  • Validação de TLD da IANA
  • Sugestão ortográfica para os TLDs e domínios de email mais comuns
  • Negar domínios temporários da conta de email, como mailinator.com

Além da validação, o Verimail.js também oferece sugestões. Portanto, se você digitar um email com o TLD ou domínio errado e muito semelhante a um domínio de email comum (hotmail.com, gmail.com, etc.), ele poderá detectar isso e sugerir uma correção.

Exemplos:

E assim por diante..

Para usá-lo com o jQuery, inclua verimail.jquery.js no seu site e execute a função abaixo:

$("input#email-address").verimail({
    messageElement: "p#status-message"
});

O elemento message é um elemento no qual uma mensagem será mostrada. Isso pode ser de "Seu email é inválido" a "Você quis dizer ...?".

Se você possui um formulário e deseja restringi-lo para que ele não possa ser enviado, a menos que o email seja válido, verifique o status usando a função getVerimailStatus, como mostrado abaixo:

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid
}else{
    // Valid
}

Essa função retorna um código de status inteiro de acordo com o objeto Comfirm.AlphaMail.Verimail.Status. Mas a regra geral é que quaisquer códigos abaixo de 0 são códigos indicando erros.

Robin Orheden
fonte
.getVerimailStatus()não retorna códigos de status numéricos, apenas um valor de sequência de success, errorou possivelmente pending(não verificou o último).
precisa saber é o seguinte
14

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here (email is invalid) */ }

isso foi fornecido pelo usuário Luca Filosofi nesta resposta, esta resposta

Amila kumara
fonte
Se você estiver usando isso na página ASP.NET MVC Razor, não esqueça de escapar do @caractere com outro @caractere. Assim @@, caso contrário, você receberá um erro de compilação.
Rosdi Kasim
11

Uma solução muito simples é usar a validação html5:

<form>
  <input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

  <input type="submit">
</form>

http://jsfiddle.net/du676/56/

iamse7en
fonte
10

Isso realiza uma validação mais completa, por exemplo, verifica pontos sucessivos no nome de usuário, como john..doe @ example.com

function isValidEmail(email)
{
    return /^[a-z0-9]+([-._][a-z0-9]+)*@([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,4}$/.test(email)
        && /^(?=.{1,64}@.{4,64}$)(?=.{6,100}$).*/.test(email);
}

Consulte validar endereço de email usando expressão regular em JavaScript .

Nerd
fonte
11
Mas os pontos sucessivos são realmente inválidos? Pelo contrário, acho que você excluiria endereços de email válidos ao fazer isso.
Icktoofay 2/11
9

Como já mencionado, você pode usar uma regex para verificar se o endereço de email corresponde a um padrão. Mas você ainda pode receber e-mails que correspondam ao padrão, mas meus emails ainda são rejeitados ou são spam.

verificando com uma regex

var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);

verificando com uma API de validação de email real

Você pode usar uma API que verificará se o endereço de email é real e está ativo no momento.

var emailAddress = "[email protected]"
response = $.get("https://isitarealemail.com/api/email/validate?email=" +
    emailAddress,
    function responseHandler(data) {
        if (data.status === 'valid') {
            // the email is valid and the mail box is active
        } else {
            // the email is incorrect or unable to be tested.
        }
    })

Para mais informações, consulte https://isitarealemail.com ou publicação no blog

Stephen
fonte
8

Se você possui um formulário básico, basta digitar o tipo de email: <input type="email" required>

Isso funcionará para navegadores que usam atributos HTML5 e, em seguida, você nem precisa de JS. Usar a validação de email mesmo com alguns dos scripts acima não fará muito, pois:

[email protected] [email protected] [email protected]

etc ... Todos serão validados como emails "reais". Portanto, seria melhor garantir que o usuário digite seu endereço de e-mail duas vezes para garantir que ele coloque o mesmo. Mas garantir que o endereço de e-mail seja real seria muito difícil, mas muito interessante para ver se havia um endereço de e-mail. caminho. Mas se você está apenas certificando-se de que é um email, atenha-se à entrada HTML5.

EXEMPLO FIDDLE

Isso funciona no FireFox e no Chrome. Pode não funcionar no Internet Explorer ... Mas o Internet Explorer é uma porcaria. Então tem isso ...

isaac weathers
fonte
O método regexp geralmente evita e-mails claramente tolos como um @ bc (que seu exemplo JSFiddle vinculado permite usar o Chrome mais recente); portanto, a solução HTML5 é claramente uma solução inadequada.
SnowInferno 23/09
legal. Então, que tal usar apenas a correspondência de padrões como o HTML5 "deveria"? Por que você não tenta isso em seu chromebook: jsfiddle.net/du676/8
isaac weathers
8

Validação de email Javascript no MVC / ASP.NET

O problema que encontrei ao usar a resposta de Fabian, é implementá-lo em uma exibição MVC por causa do @símbolo Razor . Você precisa incluir um @símbolo adicional para escapar, da seguinte forma:@@

Evitar Navalha no MVC

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

Eu não o vi em nenhum outro lugar nesta página, então achei que poderia ser útil.

EDITAR

Aqui está um link da Microsoft descrevendo seu uso.
Acabei de testar o código acima e obtive os seguintes js:

function validateEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
  return regex.test(email);
}

O que está fazendo exatamente o que deveria fazer.

Trevor Nestman
fonte
@ nbrogi O que você quer dizer com isso não funciona? Acabei de verificar isso novamente e isso produz os seguintes js var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; O que está acontecendo com seu código?
Trevor Nestman 6/02
Desculpe, não tenho certeza no momento, mudei completamente.
Nkkollaw 6/02
Por favor me avise quando puder. Se esta é uma informação ruim, então eu anotarei. Tento contribuir com informações úteis sempre que possível, e isso me ajudou ao escrever um regex em uma exibição do MVC.
Trevor Nestman 6/02
Mais uma vez, eu gostaria de saber por que isso foi rebaixado. Ele faz exatamente o que eu estou querendo, que é produzir o @símbolo em uma expressão regular em .cshtml. Normalmente, trataria tudo depois do @símbolo como código de barbear, mas o duplo @@impede isso.
Trevor Nestman 7/02
A questão principal que vejo é que no segundo codeblock seu regex está definido para uma variável chamada regex, mas a segunda linha usa uma variável denominada re
phlare
7
function isValidEmail(emailText) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailText);
};

Use como este:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }
JayKandari
fonte
6
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}
JAB
fonte
5
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    };
    $("#btnValidate").live("click", function () {
        if (!ValidateEmail($("#txtEmail").val())) {
            alert("Invalid email address.");
        }
        else {
            alert("Valid email address.");
        }
    });
</script>
<input type = "text" id = "txtEmail" />
<input type = "button" id = "btnValidate" value = "Validate" />
Pritam
fonte
4

Chegou aqui ..... acabou aqui: https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

... que forneceu o seguinte regex:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

... que encontrei graças a uma observação no leia-me do plugin jQuery Validation: https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

Assim, a versão atualizada do @Fabian 's resposta seria:

function IsEmail(email) {
  var regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
  return regex.test(email);
}

espero que ajude

timborden
fonte
Essa foi a melhor resposta para mim - ela voltou verdadeira, [email protected]mas gostaria que isso fosse falso #
Adam Knights
3

usa isto

if ($this.hasClass('tb-email')) {
    var email = $this.val();
    var txt = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!txt.test(email)) {
        e.preventDefault();
        $this.addClass('error');
    } else {
        $this.removeClass('error');
    }
}
Ankit Agrawal
fonte
3

O bug está no Jquery Validation Validation Plugin Valida apenas com @ para alterar isso

mude o código para este

email: function( value, element ) {
    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    // Retrieved 2014-01-14
    // If you have a problem with this implementation, report a bug against the above spec
    // Or use custom methods to implement your own email validation
    return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
}
user4974898
fonte
3

Para aqueles que desejam usar uma solução melhor de manutenção do que as correspondências RegEx disruptivas e duradouras, escrevi algumas linhas de código. Para quem deseja salvar bytes, atenha-se à variante RegEx :)

Isso restringe:

  • Não @ na cadeia
  • Nenhum ponto na string
  • Mais de 2 pontos após @
  • Caracteres incorretos no nome de usuário (antes de @)
  • Mais de 2 @ em sequência
  • Caracteres incorretos no domínio
  • Caracteres inválidos no subdomínio
  • Caracteres incorretos no TLD
  • TLD - endereços

De qualquer forma, ainda é possível vazar, por isso, combine isso com uma validação do lado do servidor + verificação de link de email.

Aqui está o JSFiddle

 //validate email

var emailInput = $("#email").val(),
    emailParts = emailInput.split('@'),
    text = 'Enter a valid e-mail address!';

//at least one @, catches error
if (emailParts[1] == null || emailParts[1] == "" || emailParts[1] == undefined) { 

    yourErrorFunc(text);

} else {

    //split domain, subdomain and tld if existent
    var emailDomainParts = emailParts[1].split('.');

    //at least one . (dot), catches error
    if (emailDomainParts[1] == null || emailDomainParts[1] == "" || emailDomainParts[1] == undefined) { 

        yourErrorFunc(text); 

     } else {

        //more than 2 . (dots) in emailParts[1]
        if (!emailDomainParts[3] == null || !emailDomainParts[3] == "" || !emailDomainParts[3] == undefined) { 

            yourErrorFunc(text); 

        } else {

            //email user
            if (/[^a-z0-9!#$%&'*+-/=?^_`{|}~]/i.test(emailParts[0])) {

               yourErrorFunc(text);

            } else {

                //double @
                if (!emailParts[2] == null || !emailParts[2] == "" || !emailParts[2] == undefined) { 

                        yourErrorFunc(text); 

                } else {

                     //domain
                     if (/[^a-z0-9-]/i.test(emailDomainParts[0])) {

                         yourErrorFunc(text); 

                     } else {

                         //check for subdomain
                         if (emailDomainParts[2] == null || emailDomainParts[2] == "" || emailDomainParts[2] == undefined) { 

                             //TLD
                             if (/[^a-z]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text);

                              } else {

                                 yourPassedFunc(); 

                              }

                        } else {

                             //subdomain
                             if (/[^a-z0-9-]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text); 

                             } else {

                                  //TLD
                                  if (/[^a-z]/i.test(emailDomainParts[2])) {

                                      yourErrorFunc(text); 

                                  } else {

                                      yourPassedFunc();
}}}}}}}}}
SEsterbauer
fonte
3

Você pode usar a validação do jQuery e, em uma única linha HTML, pode validar o email e a mensagem de validação de email:type="email" required data-msg-email="Enter a valid email account!"

Você pode usar o parâmetro data-msg-email para inserir uma mensagem personalizada ou, caso contrário, não coloque esse parâmetro e a mensagem padrão será exibida: "Digite um endereço de email válido".

Exemplo completo:

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required data-msg-email="Enter a valid email account!">
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>
JC Gras
fonte
2
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

if($("input#email-address").getVerimailStatus() == 'error') { 

(right code)

}
Lorenzo
fonte
9
Você pode elaborar sua resposta ... por exemplo, você deve mencionar que getVerimailStatus é um plug-in adicional.
Dave Hogan
2
checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );

Referência: SITE JQUERY UI

Daniel Adenew
fonte
2

você deve ver isso: jquery.validate.js , adicione-o ao seu projeto

usando assim:

<input id='email' name='email' class='required email'/>
Chuanshi Liu
fonte
2

Outra opção simples e completa:

<input type="text" id="Email"/>
<div id="ClasSpan"></div>   
<input id="ValidMail" type="submit"  value="Valid"/>  


function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

$("#ValidMail").click(function () {
    $('span', '#ClasSpan').empty().remove();
    if (IsEmail($("#Email").val())) {
        //aqui mi sentencia        
    }
    else {
        $('#ClasSpan').append('<span>Please enter a valid email</span>');
        $('#Email').keypress(function () {
            $('span', '#itemspan').empty().remove();
        });
    }
});
jorcado
fonte
3
Stack Overflow é um site em inglês. Por favor, não publique conteúdo em outros idiomas.
Anders
2

Você pode criar sua própria função

function emailValidate(email){
    var check = "" + email;
    if((check.search('@')>=0)&&(check.search(/\./)>=0))
        if(check.search('@')<check.split('@')[1].search(/\./)+check.search('@')) return true;
        else return false;
    else return false;
}

alert(emailValidate('[email protected]'));
Wahid Masud
fonte
1

Um simplificado que acabei de fazer, faz o que preciso. Limitei a apenas alfanumérico, ponto, sublinhado e @.

<input onKeyUp="testEmailChars(this);"><span id="a"></span>
function testEmailChars(el){
    var email = $(el).val();
    if ( /^[[email protected]]+$/.test(email)==true ){
        $("#a").html("valid");
    } else {
        $("#a").html("not valid");
    }
}

Feito com a ajuda de outras pessoas

nathan
fonte
1

Esse regexp evita nomes de domínio duplicados, como [email protected], permitirá apenas o domínio duas vezes, como [email protected]. Também não permite estatísticas de números como [email protected]

 regexp: /^([a-zA-Z])+([a-zA-Z0-9_.+-])+\@(([a-zA-Z])+\.+?(com|co|in|org|net|edu|info|gov|vekomy))\.?(com|co|in|org|net|edu|info|gov)?$/, 

Muito bem sucedida !!!!!

Brijeshkumar
fonte
1

Valide o email enquanto digita, com a manipulação do estado do botão.

$("#email").on("input", function(){
    var email = $("#email").val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!filter.test(email)) {
      $(".invalid-email:empty").append("Invalid Email Address");
      $("#submit").attr("disabled", true);
    } else {
      $("#submit").attr("disabled", false);
      $(".invalid-email").empty();
    }
  });
Radovan Skendzic
fonte
1

se você estiver usando a validação de jquery

Criei um método emailCustomFormatusado regexpara o meu formato de custódia, você pode alterá-lo para atender às suas necessidades

jQuery.validator.addMethod("emailCustomFormat", function (value, element) {
        return this.optional(element) || /^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/.test(value);
    }, abp.localization.localize("FormValidationMessageEmail"));// localized message based on current language

então você pode usá-lo assim

$("#myform").validate({
  rules: {
    field: {
      required: true,
      emailCustomFormat : true
    }
  }
});

este regex aceita

[email protected], [email protected] mas não isso

abc@abc, [email protected],[email protected]

Espero que isso ajude você

Basheer AL-MOMANI
fonte