Captcha - Custom Character Set

 

Demo Configurator

  • Characters to Use:
    LettersAndNumbers
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadCaptcha allows you to easily control the character set from which the CaptchaImage text is randomly generated.

There are three predefined sets to choose from:

  • LettersAndNumbers
  • Letters
  • Numbers

If you wish to specify your own character set, choose CustomCharSet for the CaptchaImage.TextChars property and set the desired character sequence to the CaptchaImage.CharSet property. Please note that for security reasons you need to provide at least 15 characters.

Additionally, you can tell the RadCaptcha to respect/ignore the letter case by setting the IgnoreCase property. By default the letter case is ignored (i.e., IgnoreCase="true").

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Captcha.CharacterSet.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function pageLoad() {
            //Disable autoComplete
            var customCaptchaTextbox = $get("<%=txtCharSet.ClientID %>");
            if (customCaptchaTextbox)
                customCaptchaTextbox.setAttribute("autoComplete", "off");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="zoneToDecorate" DecoratedControls="All" />
    <div class="demo-containers">
    <div class="demo-container"  id="zoneToDecorate">
        <div>
            <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
                ValidationGroup="Group" EnableRefreshImage="true" CaptchaTextBoxCssClass="textBox">
                <CaptchaImage ImageCssClass="imageClass" BackgroundColor="#dff3ff" TextColor="Black"></CaptchaImage>
            </telerik:RadCaptcha>
            <div>
                <telerik:RadButton RenderMode="Lightweight" ID="btnValidate" runat="server" Text="Verify Code" ValidationGroup="Group"></telerik:RadButton>
            </div>
        </div>
    </div>
    </div>
    <telerik:RadAjaxManager ID="ajaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Characters1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Characters1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadCaptcha1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorColumn2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnUpdateChanges">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCaptcha1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorColumn2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cbIgnoreCase">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCaptcha1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>


    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Characters to Use:</span>
                            <qsf:DropDownList ID="Characters1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Characters1_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Text="LettersAndNumbers" Selected="True"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Letters"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Numbers"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="CustomCharSet"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="cbIgnoreCase" runat="server" Text="Ignore Case of the Letters"
                                    AutoPostBack="true" Checked="true" OnCheckedChanged="CheckBox_IgnoreCase"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox ID="txtCharSet" runat="server" Text="abcdefghijkmnopqrstuvwxyz" Width="200px"
                                Visible="false" BorderStyle="Solid" Label="RadCaptcha Character Set (Enter at least 15 characters):" CssClass="textBox">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <qsf:Button ID="btnUpdateChanges" runat="server" Text="Set" OnClick="btnUpdateChanges_Click"
                                Visible="false">
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?