Validação de e-mail com RegularExpressionValidator

Postado em 07. mar, 2012 por em Tudo sobre Tecnologia

Olá pessoal! Hoje demonstrarei como validar um ou vários endereços de e-mail em um input, utilizando o RegularExpressionValidator.

Uma das grandes vantages de se utilizar o RegularExpressionValidator neste caso, é não depender de um submit no formulário e ter que se preocupar com validações básicas e as demais ações que você precisa fazer em seu back-end.  A validação acontece em tempo real, ou seja, quando o campo perder o fóco a validação do RegularExpressionValidator é efetuada de acordo com as condições declaradas no ValidationExpression.

Primeiro vamos a um exemplo onde validaremos um ou mais endereços de e-mail em um mesmo TextBox utilizando a vírgula como separador:

<asp:Label ID="lblEnderecosEmailMultiplos" runat="server" Text="Endereços de E-mail: (separar por vírgula)"></asp:Label>
<asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txtEnderecosEmailMultiplos"
ID="validaEnderecosEmail" runat="server" ErrorMessage="E-mail inválido" ValidationExpression="^(\s*,?\s*[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})+\s*$"
CssClass="alert_error"></asp:RegularExpressionValidator>
<br />
<asp:TextBox ID="txtEnderecosEmailMultiplos" runat="server" Height="50px" TextMode="MultiLine" CssClass="textarea-input"></asp:TextBox>

Obs.: Pode haver ou não espaço entre os endereços inputados, não implica na validação.

Agora um exemplo básico/clássico, onde validaremos um único endereço de e-mail:

<asp:Label ID="lblEmail" runat="server" Text="Endereço de E-mail:"></asp:Label>
<asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txtEmail" ID="validaEnderecoEmail"
runat="server" ErrorMessage="E-mail inválido" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
CssClass="alert_error"></asp:RegularExpressionValidator>
<br />
<asp:TextBox ID="txtEmail" runat="server" MaxLength="65" CssClass="text-input"></asp:TextBox>

Abaixo o css que utilizei nos exemplos acima:

<pre><style type="text/css">
input.text-input, .textarea-input
{ border: 1px solid #999;
width: 400px;
padding: 2px;
text-transform: lowercase;
}
.alert_error
{
margin-left: 5px;
color: #E5383E;
font-size: 11px;
font-family: Verdana;
}
</style></pre>

Simples, rápido e prático! Façam bom proveito e qualquer dúvida estamos à disposição.

Grande abraço.

Deixe um comentário

You must be logged in to post a comment.