H5+css3+js搭建带验证码的登录页面

下面是“H5+css3+js搭建带验证码的登录页面”的完整攻略：

1. 准备工作

首先我们需要准备一下开发环境，需要安装Node.js、npm、git等软件。然后需要在本地创建一个项目文件夹，并在该文件夹内创建一个index.html文件和一个style.css文件，以及一个index.js文件用于编写JavaScript代码。

2. 搭建页面框架

在index.html文件中，我们需要构建整个登录页面的框架结构，一般分为头部、主体和底部三个部分。头部可以放置网站logo，主体部分放置输入用户名和密码的表单以及验证码等，底部可以放置注册链接和其他信息。

示例1：下面是一个简单的HTML结构示例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</head>

<body>
    <header>
        <h1>网站logo</h1>
    </header>
    <main>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" autocomplete="off">
            <br>
            <label for="password">密 码：</label>
            <input type="password" id="password" name="password" autocomplete="off">
            <br>
            <label for="verifycode">验证码：</label>
            <input type="text" id="verifycode" name="verifycode" autocomplete="off" size="8">
            <img src="" id="verifycodeImg" onclick="this.src = this.src + '?' + Math.random()">
            <br>
            <input type="button" id="submitBtn" value="登录">
        </form>
    </main>
    <footer>
        <a href="#">注册</a>
    </footer>
</body>

</html>

3. 样式设计

在style.css文件中，我们需要美化整个登录页面的样式，包括字体、颜色、背景等方面。其中验证码图片的样式需要设置成“display:inline-block”，才能和验证码文本框排列在同一行。

示例2：下面是一个简单的CSS样式示例

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    font-size: 16px;
}

header {
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 36px;
}

form {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #bbb;
    text-align: center;
}

label {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 10px;
}

input[type="text"],
input[type="password"] {
    box-sizing: border-box;
    padding: 5px;
    width: 240px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#verifycode {
    width: 60px;
}

#verifycodeImg {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

#submitBtn {
    margin-top: 20px;
    padding: 10px;
    width: 100px;
    border-radius: 5px;
    border: none;
    background-color: #3f51b5;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#submitBtn:hover {
    background-color: #1a237e;
}

4. JavaScript编程

在index.js文件中，我们需要编写JavaScript代码来实现验证码的生成和表单的提交等功能。生成验证码图片需要通过后端生成，前端只需要通过Ajax请求获取验证码图片的base64编码，然后设置img标签src属性即可。表单的提交需要添加一些验证功能，例如用户名和密码不能为空，验证码文本框的值必须和后端生成的验证码一致等。

示例3：下面是一个简单的JavaScript代码示例

// 获取DOM元素
var verifycodeImg = document.getElementById('verifycodeImg');
var submitBtn = document.getElementById('submitBtn');

// 给验证码图片添加点击事件
verifycodeImg.onclick = function() {
    this.src = '/api/verifycode?' + Math.random();
};

// 给登录按钮添加点击事件
submitBtn.onclick = function() {
    var username = document.getElementById('username').value.trim();
    var password = document.getElementById('password').value.trim();
    var verifycode = document.getElementById('verifycode').value.trim();
    if (!username) {
        alert('用户名不能为空！');
        return;
    }
    if (!password) {
        alert('密码不能为空！');
        return;
    }
    if (!verifycode) {
        alert('验证码不能为空！');
        return;
    }
    // 发送Ajax请求
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.code == 0) {
                    alert('登录成功！');
                } else {
                    alert('登录失败：' + response.msg);
                }
            } else {
                alert('服务器发生错误！');
            }
        }
    };
    xhr.open('POST', '/api/login', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({ username: username, password: password, verifycode: verifycode }));
};

5. 后端开发

最后我们需要在后端编写API接口，提供验证码图片生成、用户登录验证等功能。这里不同的技术栈会有不同的实现方式，例如Node.js可以使用Express框架、SpringBoot可以使用SpringMVC框架等。

示例4：下面是一个简单的Node.js API接口示例

var express = require('express');
var app = express();

// 生成验证码图片
app.use('/api/verifycode', function(req, res) {
    var captcha = require('trek-captcha');
    captcha().then(function(info) {
        res.type('svg');
        res.send(info.buffer);
    }).catch(function() {
        res.status(500).end();
    });
});

// 用户登录验证
app.use(express.json());
app.use('/api/login', function(req, res) {
    var username = req.body.username;
    var password = req.body.password;
    var verifycode = req.body.verifycode;
    // 省略数据库查询代码
    if (req.session.captcha.toUpperCase() != verifycode.toUpperCase()) {
        res.json({ code: 1, msg: '验证码错误！' });
    } else if (password != user.password) {
        res.json({ code: 1, msg: '密码错误！' });
    } else {
        req.session.user = user.username;
        res.json({ code: 0, msg: '登录成功！' });
    }
});

app.listen(8080, function() {
    console.log('Server started on port 8080');
});

以上就是完整的“H5+css3+js搭建带验证码的登录页面”的攻略了，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：H5+css3+js搭建带验证码的登录页面 - Python技术站