使用bootstrap创建登录注册页面并实现表单验证功能

介绍

Bootstrap是一个开源的前端框架，由Twitter开发。Bootstrap可以让开发人员使用CSS、JavaScript和HTML快速开发响应式、移动设备优先的Web应用程序。Bootstrap的栅格系统、样式库、插件等让开发人员可以快速创建标准化的Web页面。

准备工作

在使用Bootstrap之前，你需要先导入Bootstrap的样式表和JavaScript文件。可以通过CDN或者将Bootstrap下载到本地再导入。在本次实践中，我们选择使用CDN进行导入，代码如下：

<!-- 导入Bootstrap的样式表 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- 导入Bootstrap的JavaScript文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

创建登录注册页面

首先，我们需要创建一个HTML文件，并在该文件中创建登录和注册表单。对于表单的创建，Bootstrap提供了大量的样式和组件，可以方便快捷地创建出美观的表单。下面是一个具有基本样式的表单代码：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮件地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮件地址">
    <small id="emailHelp" class="form-text text-muted">我们绝不会与别人分享您的邮件地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

在上述代码中，`form-group`是Bootstrap提供的一个样式类，可以将输入框和标签放到一个组中，美化页面并提高用户体验。同时，`form-check`和`form-check-input`样式类可以用于创建单选框或复选框。

当我们完成了登录表单的创建之后，我们需要复制一份代码来创建注册表单。创建注册表单的过程与创建登录表单的过程类似，下面是具有基本样式的注册表单代码：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮件地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮件地址">
    <small id="emailHelp" class="form-text text-muted">我们绝不会与别人分享您的邮件地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword2">再次输入密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请再次输入密码">
  </div>
  <button type="submit" class="btn btn-primary">注册</button>
</form>

表单验证功能

必填项验证

在上述表单中，你可能会注意到，没有任何验证机制，用户可以不输入任何内容就提交表单。这显然是不安全的，因此我们需要使用Bootstrap提供的表单验证机制来增强表单的安全性。

首先，我们来看一下如何进行必填项验证。下面是一个具有必填项验证的表单代码：

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="exampleInputEmail1">邮件地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮件地址" required>
    <small id="emailHelp" class="form-text text-muted">我们绝不会与别人分享您的邮件地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码" required>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

在上述代码中，我们给需要进行验证的输入框添加了`required`属性，这表示该输入框必填，如果不填则无法提交表单。此外，我们还在表单中添加了`needs-validation`和`novalidate`属性，其中`needs-validation`属性表示需要对表单进行验证，而`novalidate`属性则表示不进行本地浏览器验证。

格式验证

在上一个例子中，我们对必填项进行了验证，但还有一种常见的验证方式是对输入框的格式进行验证，例如邮件地址必须符合一定的格式要求，密码必须包含数字、字母等。Bootstrap提供了多种格式验证的方式，例如`minlength`、`maxlength`、`pattern`等，下面是一个具有格式验证功能的表单代码：

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="exampleInputEmail1">邮件地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮件地址" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    <div class="invalid-feedback">请输入有效的邮件地址！</div>
    <small id="emailHelp" class="form-text text-muted">我们绝不会与别人分享您的邮件地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码" required minlength="6">
    <div class="invalid-feedback">密码长度至少为6个字符！</div>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

在上述代码中，我们给需要格式验证的输入框添加了`pattern`和`minlength`属性。`pattern`属性表示该输入框必须满足的格式要求，而`minlength`属性表示该输入框必须至少有多少个字符。如果输入内容不符合要求，则会显示`invalid-feedback`样式表示错误信息。

完成代码

最终的代码结合了上述的实践内容，并添加了一些样式来美化页面。下面是最终的代码，并附带一张截图：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>登录/注册</title>
  <!-- 导入Bootstrap的样式表 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <!-- 导入Bootstrap的JavaScript文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-5">
        <h2 class="mb-3">登录</h2>
        <form class="needs-validation" novalidate>
          <div class="form-group">
            <label for="exampleInputEmail1">邮件地址</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮件地址" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
            <div class="invalid-feedback">请输入有效的邮件地址！</div>
            <small id="emailHelp" class="form-text text-muted">我们绝不会与别人分享您的邮件地址。</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码" required minlength="6">
            <div class="invalid-feedback">密码长度至少为6个字符！</div>
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">记住我</label>
          </div>
          <button type="submit" class="btn btn-primary">登录</button>
        </form>
        <p class="mt-3 text-center">
          还没有账号？<a href="#">立即注册</a>
        </p>
      </div>
      <div class="col-md-5">
        <h2 class="mb-3">注册</h2>
        <form class="needs-validation" novalidate>
          <div class="form-group">
            <label for="exampleInputEmail2">邮件地址</label>
            <input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp" placeholder="请输入邮件地址" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
            <div class="invalid-feedback">请输入有效的邮件地址！</div>
            <small id="emailHelp" class="form-text text-muted">我们绝不会与别人分享您的邮件地址。</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword2">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入密码" required minlength="6">
            <div class="invalid-feedback">密码长度至少为6个字符！</div>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword3">再次输入密码</label>
            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="请再次输入密码" required minlength="6">
            <div class="invalid-feedback">密码长度至少为6个字符！</div>
          </div>
          <button type="submit" class="btn btn-primary">注册</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

最终效果如下图所示：


总结

在本次实践中，我们使用Bootstrap创建了登录注册页面，并实现了表单验证功能。Bootstrap提供了丰富的组件和样式，可以方便快捷地创建美观的Web应用程序。表单验证功能的实现可以增强页面的安全性和用户体验。通过本次实践的学习，我们掌握了使用Bootstrap创建Web页面的基本方法和技巧，同时也熟悉了常见的表单验证方式。