正文

学会Bootstrap表单验证，轻松实现表单提交全过程

/0 浏览量
0406

Bootstrap 是一个流行的前端框架，它提供了许多有用的工具和组件来帮助开发者构建响应式和交互性强的网页。其中，Bootstrap 的表单验证功能可以帮助你轻松地实现表单数据的验证，确保用户输入的数据符合预期格式，从而提高用户体验和数据质量。

1. Bootstrap 表单验证简介

Bootstrap 表单验证是基于 jQuery 的，它允许你为表单元素添加实时验证，比如检查输入字段是否为空、是否符合特定的格式（如电子邮件地址或电话号码）等。通过使用 Bootstrap 的表单验证类，你可以很容易地实现这些功能。

2. 准备工作

在开始之前，请确保你的项目中已经引入了 Bootstrap 和 jQuery。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 表单验证</title>
  <!-- 引入 Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- 引入 jQuery -->
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <!-- 引入 Bootstrap JS -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 表单内容 -->
<form id="myForm">
  <div class="form-group">
    <label for="inputEmail">邮箱地址</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱地址">
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
// 表单验证代码
$(document).ready(function(){
  $('#myForm').submit(function(e){
    e.preventDefault();
    // 验证邮箱
    var email = $('#inputEmail').val();
    if(email === ''){
      alert('邮箱地址不能为空！');
      return false;
    }
    // 验证密码
    var password = $('#inputPassword').val();
    if(password.length < 6){
      alert('密码长度至少为6位！');
      return false;
    }
    // 如果验证通过，则提交表单
    this.submit();
  });
});
</script>

</body>
</html>

3. 实现表单验证

在上面的示例中，我们创建了一个简单的表单，包括一个邮箱地址输入框和一个密码输入框。接下来，我们将使用 Bootstrap 的表单验证功能来实现实时验证。

3.1 添加验证类

首先，为表单元素添加 is-valid 或 is-invalid 类，这将决定验证通过或失败时的样式。

<input type="email" class="form-control is-valid" id="inputEmail" placeholder="请输入邮箱地址">
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="请输入密码">

3.2 添加验证提示

接下来，添加一个用于显示验证提示的元素，可以使用 help-block 类。

<div class="form-text text-muted">请输入有效的邮箱地址。</div>
<div class="form-text text-danger">密码长度至少为6位。</div>

3.3 使用 JavaScript 实现验证逻辑

在上面的 HTML 示例中，我们已经添加了一些简单的 JavaScript 代码来处理表单提交。以下是一个更完整的示例：

$(document).ready(function(){
  $('#myForm').submit(function(e){
    e.preventDefault();
    // 清除之前的验证样式
    $('.is-valid').removeClass('is-valid');
    $('.is-invalid').removeClass('is-invalid');
    
    // 验证邮箱
    var email = $('#inputEmail').val();
    if(email === ''){
      $('#inputEmail').addClass('is-invalid');
      $('#inputEmail').next('.form-text').text('邮箱地址不能为空！');
      return false;
    } else {
      $('#inputEmail').addClass('is-valid');
      $('#inputEmail').next('.form-text').text('');
    }
    
    // 验证密码
    var password = $('#inputPassword').val();
    if(password.length < 6){
      $('#inputPassword').addClass('is-invalid');
      $('#inputPassword').next('.form-text').text('密码长度至少为6位！');
      return false;
    } else {
      $('#inputPassword').addClass('is-valid');
      $('#inputPassword').next('.form-text').text('');
    }
    
    // 如果验证通过，则提交表单
    this.submit();
  });
});

4. 总结

通过使用 Bootstrap 表单验证，你可以轻松地实现表单数据的实时验证，提高用户体验和数据质量。以上就是一个简单的示例，你可以根据自己的需求进行扩展和修改。希望这篇文章能帮助你更好地理解 Bootstrap 表单验证的使用方法。

-- 展开阅读全文 --