KINERCODE.JS

1 /*验证码*/
  2 function KinerCode(options) {
  3     this.opt = this.extend(true, this.options, options);
  4     this.opt.chars = (this.opt.chars && this.opt.chars.length == 0) ? this.options.chars : this.opt.chars;
  5     //背景图优先级最高，用户指定背景颜色优先级次之，随机背景颜色优先级最低
  6     this.opt.bg = (this.opt.bgImg && this.opt.bgImg.length != 0) ? "url('" + this.opt.bgImg + "')" : this.options.bgColor;
  7     //当验证码是算术题形式时，先计算出算式的结果并保存与answer数组中
  8     if(this.opt.question){
  9         this.answer = [];
 10         for(var i=0;i<this.opt.chars.length;i++){
 11             this.answer.push(eval(this.opt.chars[i]));
 12         }
 13     }
 14     //插件初始化
 15     this.init();
 16     //绑定事件
 17     this.bind();
 18 }
 19 
 20 /*初始化，创建验证码元素*/
 21 KinerCode.prototype.init = function () {
 22     var self = this;
 23     if(!this.body){
 24         this.body = document.createElement('div');
 25     }else{
 26         this.body.innerHTML = '';
 27     }
 28     //当用户选择禁止复制验证码中文字时执行，禁用验证码区域及验证码输入框的复制、选中、右键菜单等操作
 29     if (!self.copy) {
 30         doProhibit();
 31     }
 32     //创建验证码
 33     this.myCode = this.createCode();
 34     //console.log(this.myCode);
 35     //创建验证码项元素并添加进其盒子中
 36     var len = this.myCode.arrCode.length;
 37     for (var i = 0; i < len; i++) {
 38         var item = this.createCodeEle(this.myCode.arrCode[i]);
 39         this.body.appendChild(item);
 40     }
 41     //为验证码盒子设置样式
 42     this.body.style.background = this.opt.randomBg ? this.toRGB().background : this.opt.bg;
 43     this.body.style.backgroundPosition = 'center';
 44     this.body.style.backgroundSize = 'cover';
 45     this.body.style.overflow = 'hidden';
 46     this.body.style.width = '100%';
 47     this.body.style.height = '100%';
 48     this.body.style.lineHeight = '100%';
 49     this.body.style.cursor = 'pointer';
 50     //alert(this.createCode().strCode);
 51     //禁止复制
 52     function doProhibit() {
 53         if (window.Event)
 54             document.captureEvents(Event.MOUSEUP);
 55         function nocontextmenu() {
 56             event.cancelBubble = true;
 57             event.returnvalue = false;
 58             return false;
 59         }
 60         function norightclick(e) {
 61             if (window.Event) {
 62                 if (e.which == 2 || e.which == 3)
 63                     return false;
 64             }
 65             else if (event.button == 2 || event.button == 3) {
 66                 event.cancelBubble = true
 67                 event.returnvalue = false;
 68                 return false;
 69             }
 70         }
 71         function select() {
 72             return false;
 73         }
 74         self.body.oncontextmenu = nocontextmenu;
 75         self.body.onmousedown = norightclick;
 76         self.body.onselectionstart = select;
 77         self.body.oncopy = function () {
 78             return false;
 79         };
 80         self.body.oncut = function () {
 81             return false;
 82         };
 83         self.opt.inputArea.style.imeMode = 'disabled';
 84         self.opt.inputArea.onpaste = function () {
 85             return false;
 86         };
 87         self.opt.inputArea.oncontextmenu = nocontextmenu;
 88         self.opt.inputArea.onmousedown = norightclick;
 89         self.opt.inputArea.onselectionstart = select;
 90         setSelectable(self.body, false);
 91     }
 92     this.opt.codeArea.appendChild(this.body);
 93     // 参数 obj: 要禁止选中文本的元素的jquery对象
 94     // 参数 enabled: true, 可选中; false, 不可选中
 95     function setSelectable(obj, enabled) {
 96         if (enabled) {
 97             obj.removeAttribute("unselectable");
 98             obj.removeAttribute("onselectstart");
 99             obj.style["-moz-user-select"] = '';
100             obj.style["-webkit-user-select"] = "";
101         } else {
102             obj.setAttribute("unselectable", "on");
103             obj.setAttribute("onselectstart", "return false;");
104             obj.style["-moz-user-select"] = 'none';
105             obj.style["-webkit-user-select"] = "none";
106         }
107     }
108 };
109 
110 /* 刷新验证码操作 */
111 KinerCode.prototype.refresh = function () {
112     this.init();
113 };
114 
115 /*绑定事件*/
116 KinerCode.prototype.bind = function () {
117     var self = this;
118     //刷新验证码
119     if (self.opt.click2refresh) {
120         self.bindHandler(self.body,'click',function(){
121             self.refresh();
122         });
123     }
124     /* 绑定验证回调函数*/
125     self.bindHandler(self.opt.inputArea,self.opt.validateEven,function(){
126         self.opt.validateFn.call(self,self.validate(),self.myCode);
127         if(self.opt.false2refresh && !self.validate()){
128             self.refresh();
129             self.opt.inputArea.focus();
130             self.opt.inputArea.select();
131         }
132     });
133 };
134 
135 /* 绑定事件方法*/
136 KinerCode.prototype.bindHandler = function(elem, type, handler) {
137     if (window.addEventListener) {// 标准浏览器
138             elem.addEventListener(type, handler, false);
139     } else if (window.attachEvent) {// IE浏览器
140             elem.attachEvent("on" + type, handler);
141     }
142 };
143 
144 /*验证输入是否正确 */
145 KinerCode.prototype.validate = function(){
146     if(!this.opt.question)
147     return this.myCode.strCode.toLowerCase().trim()==this.opt.inputArea.value.toLowerCase().trim();
148     else
149     return parseFloat(this.myCode.answer) === parseFloat(this.opt.inputArea.value.trim());
150 };
151 
152 /*根据传进来的验证码项创建元素*/
153 KinerCode.prototype.createCodeEle = function (code) {
154     var item = document.createElement('span');
155     item.innerHTML = code;
156     item.style.color = this.toRGB().color;
157     item.style.textAlign = 'center';
158     item.style.height = '100%';
159     item.style.lineHeight = this.opt.codeArea.offsetHeight + 'px';
160     //item.style.margin = '0 2%';
161     if(!this.opt.question){
162         item.style.width = 90 / this.opt.len + '%';
163     }else{
164         item.style.width = '100%';
165     }
166     item.style.padding = '0 1%';
167     item.style.fontSize = '1.5em';
168     item.style.display = 'inline-block';
169     return item;
170 };
171 
172 /*产生随机颜色的函数，可以产生随机的背景色和前景色（也就是字体的颜色）*/
173 KinerCode.prototype.toRGB = function () {
174     var str = "", str2 = "";
175     var num = [], strs2 = [], strs = [];
176     var i = 0;
177     for (i = 0; i < 3; i++) {
178         num.push(parseInt(Math.random() * 255));
179     }
180     for (i = 0; i < num.length; i++) {
181         strs.push(num[i].toString(16));
182         strs2.push((255 - num[i]).toString(16))
183     }
184     for (i = 0; i < strs.length; i++) {
185         str += strs[i];
186         str2 += strs2[i];
187     }
188     var rgb = {
189         background: '#' + str,
190         color: '#' + str2
191     };
192     return rgb;
193 };
194 
195 /*根据验证码类型及长度创建验证码*/
196 KinerCode.prototype.createCode = function () {
197     var str = "";
198     var codes = [];
199     var char;
200     var self = this;
201     var answer = '';
202     if(this.opt.question){
203         var c = parseInt(Math.random() * self.opt.chars.length);
204         char = self.opt.chars[c];
205         str  = char;
206         answer = this.answer[c];
207         codes.push(char);
208     }else{
209         for (var i = 0; i < self.opt.len; i++) {
210             var c = parseInt(Math.random() * self.opt.chars.length);
211             char = self.opt.chars[c];
212             str += char;
213             codes.push(char);
214         }
215     }
216     return this.myCode = {
217         strCode: str,
218         arrCode: codes,
219         answer : answer
220     };
221 };
222 
223 /* 默认选项 */
224 KinerCode.prototype.options = {
225     len: 4,//需要产生的验证码长度
226     chars: [
227         1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
228         'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
229         'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
230     ],//指定产生验证码的词典，若不给或数组长度为0则试用默认字典
231     copy: false,//是否允许复制产生的验证码
232     //bgColor: "#222222",//背景颜色[与背景图任选其一设置]
233     bgImg: "",
234     randomBg: true,//若选true则采用随机背景颜色，此时设置的bgImg和bgColor将失效
235     inputArea: "",//输入验证码的input对象绑定【  HTMLInputElement 】
236     codeArea: "",//验证码放置的区域【  HTMLDivElement 】
237     click2refresh: true,//是否点击验证码刷新验证码
238     validateEven : "",//触发验证的方法名，如click，blur等
239     validateFn : function(result,strCode){}
240 };
241 
242 /* 扩展对象方法*/
243 KinerCode.prototype.extend = function (flag, destination, source) {
244     if (flag) {
245         var obj = {};
246         for (var property in destination) {
247             obj[property] = destination[property];
248         }
249         for (var property in source) {
250             obj[property] = source[property];
251         }
252         return obj;
253     } else {
254         for (var property in source)
255             destination[property] = source[property];
256         return destination;
257     }
258 };