最近想为自己的Django博客添加验证码功能,本来想使用第三方库来实现的,不过考虑到添加第三方库对性能的影响,以及第三方库是否安全可靠的问题,还是用自己的代码来实现吧。反正用JS来实现验证码功能又不是很难。

简单来说,用一个create_code()方法在页面中生成验证码,然后control_submit()方法检测验证码文本框(id=“user_input_code”)的键盘输入事件,当文本框输入了超过4个字符后,调用verify_code ()检测输入的字符与生成的验证码是否一致,假如一致的话,把提交评论按钮的disabled属性从true改为false,假如不一致的话,在页面显示验证码错误。

js代码如下:

$(document).ready(function (){
var codeLength = 4;
create_code(codeLength);
change_code(codeLength);
control_submit(codeLength);
initial_blog_page();
}); function change_code(codeLength) {
//更改验证码
$("#checkCode").click(function () {
create_code(codeLength);
});
} var code ;
function create_code(codeLength){
//生成验证码
code = "";
var checkCode = $("#checkCode");
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L',
'M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'); for(var i=0;i<codeLength;i++){
var charIndex = Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
if(checkCode){
checkCode.addClass("code");
checkCode.val(code);
}
} function verify_code (){
//验证验证码
var user_input_code = $("#user_input_code").val().toLowerCase().trim();
if(user_input_code.length <=0){
return false;
} else if(user_input_code != code.toLowerCase()){
return false;
}
return true;
} function control_submit(codeLength) {
//当验证码验证成功后,才允许提交评论
$("#user_input_code").keyup(function () {
var code_len = $("#user_input_code").val().trim().length
if (code_len < codeLength) {
$("#valid_failed").text("");
} else if (code_len > codeLength) {
$("#valid_failed").text("验证码错误");
$("#submit_comment").attr("disabled", true);
} else {
if (verify_code()) {
$("#submit_comment").attr("disabled", false);
} else {
$("#valid_failed").text("验证码错误");
}
}
});
} function initial_blog_page() {
//防止从评论模块的perview页面后退到blog页面时,评论的提交按钮仍然维持disable=“false”状态
$("#submit_comment").attr("disabled", true);
}

在html页面中对应的form中增加下面元素:

 <form ...>
<input id="user_input_code" type="text" name="code" placeholder="请输入右侧的验证码"/>
<input type="text" readonly="readonly" id="checkCode" class="code" style="width: 60px;" />
<p id="valid_failed"></p>
<tr>
<td colspan="2">
<input id="submit_comment" type="submit" disabled="true" name="submit" value="提交评论">
</td>
</tr>
</form>

最后在css文件中修改一下验证码元素的属性,例如字符间隔,颜色,背景图片等,即可完成验证码功能。

使用JS来实现验证码功能的更多相关文章

  1. 纯JS实现图片验证码功能并兼容IE6-8

    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...

  2. JS 实现随机验证码功能

    1.验证码 验证是网页常出现的一个验证点,所谓验证码类型有很多,下面代码只是实现一个简单的验证功能. <div> <input type = "text" id ...

  3. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  4. .NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现

    前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...

  5. MVC基本登陆与验证码功能实现

    一.基本登陆实现与验证码功能实现,该功能是和spring.net功能集合使用的,因为后面要用到验证是否处于登陆状态 1. 先构建一个登陆页面 @{ Layout = null; } <!DOCT ...

  6. Servlet案例3:验证码功能

    这里介绍简单的验证码功能 动态生成图片 一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. php CI框架实现验证码功能和增强验证码安全性实战教程

    php CI框架实现验证码功能和增强验证码安全性实战教程 CodeIgniter简称CI是最流行的一个php MVC框架之一,本人讲从实际项目使用中写系列实战经验,有别与其他的理论讲解文章,会附上实战 ...

  8. 一步一步实现web程序信息管理系统之三----登陆业务逻辑实现(验证码功能+参数获取)

    本篇紧接着上一篇文章[一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面] 验证码功能 一般验证码功能实现方式为,前端界面访问一个url请求,后端服务代码生成一个图片流返回至浏览器 ...

  9. django验证码功能

    1.目的 现在我们一般访问网页都需要输入验证码,比如博客园,有的甚至是通过手机验证码实时登录.这样做的目的主要还是为了防止其他人的恶意访问,比如爬虫,下面就来看看验证码是如何实现的 2.StringI ...

随机推荐

  1. XML 之 与Json或String的相互转换

    1.XML与String的相互转换 [1] XML 转为 String //载入Xml文件 XmlDocument xdoc = new XmlDocument(); xdoc.Load(" ...

  2. Spring3之Security

    1.spring security介绍 Spring Security原来叫做Acegi Security,可用于加强任何Java应用的安全,但是最常用于基于Web的应用.下面首先理解几个安全术语: ...

  3. Python mongoDB 的简单操作

    #!/usr/bin/env python # coding:utf-8 # Filename:mongodb.py from pymongo import MongoClient,ASCENDING ...

  4. Android ExpandableListView的技巧和问题

    前言: 最近一个多月在认真的学习Android和做项目,文章内容表达的不好或者理解错了,希望大家评论指出. :-) 本文是总结几个比较常用且使用的技巧,和一个大家都会遇到的问题. 文章中大部分语句摘抄 ...

  5. android的个人代码总结

    1.关于一个动作的实现,在Activity中可以用实现一个接口的方式来实现,在实现代码时可用IF进行判断是那个要执行的动作: 2.在软件开发过程中,软件界面的布局也非常重要:还是要多看看:

  6. oracle 设置标识列自增

    设置reg_user表 userid为自增列    1.设置键   2.创建序列   3.创建触发器

  7. poj 2186 强连通分支 和 spfa

    思路: 建图时,分别建正向图edge和转置图T.用正向图edge来DFS,找出第一个被发现的强连通分支(如果该图存在题目要求的点,那么一定就是第一个被发现的).然后用spfa跑转置图T,判断被发现的点 ...

  8. C++函数学习笔记

    C++继承了C语言的全部语法,也包括函数的定义和使用方法. 调用其他函数的函数因为位高权重被尊称为主调函数,被其他函数调用的函数称为被调函数. 函数的返回值由return语句给出,return 表达式 ...

  9. Android 侧滑菜单的简单实现(SlidingMenu)

    在我还没有学习Android的时候就用过侧滑菜单的APP,当时第一个感觉是:哇塞,这效果不错!当然,现在自己都已经学Android了,这效果当然也要做出来啊~ SlidingMenu是一种比较新的设置 ...

  10. DOS批处理命令-注释

    注释是每个程序中不可或缺的(不是对计算机来说,而是对我们这些程序员阅读代码来说) 语法: ①rem 这是批处理的注释命令,rem后面的内容全部是注释 例:rem 这是一行注释 ②:: 批处理遇到以冒号 ...