基于BootstrapValidator的Form表单验证(24)

下面是一份详细的“基于BootstrapValidator的Form表单验证(24)”的完整攻略。

简介

在Web开发中，表单验证是非常重要的一部分，可以帮助我们保证用户输入的数据的准确性、有效性和安全性。BootstrapValidator是一个快速且易于使用的jQuery表单验证插件，它可以通过简单的配置和调用API即可实现表单验证。本攻略将带你一步步完成基于BootstrapValidator的表单验证。

步骤

1. 引入依赖

在HTML页面中引入BootstrapValidator和其所依赖的jQuery、Bootstrap库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

2. 编写HTML表单

按照HTML的语法编写表单，并为需要验证的表单项添加data-bv-前缀的验证属性，例如：

<form id="myForm" method="post">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" name="username" placeholder="Enter username" data-bv-notempty="true" data-bv-notempty-message="The username is required">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" data-bv-notempty="true" data-bv-notempty-message="The password is required">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. 设置BootstrapValidator

在JavaScript中配置BootstrapValidator，并为表单设置验证规则和错误提示信息，例如：

$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    // 表单验证规则
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: 'The username is required and cannot be empty'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: 'The password is required and cannot be empty'
          }
        }
      }
    }
  });
});

4. 表单提交

在表单提交前，可以通过调用BootstrapValidator的API进行表单验证，例如：

$('#myForm').bootstrapValidator('validate');
if ($('#myForm').data('bootstrapValidator').isValid()) {
  // 表单验证通过，提交表单
  $('#myForm').submit();
}

至此，基于BootstrapValidator的Form表单验证已经完成。

示例1

下面是一个完整的基于BootstrapValidator的表单验证示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BootstrapValidator Demo</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>BootstrapValidator Demo</h1>
    <form id="myForm" method="post">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Enter username" data-bv-notempty="true" data-bv-notempty-message="The username is required">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" data-bv-notempty="true" data-bv-notempty-message="The password is required">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
  <script>
    $(document).ready(function() {
      $('#myForm').bootstrapValidator({
        fields: {
          username: {
            validators: {
              notEmpty: {
                message: 'The username is required and cannot be empty'
              }
            }
          },
          password: {
            validators: {
              notEmpty: {
                message: 'The password is required and cannot be empty'
              }
            }
          }
        }
      });

      $('#myForm').submit(function(event) {
        event.preventDefault();

        $('#myForm').bootstrapValidator('validate');
        if ($('#myForm').data('bootstrapValidator').isValid()) {
          alert('Form is valid and will be submitted');
          // Submit the form
          //$('#myForm').data('bootstrapValidator').resetForm(true);
        } else {
          alert('Form is invalid and cannot be submitted');
        }
      });
    });
  </script>
</body>
</html>

示例2

下面是添加了更多表单验证规则和错误提示信息的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BootstrapValidator Demo</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>BootstrapValidator Demo</h1>
    <form id="myForm" method="post">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Enter username" data-bv-notempty="true" data-bv-notempty-message="The username is required and cannot be empty" data-bv-stringlength="true" data-bv-stringlength-min="3" data-bv-stringlength-max="20" data-bv-stringlength-message="The username must be between 3 and 20 characters long">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" data-bv-notempty="true" data-bv-notempty-message="The email is required and cannot be empty" data-bv-emailaddress="true" data-bv-emailaddress-message="The input is not a valid email address">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" data-bv-notempty="true" data-bv-notempty-message="The password is required and cannot be empty" data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-message="The password must be at least 6 characters long">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
  <script>
    $(document).ready(function() {
      $('#myForm').bootstrapValidator({
        fields: {
          username: {
            validators: {
              notEmpty: {
                message: 'The username is required'
              },
              stringLength: {
                min: 3,
                max: 20,
                message: 'The username must be between 3 and 20 characters long'
              }
            }
          },
          email: {
            validators: {
              notEmpty: {
                message: 'The email address is required'
              },
              emailAddress: {
                message: 'The input is not a valid email address'
              }
            }
          },
          password: {
            validators: {
              notEmpty: {
                message: 'The password is required'
              },
              stringLength: {
                min: 6,
                message: 'The password must be at least 6 characters long'
              }
            }
          }
        }
      });

      $('#myForm').submit(function(event) {
        event.preventDefault();

        $('#myForm').bootstrapValidator('validate');
        if ($('#myForm').data('bootstrapValidator').isValid()) {
          alert('Form is valid and will be submitted');
          // Submit the form
          //$('#myForm').data('bootstrapValidator').resetForm(true);
        } else {
          alert('Form is invalid and cannot be submitted');
        }
      });
    });
  </script>
</body>
</html>

以上两个示例代码可以在本地运行并查看效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于BootstrapValidator的Form表单验证(24) - Python技术站

基于BootstrapValidator的Form表单验证(24)

简介

步骤

1. 引入依赖

2. 编写HTML表单

3. 设置BootstrapValidator

4. 表单提交

示例1

示例2

相关文章