<script src="code.js"></script>

<form>
    <br/>
    登录名:<input type="text" name="username"/><br/><br/>
    密&nbsp;码:<input type="password" name="pwd"/>
    <div id="codeContainer"></div>
    <br>
    <input type="button" name="login" value="登录" style="width: 80px;height:30px;line-height: 30px;"/>
</form>

var cd = new code('#codeContainer',{                    //需要绑定的元素，符合xpath语法
        on: true,                                          //是否显示验证码组件，默认为false
        codeUrl: 'http://localhost:8080/login/getCode',    //验证码请求地址
        validUrl: ['http://localhost:8080/login/validCode','verifyCode','POST','flag'],  //[用户输入验证码验证地址，验证码上传到服务器提交的接口参数名，ajax提交方式，验证成功的判断字段]
        changeCallback: function(){...}                    //验证码输入框输入改变事件
        focusCallback: function(){...}                     //输入框获得焦点事件
        blurCallback: function(){...}                      //输入框失去焦点事件
        refreshCallback: function(){...}                   //验证码刷新事件
    });

(function (root, factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        // AMD
        define('code', [], function () {
            return factory;
        });
    } else if (typeof exports === 'object') {
        // Node.js
        module.exports.code = factory;
    } else {
        // Browser globals
        root.code = factory;
    }
}(typeof window !== "undefined" ? window : this, function (ele,opt) {
...
}));

	this.on = opt.on || false; //是否开启验证码
	this.status = opt.on?null:'correct';//验证码状态
    this.codeUrl = opt.codeUrl; //验证码请求地址
    this.validUrl = opt.validUrl; //验证码验证地址

    this.changeCallback = opt.changeCallback || _changeCallback; //验证码输入框输入改变事件
    this.focusCallback = opt.focusCallback || _focusCallback; //输入框获得焦点事件
    this.blurCallback = opt.blurCallback || _blurCallback; //输入框失去焦点事件
    this.refreshCallback = opt.refreshCallback || _refreshCallback; //验证码刷新事件
	this.show = function(){
        _$(ele).setAttribute("style","display:block;");
    }; //验证码显示方法
    this.check = function(cb){
            cb = cb || alert;
            switch(me.status){
                case null:
                    cb('请输入验证码！');
                    return;
                case 'correct':
                    return true;
                case 'less':
                case 'beyond':
                case 'error':
                    cb('验证码输入错误！');
                    return;
                default:
                    cb('验证码出错！');
                    return;
            }
        };//检查验证码是否正确
    this.refresh = function(){
            _$(ele + ' .input-tip').setAttribute('class','input-tip');
            _$(ele + ' #code').value = "";
            _$(ele + ' .refreshCode img').setAttribute('src', me.codeUrl + '?' + new Date().getTime());
        };//刷新验证码方法

var template = function () {
        this.parts = [];
        this._pushAll(arguments);
    };
    template.prototype = {
        _: function () {
            this._pushAll(arguments);
            return this;
        },

        toString: function () {
            return this.parts.join('');
        },

        _pushAll: function (arr) {
            var i, n = arr.length;
            for (i = 0; i < n; i++) {
                this.parts.push(arr[i]);
            }
        }
    };

function _ajax(opt){//opt{url: ,method: ,data:{}, success: function(){}, error: function(){}}
        //创建 - 非IE6 - 第一步
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else { //IE6及其以下版本浏览器
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        //接收 - 第三步
        xhr.addEventListener("readystatechange", function () {
            if (xhr.readyState == 4) {
                var status = xhr.status;
                if (status >= 200 && status < 300) {
                    opt.success && opt.success(xhr.responseText);
                } else {
                    opt.error && opt.error(xhr.status);
                }
            }
        });

        //连接 和 发送 - 第二步
        if (opt.type === "GET") {
            xhr.open("GET", opt.url, true);
            xhr.send(null);
        } else if (opt.type === "POST") {
            xhr.open("POST", opt.url, true);
            //设置表单提交时的内容类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
            xhr.send(opt.data&&opt.data || null);
        }
    }