有谁知道使用JQuery 验证码插件的 帮帮忙

JavaScript023

有谁知道使用JQuery 验证码插件的 帮帮忙,第1张

* @example: $.idcode.setCode()

* @desc: Make a validate code append to the element that id is idcode.

将验证码附加到 id 为 idcode 的元素里去

*

* @example $.idcode.validateCode()

* @desc return true if user input value equal idcode.

如果用户输入的值等于验证码,返回true

具体的自已进行实验,还有看 jquery.idcode.js 里的内容,比较精短,还是能看懂它是怎么实现的

/**

* SendCode Plugin

*/

//发送验证码插件开始

//匿名函数执行

!function () {

"use strict"//要求严格语法

//声明SendCode对象并初始化参数

function SendCode (element, options) {

this.$btn = $(element)//获取按钮元素

//合并多个参数 初始化参数(用于外部传递参数覆盖默认参数)

this.options = $.extend({}, SendCode.DEFAULTS, options || {})

}

//控件开放的参数默认值

SendCode.DEFAULTS = {

run: false, // 是否自动倒计时

secs: 60, // 倒计时时长(秒)

disClass: '', // 禁用按钮样式

runStr: '{%s}秒后重新获取', // 倒计时显示文本

resetStr: '重新获取验证码' // 倒计时结束后按钮显示文本

}

//全局计时器变量,清除用

SendCode.timer = null

/**

* 开始倒计时

*/

SendCode.prototype.start = function () {

var _this = this,

options = _this.options,

secs = options.secs

_this.$btn.html(_this.getStr(secs)).css('pointer-events', 'none').addClass(options.disClass)

_this.timer = setInterval(function () {

secs--

_this.$btn.html(_this.getStr(secs))

if (secs <= 0) {

_this.resetBtn()

clearInterval(_this.timer)

}

}, 1000)

}

/**

* 获取倒计时显示文本

* @param secs

* @returns {string}

*/

SendCode.prototype.getStr = function (secs) {

return this.options.runStr.replace(/\{([^{]*?)%s(.*?)\}/g, secs)

}

/**

* 重置按钮

*/

SendCode.prototype.resetBtn = function () {

var _this = this,

options = _this.options

_this.$btn.html(options.resetStr).css('pointer-events', 'auto').removeClass(options.disClass)

}

//jQuery 插件扩展方法

function Plugin (option) {

/*主要用于控件二次调用,比如$('div').sendCode('getStr ',120) 这个时候,第一个参数只是方法名,第二个参数才是option,所以,下面这句代码的意义就是取到第二个参数。其实就是变相将sendcode内部方法外露出去

*/

var args = Array.prototype.slice.call(arguments, 1)

/*留意最下面一行代码,$.fn.sendCode = Plugin此代码的意义是在jQuery控件库扩展了一个叫sendCode的控件,调用方法为$('div').sendCode({secs:120}) 那么此时Plugin

的内置对象this为$('div')是一个数组,所以要循环生成控件。这样做法是为了满足调用方在页面上一次生成多个控件。

*/

return this.each(function () {

var $this = $(this),//单个元素

sendcode = $this.data('ydui.sendcode')//获取保存在元素上的SendCode对象

//如果元素上没有保存过对象,那么初始化SendCode对象并保存到元素上

if (!sendcode) {

$this.data('ydui.sendcode', (sendcode = new SendCode(this, option)))

//如果option参数是对象,那么直接启动控件

if (typeof option == 'object' && option.run) {

sendcode.start()

}

}

//这里就是上面说的二次调用,$('div').sendCode('run')这个时候的option='run'

if (typeof option == 'string') {

sendcode[option] && sendcode[option].apply(sendcode, args)

}

})

}

//将控件扩展到jQuery

$.fn.sendCode = Plugin

}()

这个就是发送验证码时,按钮文本变化的一个小控件,核心代码已添加注释,有问题再联系,望采纳。

我发现现在回答问题的人真是无聊,不能把答案写全?

这个JS首先引用:

<link href="Scripts/idcode/jquery.idcode.css" rel="stylesheet" type="text/css" />

<script src="Scripts/idcode/jquery.idcode.js" type="text/javascript"></script>

然后加载它的一个方法:

<script type="text/javascript">

$(document).ready(function () {

$.idcode.setCode()

})

</script>

然后要到它的JS文件去指定一个输入验证码框的ID

var settings = {

e : 'idcode',

codeType : { name : 'follow', len: 4},

codeTip : 'refresh?',

inputID:'Txtidcode'//这个就是你页面输入验证码的文本框ID

}

然后是页面元素:

<label class ="lblVerification">验证码</label>

<input type ="text" id ="Txtidcode" class ="txtVerification" />

<span id="idcode"></span>

最后是JS调用:var IsBy = $.idcode.validateCode()返回的是true或false。这样就可以验证