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

所属分类:输入-验证

 7112  30  查看评论 (9)
简单验证码插件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.插件是网上找的稍微修改了下。亲测可用

相关插件-验证

jQuery表单提交验证verify

一整套注册验证,可直接用于实际项目中
  验证
 38344  708

jQuery微信开放平台注册表单

jQuery微信开放平台注册表单是一款仿微信开放平台的选项卡带步骤的注册表单验证jQuery代码。
  验证
 19122  134

jQueryCSS3分步骤注册表单切换动画在线演示

jQueryCSS3分步骤注册表单切换动画在线演示
  验证
 14752  129

点击按钮获取验证码倒计时

这是一个基于jQuery的点击按钮获取验证码倒计时插件,这个插件在我们的开发中非常常用
  验证
 14677  96

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

    旧街里的酒 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

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

    回复
取消回复