简单验证码插件jquery.idcode.js

所属分类:输入-验证

简单验证码插件jquery.idcode.js ie兼容6

使用方法

1.引用的文件

<link rel="stylesheet" href="./jquery.idcode.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./jquery.idcode.js"></script>

2.HTML部分

<input type="text" id="Txtidcode" class="txtVerification" />
<span id="idcode"></span>
<div>
    <button type="button" id="btns">验证</button>
</div>

3.JS部分

$.idcode.setCode();
$("#btns").click(function() {
    var IsBy = $.idcode.validateCode();
    alert(IsBy);
    console.log(IsBy);
});

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

var settings = {
    e: 'idcode',
    codeType: {
        name: 'follow',
        len: 4
    },
    codeTip: 'refresh?',
    inputID: 'Txtidcode' //这个就是你页面输入验证码的文本框ID	
};

5.最后是JS调用:

var IsBy = $.idcode.validateCode();

返回的是true或false。这样就可以验证

6.jquery.idcode.js中的19行调整的是验证码的长度;47行可以修改区分大小写

7.插件是网上找的稍微修改了下。亲测可用

相关插件-验证

超炫的登录页面 login register

超炫的登录页面和注册页面 login register
  验证
 26865  122

js正则表达式(原创)

js正则表达式表单验证,多种常用验证方式
  验证
 4426  42

大气简洁的登录注册特效

大气简洁的登录注册特效带注册验证
  验证
 28307  251

jQuery随机验证码插件

点击图片进行更换验证密码
  验证
 3061  32

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    n 0
    2018/4/17 9:43:42
    我想问下这个插件 和validate结合的时候 验证失败一次 再重新输入一个字母 验证码就刷新了 怎么解决呢 回复
    旧街里的酒 0
    2018/1/5 19:24:47

    请问你改了什么呢?我在用这个插件的时候出现了input is not defined 怎么办?

    在线等,,,,,,

        旧街里的酒0
        2018/1/5 19:25:28

        是inputV

        狼灰灰0
        2018/1/12 16:14:06

        你可以把具体的说明和错误提示的那一行发过来,我2018/01/12 16:13下载的没有这个问题。

    回复
    LNJ96 0
    2017/8/29 10:52:52
    一个页面需要多次验证码,怎么修改插件代码呢?
        石头宝宝0
        2018/1/4 16:15:28

        同问,请问解决了嘛~

        石头宝宝0
        2018/1/4 16:35:43

        那个可以把js代码复制一遍,然后改几个id名字就可以啦~~~

        狼灰灰3
        2018/1/12 16:18:59

        多个验证的功能需要自己调整一下代码,这里没有写的。目前从安全和注册机这些安全机制来讲的话,验证码这个东西需要后台来做,具体的就是

        1.前端请求后台一个接口,后台返回一张带验证码的图片;

        2.前端在确定提交的时候,把验证码上显示的字符串提交给后台;

        3.后台验证一下是否正确,返回true/false; 

        4.前端根据后台返回的状态决定是否通过;

        上面那个插件是刚开始做验证码时项目上用到的一个简单的,后来就不用这个纯前端的了,真实项目中很多都是需要结合后台来做;就是上面的四部;

    回复
    2013 TV135 0
    2017/8/21 16:50:08
    验证码是随机的?
        狼灰灰0
        2018/1/12 16:13:00

        是阿,本地随机的,如果要实现真实,那这个需要后台生成图片验证码,前端请求后台接口验证

    回复
取消回复