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

所属分类:输入-验证

 41187  331  查看评论 (16)
分享到微信朋友圈
X
简单验证码插件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.插件是网上找的稍微修改了下。亲测可用

相关插件-验证

Modern Fms 表单验证插件

Modern Fms(精美的纯css3 html5表单框架) 表单验证插件
  验证
 14225  181

jquery多功能表单验证

基于jquery封装的表单验证插件
  验证
 41744  362

JQuery表单验证插件EasyValidator,超级简单易用!

用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。
  验证
 51217  356

jQuery表单提交验证verify

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

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    思绪跑了调wx 0
    2019/8/1 14:10:18
    我引用后显示"Uncaught TypeError: Cannot read property 'setCode' of undefined",验证码图片不能更换
        狼灰灰0
        2019/8/1 15:32:37
        用的什么浏览器试的。
    回复
    美洲之夜 0
    2018/12/29 15:05:18
    怎么修改提示信息 回复
    Silent guardian 0
    2018/8/12 14:17:42
    怎么判断验证码输入的是否正确
        狼灰灰1
        2018/9/4 17:45:57
        这个是纯前端的验证,你输入的与图片上显示的不对,就会返回false ,这样就知道不对了。 现在做法不建议用这个了,现在都是调后台的接口,返回一张图片,在前端展示这张图片,图片上就是生成好的验证码,输入图片上的验证码,调用后台接口,由后台来决定验证是否通过,这样就可以防止注册机器人了。
    回复
    n 0
    2018/4/17 9:43:42
    我想问下这个插件 和validate结合的时候 验证失败一次 再重新输入一个字母 验证码就刷新了 怎么解决呢
        狼灰灰0
        2018/9/4 17:47:40
        这个问题,我也不会。好久没有用jquery 了 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

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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复