Bootstrap Validator 表单验证

关于 Bootstrap Validator 表单验证的完整攻略，以下是我整理出的步骤，希望能对你有所帮助。

1. 引入 Bootstrap Validator 和 jQuery 库

在任意版本的 Bootstrap Validator 之前，都需要先引入 jQuery 库。当然，如果你使用的是与 Bootstrap 3.x 兼容的 Bootstrap Validator 版本，则可以直接引入 jQuery 或 Bootstrap 中自带的 jQuery 库。

<!-- 引入 Bootstrap Validator 和 jQuery 库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 创建表单元素

接下来，你需要创建 HTML 表单元素，包括 input、select、textarea 等等。并且，需要赋予这些元素正确的 name 属性，以给后面的 Bootstrap Validator 识别。

<!-- 注意：需要给表单元素设置正确的 name 属性 -->
<form id="myForm">
  <div class="form-group">
    <label for="inputEmail">Email address</label>
    <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. 初始化 Bootstrap Validator

现在，可以使用以下代码初始化 Bootstrap Validator。这里我们使用的是单独的 JavaScript 代码块，但也可以写在 HTML 文件中的 script 标签中。

$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    // 具体配置项
  });
});

在上述代码中，我们选择了名为 myForm 的表单元素，并调用了 .bootstrapValidator 方法，在该方法中可以对其进行一系列的配置以完成表单验证的流程。

4. 配置 Bootstrap Validator

在初始化 Bootstrap Validator 后，你需要对其进行一系列配置。下面是几个常用的配置选项：

4.1. message

该选项表示 Bootstrap Validator 在验证不通过时需要显示的消息。默认为 'This value is not valid'。

message: '该项不合法，请重新输入',

4.2. fields

该选项表示需要验证的表单字段，以及它们所需要遵守的规则。

fields: {
  // 字段名
  inputEmail: {
    // 规则
    validators: {
      notEmpty: {
        message: 'The email address is required'
      },
      emailAddress: {
        message: 'The input is not a valid email address'
      }
    }
  },
  inputPassword: {
    validators: {
      notEmpty: {
        message: 'The password is required'
      },
      stringLength: {
        min: 6,
        message: 'The password must be at least 6 characters long'
      }
    }
  }
}

上述代码中，我们对 inputEmail 和 inputPassword 两个表单元素进行了验证配置，其中：

字段名必须与 HTML 中的 name 属性相对应；
validators 选项表示包含了该字段需要遵守的所有规则；
notEmpty 规则表示不能为空，这是一个内置的规则；
emailAddress 规则用于验证电子邮件地址的格式是否正确；
stringLength 规则用于验证字段的长度是否符合要求。

5. 示例说明

下面是两个例子，用于演示 Bootstrap Validator 表单验证的使用：

5.1. 验证 email 和 password

<form id="myForm">
  <div class="form-group">
    <label for="inputEmail">Email address</label>
    <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- 引入必要的库文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 完成初始化和配置 -->
<script>
$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    fields: {
      // 验证邮箱
      inputEmail: {
        validators: {
          notEmpty: {
            message: 'The email address is required'
          },
          emailAddress: {
            message: 'The input is not a valid email address'
          }
        }
      },
      // 验证密码
      inputPassword: {
        validators: {
          notEmpty: {
            message: 'The password is required'
          },
          stringLength: {
            min: 6,
            message: 'The password must be at least 6 characters long'
          }
        }
      }
    }
  });
});
</script>

5.2 验证手机号和身份证号

<form id="myForm">
  <div class="form-group">
    <label for="inputPhoneNumber">Phone Number</label>
    <input type="text" class="form-control" id="inputPhoneNumber" name="inputPhoneNumber" placeholder="Phone Number">
  </div>
  <div class="form-group">
    <label for="inputIDCard">ID Card</label>
    <input type="text" class="form-control" id="inputIDCard" name="inputIDCard" placeholder="ID Card">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<!-- 引入必要的库文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 完成初始化和配置 -->
<script>
$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    fields: {
      // 验证手机号
      inputPhoneNumber: {
        validators: {
          notEmpty: {
            message: '手机号不能为空'
          },
          // 正则表达式验证
          regexp: {
            regexp: /^1[3456789]\d{9}$/,
            message: '手机号格式不正确'
          },
        }
      },
      // 验证身份证号
      inputIDCard: {
        validators: {
          notEmpty: {
            message: '身份证号不能为空'
          },
          // 自定义验证方法
          callback: {
            message: '身份证号格式不正确',
            callback: function(value, validator) {
              // 身份证号校验，参考如下链接：
              // https://blog.csdn.net/zhoujingjie0902/article/details/100810122
              // 这里不做具体实现，仅演示使用 callback 验证方法。
              return true;
            }
          }
        }
      }
    }
  });
});
</script>

以上就是 Bootstrap Validator 表单验证的完整攻略及两个示例说明，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap Validator 表单验证 - Python技术站