摘要：
　　帝国cms7.2以下版本中的验证码都没有点击更换功能，这篇文章将教大家如何实现点击图片或文字时都能够更换验证码，此功能可用到各种有验证码的场合，不分版本......

艺灵这两天分享的《 帝国cms6.6检测会员名是否可注册 》和《 jquery.ajax+php制作帝国cms6.6~7.2检测邮箱是否已用 》教程中都没有提到验证码功能，接下来艺灵将详细介绍更换验证码功能。

现在帝国cms网站管理系统最新版本是7.2，由于7.2版本自带有更换验证码功能，所以对于低版本的系统，我们可以直接使用7.2中的方法。

方法一：点击原图时更换验证码

我们在后台开启注册验证码后在前台注册页面中可以看到验证码，点击时会直接更换一张。配图：这个功能确实方便很多，用户不需要刷新整个页面就可以更换验证码了。我们在审查元素下可以看到这里的代码是这样写的。

1.1更换验证码代码

<img src="../../ShowKey/?v=reg" name="regKeyImg" id="regKeyImg" onclick="regKeyImg.src='../../ShowKey/?v=reg&t='+Math.random()" title="看不清楚,点击刷新">

很多看官看不懂代码，但没关系，只要看黄色高亮部分即可。正是这一行代码起到了点击时就可以更换验证码的功能，是不是很厉害？简单粗暴，直接明了！

下面艺灵将把这串代码进行简化，让看官更快速的掌握技能。

1.2 万能公式

1.2.1 更换验证码代码

onclick="验证码id.src='验证码src&t='+Math.random()"

现在看起来是不是简单很多，我们只要知道验证码的id和src即可制作点击自动更换验证码功能。

为了让看官更快理解，接下来我们用登陆验证码来做实例。

1.2.2 默认登陆验证码代码

<img src="../../ShowKey/?v=login">

配图：

当进行到这一步的时候，想必很多看官已经蒙了。没有id怎么办？

没有我们就添加一个呗，只要保证id唯一即可。修改后的代码如下：

1.2.3 更换登陆验证码代码

<img src="../../ShowKey/?v=login" id="login_20160219" onclick="login_20160219.src='../../ShowKey/?v=login&t='+Math.random()" >

接下来我们要在登陆页面中添加代码，找到目录：网站根目录/e/template/member，然后用hbuilder或Dreamweaver等编辑软件打开login.php，在第60行，添加此代码，配图：

至于有没有效果，我们用事实来说话。配图：

怎么样，搞定了吧。看完图以后是不是觉得666？剩下的什么评论验证码、留言验证码、后台登陆验证码都可以按照此万能公式进行实现！

思考：如果是点击文本时实现更换验证码应该怎么做呢？

方法二：点击文字时更换验证码

其实这个也是很简单的事情，只要我们牢记公式，一切问题都不是问题！下面以评论验证码为例。

2.1 更换评论验证码

要想修改评论验证码，我们首先要找到对应的页面才行。看官注意路径：登陆帝国cms网站后台--模板--公共模板变量--管理模板变量--修改评论表单--粘贴修改代码--点击提交--数据更新--勾选全部刷新并点击刷新所有信息内容页面。配图：

至于源码，将原来的<img src="[!--news.url--]e/ShowKey/?v=pl" align="absmiddle" />替换成下面的代码，必须全部复制，否则无效果！

2.1.1 更换登陆验证码代码

<img src="[!--news.url--]e/ShowKey/?v=pl" align="absmiddle" id="pl_20160219" name="pl_20160219"/>
<span onclick="pl_20160219.src='[!--news.url--]e/ShowKey/?v=pl&t='+Math.random()" style="color:#f00">换一张</span>

最终动态效果图：

怎么样，是不是很简单？现在不管是点击图片还是点击文字都能实现更换验证码了，看官有学会吗？

最后强调一下，此教程中提及的两种方法适用于帝国cms各种版本。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2016-02-19/367.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。