当前位置：首页 > 行业动态 > 正文

bootstrapvalidat cdn

admin
行业动态
2025-02-27
8

BootstrapValidator 的 CDN 地址是：https:// cdn.jsdelivr.net/npm/bootstrap-validator@0.11.9/dist/css/bootstrapValidator.min.css。

BootstrapValidator 是一个基于 jQuery 和 Bootstrap 的表单验证插件，它提供了简单易用的方法来对表单进行实时验证，以下是关于 BootstrapValidator 的详细内容：

一、引入方式

1、CDN：

可以通过 CDN 快速引入 BootstrapValidator 插件，使用以下链接地址：https://www.bootcdn.cn/jquery.bootstrapvalidator/。

在 HTML 文件中，通过<link> 标签引入 CSS 文件，通过<script> 标签引入 JavaScript 文件。

 <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

2、本地下载：

也可以将 BootstrapValidator 插件下载到本地使用，可以从其官网或 GitHub 仓库下载：

官网地址：http://bootstrapvalidator.votintsev.ru/api/

GitHub 地址：https://github.com/1000hz/bootstrap-validator

下载后，将相应的.js 和.css 文件放到项目目录中，并通过相对路径或绝对路径引入到 HTML 文件中。

二、基本使用步骤

1、HTML 结构：

bootstrapvalidat cdn

确保表单控件放在类名为form-group 的<div> 内部，以便验证生效。

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
         <form class="form-horizontal" method="post" action="" id="classes-form">
             <div class="box-body">
                 <div class="form-group">
                     <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
                     <div class="col-sm-8">
                         <input type="text" class="form-control" name="class_name" id="inputName" placeholder="请输入班级名称">
                     </div>
                 </div>
             </div>
         </form>
     </div>

2、初始化插件：

在文档就绪函数中，使用$('form').bootstrapValidator() 方法初始化表单验证。

 $(function () {
         $('#classes-form').bootstrapValidator({
             live: 'submitted', // 可选值有 'enabled', 'disabled', 'submitted'，表示验证触发时机
             feedbackIcons: {
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 class_name: {
                     validators: {
                         notEmpty: {
                             message: '班级名称不能为空'
                         }
                     }
                 }
             }
         });
     });

三、常用验证规则

1、非空验证（notEmpty）：

检查字段是否为空，在 HTML 中使用data-bv-notempty 属性，并设置data-bv-notempty-message 属性来指定提示消息。

 <input type="text" class="form-control" name="username" id="inputUsername" placeholder="请输入用户名" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空">

或者在 JavaScript 中使用notEmpty 验证器：

 fields: {
         username: {
             validators: {
                 notEmpty: {
                     message: '用户名不能为空'
                 }
             }
         }
     }

2、字符串长度验证（stringLength）：

bootstrapvalidat cdn

检查字符串的长度是否在指定范围内，在 JavaScript 中使用stringLength 验证器，并设置min 和max 属性。

 fields: {
         username: {
             validators: {
                 stringLength: {
                     min: 6,
                     max: 18,
                     message: '用户名长度必须在6到18位之间'
                 }
             }
         }
     }

3、正则表达式验证（regexp）：

使用正则表达式来验证字段的值是否符合特定格式，在 JavaScript 中使用regexp 验证器，并设置regexp 和message 属性。

 fields: {
         email: {
             validators: {
                 regexp: {
                     regexp: /^[a-zA-Z0-9_.]+@[a-zA-Z0-9_.]+.[a-zA-Z]{2,}$/,
                     message: '邮箱格式不正确'
                 }
             }
         }
     }

4、远程验证（remote）：

通过 AJAX 请求远程服务器来验证字段的值是否有效，在 JavaScript 中使用remote 验证器，并设置url 和message 属性。

 fields: {
         username: {
             validators: {
                 remote: {
                     url: '/check-username', // 远程验证的 URL
                     message: '该用户名已被占用'
                 }
             }
         }
     }

四、提交处理

1、默认提交行为：

当表单验证通过时，会触发表单的默认提交行为，可以在submitHandler 属性中自定义提交逻辑。

bootstrapvalidat cdn

 submitHandler: function (validator, form, submitButton) {
         // 可以在这里执行自定义的提交逻辑，如发送 AJAX 请求等
         alert('表单提交成功！');
         return false; // 阻止默认的表单提交行为
     }

2、防止表单提交：

如果希望在验证失败时阻止表单提交，可以将live 属性设置为'disabled'，这样只有在点击提交按钮时才会触发验证，并且如果验证不通过，表单不会提交。

 $('#classes-form').bootstrapValidator({
         live: 'disabled', // 只在提交时触发验证
         feedbackIcons: {
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
         fields: {
             class_name: {
                 validators: {
                     notEmpty: {
                         message: '班级名称不能为空'
                     }
                 }
             }
         }
     });