在个人页面中加入验证码，核心目的是区分真人和机器，防止垃圾提交。纯静态html不能直接做安全验证码，但可以用javascript在浏览器里生成简单图形码来做基础拦截。下面介绍一种html简单验证码实现法。
一、基本思路
我们用一个canvas画布显示随机字符，用户需要在输入框中填写同样内容。提交时比对输入与生成的码是否一致。注意这仅是前端拦截，不能被当作绝对安全方案。
1. 页面结构
在html里放一个canvas、一个输入框和提交按钮：
<form id="myForm"> <canvas id="codeCanvas" width="120" height="40"></canvas> <input type="text" id="codeInput" placeholder="请输入验证码" /> <button type="submit">提交</button> </form>
2. 生成验证码的脚本
使用js随机生成四位字母数字，并绘制到canvas上：
// 生成随机验证码
function makeCode() {
var chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
var code = '';
for (var i = 0; i < 4; i++) {
code += chars.charAt(Math.floor(Math.random() * chars.length));
}
return code;
}
var realCode = '';
function drawCode() {
var canvas = document.getElementById('codeCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
realCode = makeCode();
ctx.font = '24px Arial';
ctx.fillStyle = '#333';
ctx.fillText(realCode, 20, 30);
}
drawCode();
3. 提交校验
表单提交时比对输入值，相等才允许继续：
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
var input = document.getElementById('codeInput').value.toUpperCase();
if (input === realCode) {
alert('验证通过');
} else {
alert('验证码错误');
drawCode();
}
});
二、安全方面的说明
上面这种html简单验证码实现法完全在客户端运行，用户可查看源码拿到realCode变量，也能绕过前端逻辑直接提交。因此在涉及登录、注册等敏感操作时，必须把验证码校验放到服务端，例如用session保存服务端生成的码，前端只负责展示和收集。
三、小结
对于个人页面怎么加验证码这个问题，若只是练习或屏蔽简单爬虫，可用canvas加js做前端码；若要求基本安全，请使用后端语言如php、node.js生成并校验，前端html只做展示。这样才符合实际开发中的安全规范。