2017-09-08 1 views
0

Comment puis-je afficher une image de case à cocher verte à côté de la zone de texte pour une utilisation valide?
J'essaye de montrer ceci quand l'utilisateur est passé à la zone de texte suivante.Comment vérifier sur valide

Voici mon code pour une utilisation invalide

<asp:TextBox ID="TextBoxEMail" runat="server" ValidationGroup="Valid1"></asp:TextBox> 

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" 
runat="server" ErrorMessage="EMail is invalid" 
ControlToValidate="TextBoxEMail" 
ValidationGroup="Valid1" Display="Dynamic" ForeColor="Red" 
ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]* 
[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$"></asp:RegularExpressionValidator> 

Répondre

1

Vous pouvez le faire en utilisant JavaScript (ou jQuery). Voici un exemple de javascript.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs"  Inherits="WebApplication1.Test" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <link type="text/css" rel="stylesheet" href="Content/Site.css" /> 
    <title></title> 

    <script type="text/javascript"> 
     function checkMailAddress(tb) { 
      var regEx = RegExp(/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/); 
      var img = document.getElementById("imgValidate"); 
      if (regEx.test(tb.value)) { 
       img.style.display = "block"; 
      } 
      else 
       img.style.display = "none"; 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <asp:TextBox ID="txtEmail" runat="server" onchange="checkMailAddress(this)"></asp:TextBox> 
      <asp:Image ID="imgValidate" runat="server" Height="18px" ImageUrl="~/Images/Ok.png" Width="22px" CssClass="validationImage" /> 

     </div> 
    </form> 
</body> 
</html> 

Et dans le site.css:

.validationImage 
{ 
    display:none; 
} 

Le site.css est dans le dossier contenu dans le projet. Et l'image Ok.png est dans le dossier Images.