正文

掌握Bootstrap表单验证：轻松清空，避免常见错误技巧解析

/0 浏览量
0323

Bootstrap 是一个流行的前端框架，它提供了一套丰富的工具和组件，用于快速开发响应式、移动优先的网页。表单验证是网页设计中非常重要的一部分，它确保用户输入的数据符合预期的格式。本文将详细介绍如何使用 Bootstrap 进行表单验证，并提供一些轻松清空表单以及避免常见错误的技巧。

一、Bootstrap 表单验证的基本用法

Bootstrap 提供了基于 HTML5 的表单验证功能。要启用表单验证，你需要确保以下条件满足：

  1. 引入 Bootstrap CSS 文件。
  2. 引入 Bootstrap JS 文件和表单验证的 JS 文件。
  3. 使用正确的 HTML 标签和属性。

以下是一个基本的 Bootstrap 表单验证示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 shiv 和 Respond.js 用于 IE8 支持 HTML5 元素和媒体查询 -->
  <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>

<form class="form-horizontal" id="myForm">
  <div class="form-group">
    <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱" required>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登录</button>
    </div>
  </div>
</form>

<!-- 引入 Bootstrap JS 和表单验证的 JS -->
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script>
  $(function () {
    $('#myForm').bootstrapValidator({
      message: '这个值不合法',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        inputEmail: {
          message: '邮箱验证失败',
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            email: {
              message: '请输入有效的邮箱地址'
            }
          }
        },
        inputPassword: {
          message: '密码验证失败',
          validators: {
            notEmpty: {
              message: '密码不能为空'
            },
            stringLength: {
              min: 6,
              message: '密码长度不能少于6位'
            }
          }
        }
      }
    });
  });
</script>
</body>
</html>

在上面的示例中，我们创建了一个包含邮箱和密码字段的表单，并启用了表单验证。当用户提交表单时，如果邮箱或密码不符合要求，Bootstrap 将显示相应的错误消息。

二、轻松清空表单

在表单验证过程中，你可能需要清空表单以便用户重新输入。以下是一个使用 jQuery 清空表单的示例：

function clearForm(form) {
  $(form)[0].reset();
}

当用户点击“重置”按钮时，你可以调用 clearForm 函数来清空表单。

三、避免常见错误

在使用 Bootstrap 表单验证时，以下是一些常见的错误和解决方案：

  1. 错误消息不显示：

    • 确保你已经引入了 Bootstrap 的 CSS 和 JS 文件，以及表单验证的 JS 文件。
    • 检查表单验证的配置是否正确。

  2. 表单验证不生效：

    • 确保你使用了正确的 HTML 标签和属性。
    • 检查 required 属性是否添加到相应的输入字段。

  3. 验证规则不匹配：

    • 检查你设置的验证规则是否符合你的需求。
    • 确保验证规则在 fields 对象中正确配置。

通过遵循上述指导，你可以轻松掌握 Bootstrap 表单验证，并避免在开发过程中遇到常见错误。

-- 展开阅读全文 --