B045-jQuery案例实战&BootStrap

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

以下是一个使用jQuery和Bootstrap的简单案例，展示了如何结合这两个库来创建一个表单验证和提示的功能。

HTML部分:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery和Bootstrap结合示例</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="your_script.js"></script>
</head>
<body>
    <div class="container mt-4">
        <form id="myForm">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" class="form-control" id="username" required>
                <div id="usernameFeedback" class="invalid-feedback">请输入用户名</div>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" class="form-control" id="password" required>
                <div id="passwordFeedback" class="invalid-feedback">请输入密码</div>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</body>
</html>

JavaScript部分 (your_script.js):




$(document).ready(function() {
    $('#myForm').submit(function(e) {
        e.preventDefault();
 
        var username = $('#username').val();
        var password = $('#password').val();
 
        if (username === '' || password === '') {
            $('#myForm').addClass('was-validated');
        } else {
            // 表单验证通过后的操作，例如发送数据到服务器
            alert('登录信息验证成功，用户名: ' + username);
        }
    });
});

这个简单的示例展示了如何使用jQuery来阻止表单的默认提交行为，并使用Bootstrap的was-validated类来展示验证反馈。如果用户名或密码为空，表单将不会被发送到服务器，而是显示一个错误提示。如果两者都不为空，则会弹出一个alert告知用户登录信息已经被验证。

B045-jQuery案例实战&BootStrap

评论已关闭

推荐阅读