Extjs4.0.7 关于验证码的C#实现

直接上传原码，大家自己去慢慢理解吧。该文章只是讲解了验证码的简单实现和原理，希望大家通过它设计出更绚丽的界面。

如有不对的地方希望大家指正。

1、css文件checkcode.css （定义验证码图片的显示大小）

#CheckCode{ float:left;}
.x-form-code{width:73px;height:20px;vertical-align:middle;cursor:pointer; float:left; margin-left:7px;}

2、html文件（建立登陆页面）

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>V3系统登陆</title>
    <link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="/CSS/css.css" />
    <link rel="stylesheet" type="text/css" href="/CSS/checkcode.css" />
    <script type="text/javascript" src="/extjs4/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/extjs4/ext-all.js"></script>
    <script type="text/javascript" src="/js/v3login.js"></script>
<style type="text/css">body{
    background-image:url(/images/eg_bg_06.gif);
    background-repeat: repeat
    }
</style>
</head>
<body>
</body>
</html>

3、Extjs文件 v3login.js （Extjs的具体实现，登陆采用Form的形式）

    Ext.BLANK_IMAGE_URL = 'images/s.gif';
    Ext.define('myCheckCode',{
        extend: 'Ext.form.field.Text',
        alias: 'widget.checkcode',
        inputTyle:'codefield',
        codeUrl:Ext.BLANK_IMAGE_URL,
        isLoader:true,
        onRender:function(ct,position){
            this.callParent(arguments);
            this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});
            this.codeEl.addCls('x-form-code');
            this.codeEl.on('click', this.loadCodeImg, this);

            if (this.isLoader) this.loadCodeImg();
        },
        alignErrorIcon: function() {
            this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
        },
        loadCodeImg: function() {
            this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
        }
    })

    var checkcode = Ext.create('myCheckCode',{
            cls : 'key',
            fieldLabel : '验证码',
            name : 'CheckCode',
            id : 'CheckCode',
            allowBlank : false,
            isLoader:true,
            blankText : '验证码不能为空',
            codeUrl: '/ckc.ashx',
            //labelStyle: 'font-weight:bold;padding:0',
            labelWidth:70,
            //height:70,
            labelAlign: 'right',
            width : 150
        })

var Login = function(){
var Login_Form = Ext.create('Ext.form.Panel', {
    id:'Login_Form',
    frame: true,
    //layout: 'anchor',   //该form分为两列
    bodyPadding: 5,
    baseCls: "x-plain", //指定使用系统背景色
    //defaults: { anchor: "95%", msgTarget: "side" },
    fieldDefaults: {
        labelAlign: 'left'
        //labelWidth: 90,
        //anchor: '100%'
    },
    items:[{
                xtype: 'fieldcontainer',
                labelStyle: 'font-weight:bold;padding:0',
                width:400,
                height:100,
                x:-40,
                y:-8,
                labelWidth: 300,
                labelHeight:100,
                readOnly:true,
                style:{
                        background: '#ffffff url(/images/logintop.jpg) no-repeat left center',     //no-repeat
                        paddingLeft: '30px'   //20px
                },
                fieldLabel: ''
   },{

补充：web前端 , JavaScript ,