制作简单验证码需要使用HTML和JS两种语言。
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码</title>
</head>
<body>
<h1>验证码</h1>
<form id="form">
<label for="code">输入验证码：</label>
<input type="text" name="code" id="code">
<span id="code-error"></span>
<br>
<input type="submit" value="提交">
</form>
<script src=".js"></script>
</body>
</html>
其中<form>标签中id属性为"form"，<input>标签中name属性为"code"，两者需要匹配，以便JS脚本调用。code-error元素用于输入不正确时的提示。
JS部分
const form = document.getElementById("form");
const codeInput = document.getElementById("code");
const codeError = document.getElementById("code-error");
const code = generateCode();
codeInput.placeholder = code;
form.addEventListener("submit", function(event) {
event.preventDefault();
if (code === codeInput.value) {
alert("验证成功");
} else {
codeInput.value = "";
codeError.textContent = "验证码不正确";
}
});
function generateCode() {
const CODE_LENGTH = 4;
const characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
let code = "";
for (let i = 0; i < CODE_LENGTH; i++) {
const index = Math.floor(Math.random() * characters.length);
code += characters[index];
}
return code;
}
JS代码中首先获取form、codeInput、codeError三个元素。然后定义generateCode()函数来生成随机验证码，并通过placeholder属性将其显示在文本框中。addEventListener()函数用于提交表单后对验证码进行验证，并提示验证成功或失败。
示例说明一：纯数字验证码
const characters = "0123456789";
将字符集更改为仅包含0~9的数字字符，即可生成纯数字的验证码。
示例说明二：带有字母的验证码
const characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
将字符集更改为包含大小写字母和数字字符，即可生成包含字母的验证码。
以上是制作简单验证码的完整攻略，通过更改字符集和验证码长度，可以生成不同的验证码。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js+html制作简单验证码 - Python技术站
微信扫一扫 
支付宝扫一扫 