当前位置：首页 > 行业动态 > 正文

html如何做表单验证码

admin
行业动态
2024-04-04
1

在网页开发中，表单验证码是一种常见的安全措施，用于防止反面用户通过自动程序提交表单，在本教程中，我们将学习如何使用HTML和JavaScript创建一个简单的表单验证码。

1、准备工作

我们需要创建一个HTML文件，并在其中添加一个表单和一个验证码图片，以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF8">
    <title>表单验证码示例</title>
    <script src="captcha.js"></script>
</head>
<body>
    <form id="myForm" onsubmit="return validateCaptcha()">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required><br>
        <label for="captcha">验证码：</label>
        <input type="text" id="captcha" name="captcha" required><br>
        <img src="captcha.php" alt="验证码" id="captchaImage"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

2、创建验证码图片（captcha.php）

接下来，我们需要创建一个PHP文件（captcha.php），用于生成验证码图片，以下是一个简单的PHP代码示例：

<?php
session_start();
header("Contenttype: image/png");
$width = 100;
$height = 30;
$image = imagecreate($width, $height);
$bgColor = imagecolorallocate($image, 255, 255, 255);
$textColor = imagecolorallocate($image, 0, 0, 0);
$code = '';
for ($i = 0; $i < 4; $i++) {
    $code .= chr(rand(65, 90));
}
$_SESSION['captcha'] = $code;
imagestring($image, 5, 30, 8, $code, $textColor);
imagepng($image);
imagedestroy($image);
?>

这个PHP文件将生成一个包含随机字母的验证码图片，并将其存储在会话变量中，请注意，您需要将此文件保存为名为“captcha.php”的文件，并确保服务器支持PHP。

3、验证验证码（validateCaptcha.js）

现在，我们需要创建一个JavaScript文件（validateCaptcha.js），用于验证用户输入的验证码是否正确，以下是一个简单的JavaScript代码示例：

function validateCaptcha() {
    var inputCaptcha = document.getElementById("captcha").value;
    var sessionCaptcha = "";
    if (window.XMLHttpRequest) { // 兼容现代浏览器的代码
        sessionCaptcha = new XMLHttpRequest().responseText;
    } else { // 兼容旧版IE浏览器的代码
        sessionCaptcha = new ActiveXObject("Microsoft.XMLHTTP").responseText;
    }
    if (inputCaptcha == sessionCaptcha) {
        return true;
    } else {
        alert("验证码错误，请重试！");
        return false;
    }
}

这个JavaScript文件将获取用户输入的验证码，并与服务器生成的验证码进行比较，如果两者匹配，则允许表单提交；否则，显示警告消息并阻止表单提交，请注意，您需要将此文件保存为名为“validateCaptcha.js”的文件，并确保它与HTML文件位于同一目录中。

4、测试表单验证码

现在，您可以在浏览器中打开HTML文件，尝试填写表单并提交，当您输入正确的验证码时，表单应成功提交；当您输入错误的验证码时，将显示警告消息并阻止表单提交。