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

所属分类:输入-验证

 41660  332  查看评论 (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.插件是网上找的稍微修改了下。亲测可用

相关插件-验证

jQuery注册表单验证

jQuery常见注册表单 包括表单验证、生日选择、邮箱自动补全、密码可见性与重复密码的验证等
  验证
 65454  577

输入框内容验证插件jquery.input.rule.js

这是一个文本框内容限制的方法,可以把用户输入的信息进行分类,然后进行判断,如果不符合,则提示错误。
  验证
 35712  330

Modern Fms 表单验证插件

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

超炫的登录页面 login register

超炫的登录页面和注册页面 login register
  验证
 86661  429

讨论这个项目(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

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

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