最近想为自己的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文件中修改一下验证码元素的属性，例如字符间隔，颜色，背景图片等，即可完成验证码功能。