HTML+Bootstrap实现一个简单的登录注册界面

这是一个使用HTML+JS+Bootstrap制作的登录注册界面，在点击注册的时候还会进行校验必填字段，在选择框下方做出提示。是一个比较简单的案例，直接引入必要的CSS和JS即可搭配HTML实现效果。

使用方法

在HTML中引入css和js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>

HTML结构

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h4 class="mb-3">注册模板</h4>
            <form class="needs-validation" novalidate>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="firstName">姓名</label>
                        <input type="text" class="form-control" id="firstName" placeholder="请输入姓名" value="" required>
                        <div class="invalid-feedback">
                            姓名是必填字段！
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="email">邮箱 <span class="text-muted">(可选)</span></label>
                    <input type="email" class="form-control" id="email" placeholder="you@example.com">
                    <div class="invalid-feedback">
                        请输入邮箱以便我们联系到您！
                    </div>
                </div>

                <div class="mb-3">
                    <label for="address">居住地址</label>
                    <input type="text" class="form-control" id="address" placeholder="" required>
                    <div class="invalid-feedback">
                        居住地址是必填字段！
                    </div>
                </div>

                <div class="mb-3">
                    <label for="phone">联系电话</label>
                    <input type="text" class="form-control" id="phone" placeholder="" required>
                    <div class="invalid-feedback">
                        联系电话是必填字段！
                    </div>
                </div>

                <div class="mb-3">
                    <label for="sex">性别</label>
                    <div class="custom-control custom-radio">
                        <input id="sex" name="sex" type="radio" class="custom-control-input" value="x" checked required>
                        <label class="custom-control-label" for="sex">男</label>
                    </div>
                    <div class="custom-control custom-radio">
                        <input id="sex2" name="sex" type="radio" class="custom-control-input" value="y" required>
                        <label class="custom-control-label" for="sex2">女</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <label>兴趣爱好 <span class="text-muted">(可选)</span></label></label>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="yy" value="yy">
                            <label class="custom-control-label" for="yy">游泳</label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="ds">
                            <label class="custom-control-label" for="ds">登山</label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="run">
                            <label class="custom-control-label" for="run">跑步</label>
                        </div>
                    </div>
                </div>
                <hr class="mb-4">
                <button class="btn btn-primary btn-lg btn-block" type="submit">注册</button>
            </form>
        </div>
    </div>
</div>

JavaScript代码

<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>

具体效果如下