下面为您讲解JS验证码功能的三种实现方式的完整攻略。
方式一：纯前端方法生成
实现过程
- 在HTML页面中添加验证码输入框和一个生成验证码的按钮；
- JS随机生成一个包含数字和字母的随机字符串并将其绑定到验证码文本框上；
- 当用户输入验证码并提交时，将输入的验证码与生成的验证码进行比较，判断验证码是否正确。
代码示例
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS验证码示例</title>
</head>
<body>
<p>请输入验证码：</p>
<input type="text" id="code-input" placeholder="验证码">
<button onclick="createCode()">生成验证码</button>
<button onclick="verifyCode()">提交</button>
</body>
</html>
JS部分：
var code; //存放生成的验证码
function createCode() {
//随机生成一个包含数字和字母的随机字符串
code = '';
var codeLength = 4; //验证码长度
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','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 index = Math.floor(Math.random() * 62); //取得随机数的索引（0~35）
code += selectChar[index]; //根据索引取得随机数加到code上
}
document.getElementById('code-input').value = code; //把code值赋给验证码文本框
}
function verifyCode() {
//获取用户输入的验证码并与生成的验证码进行比较
var inputCode = document.getElementById('code-input').value;
if(inputCode.length <= 0) {
alert('请输入验证码！');
} else if(inputCode.toUpperCase() != code.toUpperCase()) {
alert("验证码输入有误！");
createCode();//刷新验证码
}else {
alert('验证码正确！');
}
}
方式二：结合后端API生成
实现过程
- 后端提供生成验证码的API；
- 在HTML页面中添加验证码输入框和一个生成验证码的按钮；
- 当用户点击生成验证码的按钮时，调用后端API生成验证码并返回到页面上进行展示；
- 当用户输入验证码并提交时，将输入的验证码传递给后端API进行比较，判断验证码是否正确。
代码示例
HTML部分和方式一相同。
JS部分：
function createCode() {
//调用后端API生成验证码并返回到页面上
var img = document.createElement("img");
img.src = "http://www.example.com/getCode"; //调用后端API
document.getElementById("code-input").parentNode.insertBefore(img, document.getElementById("code-input"));
}
function verifyCode() {
//获取用户输入的验证码并传递给后端API进行比较
var inputCode = document.getElementById('code-input').value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com/checkCode?code=" + inputCode, true); //调用后端API
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(xhr.responseText == "true") {
alert("验证码正确！");
} else {
alert("验证码输入有误！");
createCode();//刷新验证码
}
}
}
xhr.send();
}
方式三：HTML5的canvas绘图技术生成
实现过程
- 在HTML页面中添加一个canvas标签和一个生成验证码的按钮；
- JS使用HTML5的canvas绘图技术随机生成一个包含数字和字母的随机字符串并在canvas中进行绘制；
- 当用户输入验证码并提交时，将输入的验证码与生成的验证码进行比较，判断验证码是否正确。
代码示例
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Canvas验证码示例</title>
</head>
<body>
<p>请输入验证码：</p>
<input type="text" id="code-input">
<br>
<canvas id="code-canvas" width="120" height="30"></canvas>
<button onclick="createCode()">生成验证码</button>
<button onclick="verifyCode()">提交</button>
</body>
</html>
JS部分：
var code; //存放生成的验证码
var canvas = document.getElementById('code-canvas'); //获取canvas元素
var ctx = canvas.getContext('2d'); //获取画布上下文
ctx.font = 'bold 24px Arial'; //设置字体
function createCode() {
//随机生成一个包含数字和字母的随机字符串
code = '';
var codeLength = 4; //验证码长度
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','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 index = Math.floor(Math.random() * 62); //取得随机数的索引（0~35）
code += selectChar[index]; //根据索引取得随机数加到code上
}
//在canvas中绘制验证码
ctx.clearRect(0,0,canvas.width,canvas.height); //清除画布
ctx.strokeText(code,canvas.width/2-30,canvas.height/2+10);
}
function verifyCode() {
//获取用户输入的验证码并与生成的验证码进行比较
var inputCode = document.getElementById('code-input').value;
if(inputCode.length <= 0) {
alert('请输入验证码！');
} else if(inputCode.toUpperCase() != code.toUpperCase()) {
alert("验证码输入有误！");
createCode();//刷新验证码
}else {
alert('验证码正确！');
}
}
createCode(); //初始自动生成验证码
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS 验证码功能的三种实现方式 - Python技术站
微信扫一扫 
支付宝扫一扫 