简介本文非常详细的给你介绍用requirejs插件来加载第三方的jquery.idcode验证码插件的具体方法步骤和在线实例演示。l
站长现在非常的习惯使用requirejs来加载网页里所需要用的第三方插件或js文件,因为requirejs使用起来真的是太方便了。
本文站长来给大家说下如何使用requirejs插件来加载jquery.idcode这个验证码插件,下面是站长准备的在线实例演示:
使用requirejs来加载jquery.idcode验证码插件的在线实例演示
下面站长一步一步的教你如何来做:
第一步:网页里引入requirejs源文件:
<script language="JavaScript" src="//cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
第二步:配置require.config:
require.config({ paths: { "jquery": "//apps.bdimg.com/libs/jquery/1.9.1/jquery.min", "css": "//cdn.bootcss.com/require-css/0.1.10/css.min", "jquery.idcode": "/html/aijquery/jquery.idcode" }, shim: { "jquery.idcode": { deps: ["css!/html/aijquery/jquery.idcode","jquery"] } } });
PS:我们把jquery.idcode插件对应的css样式文件配置在了shim里,这样我们在引用的时候就会同步加载上面我们配置的css样式文件了,如果你对require里加载css样式文件有问题,可以看这篇文章:require-css的使用方法及实例
第三步:编写我们所需的js代码:
require(["jquery","jquery.idcode"], function($) { $.idcode.setCode({ e: "yzm", codeType: { name: "follow", len: 4 }, codeTip: "换验证码", inputID: "aijquery_yzm" }); $("#aijquery").click(function() { var IsBy = $.idcode.validateCode(); alert(IsBy); }); });
好了,到这里就完成了,当然不要忘了布置相应的HTML代码:
<label class="lblVerification">验证码</label> <input type="text" id="aijquery_yzm" /> <span id="yzm"></span><br> <button type="button" id="aijquery">验证</button><br>