9、bootstrap-Validator

bootstrap系列文集

一、前期基础概念

1、概要

bootstrapValidator是一个前端表单数据校验的插件

官方API文档

2、什么叫数据校验

所谓的数据校验就是验证数据的合法性,例如:密码不能纯数字,手机号必须是11位纯数字等等

3、为什么要对数据进行校验

保证输入的数据都是有效的符合我们实际业务规范的,这样做的好处主要有以下几点

  1. 出于提升用户体验:有些时候比如:如果没有前端校验,用户提交了一大堆数据,点击提交到我们的后台,后台返回发现很多数据都不符合我们的业务需求,要求用户重写填写数据并提交,这样的对用户来说体验是相当糟糕的事情,
  2. 减轻服务的压力: 前端不用直接提交数据到后台,直接通过js判断,可以快速的响应用户,这样的话可以最大限度的降低请求服务的次数,减轻服务器的压力

4、注意

作为后台程序员一定要在后台对前端提交上来的数据进行校验,因为前端可以通过一些工具绕过前端的校验,所以一定要记住不要以为前端做了校验,后台就可以不用校验了,不要相信任何前端传过来的数据

二、基础使用(重点掌握)

1、导入相关插件

   <!--1.bootstrap样式-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <!--2.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--3.jquery 插件-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

2、编写html和css

<style type="text/css">
  body {
    background-size: 100% 100%;
    background: url("img/bg_login.jpg") no-repeat fixed;
  }
  .form-group {
    margin: 40px auto;
  }
  #login_box {
    margin-top: 30px;
    padding: 20px auto;
    border-radius: 15px;
    background: #ffffff;
    color: #b2b2b2;
  }
</style>
<div class="container-fluid">
  <!--
    1.使用表单时需要用form-group控制每一个组件
    2.control-label 使label标签和文本对齐
    3.让div居中
    4.添加背景图片
-->
  <div class="row">
    <header class="page-header text-center">
      <h1>用户登录页面</h1>
    </header>
    <div class="col-lg-6 col-lg-offset-3" id='login_box'>
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-3 control-label">用户</label>
          <div class="col-lg-7">
            <input name="username" class="form-control" type="text" placeholder="请输入名字"/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">密码</label>
          <div class="col-lg-7">
            <input name="password" class="form-control" type="password" placeholder="请输入密码"/>
          </div>
        </div>
        <div class="form-group">
          <div class="col-lg-offset-3 col-lg-3">
            <button type="submit" class="btn-default form-control">登录</button>
          </div>
          <div class="col-lg-offset-1 col-lg-3">
            <button type="submit" class="btn-default form-control">注册</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

3、编写js代码(内置验证规则)

 <script type="application/javascript">
        $(function () {
            $("#login").bootstrapValidator({
                // 通用的错误提示语
                message: "该字段无需验证",
                // 指定验证后验证字段的提示字体图标
                feedbackIcons: {
                   // Bootstrap 版本 >= 3.1.0
                    //  验证通过的输入框状态
                    valid: 'glyphicon glyphicon-ok',
                    //  验证失败的输入框状态
                    invalid: 'glyphicon glyphicon-remove',
                    // 验证中的状态
                    validating: 'glyphicon glyphicon-refresh'
                },
                /**
                 * 需要验证的输入框 注意跟input的name属性的名字一样
                 */
                fields: {
                    username: {
                        message: '用户名必须长度不能少于8位',
                        validators: {
                            notEmpty: {
                                // 空提示
                                message: "用户名不能为空",
                            },
                            stringLength: {
                                min: 8,
                                max: 30,
                                message: '用户名长度必须是8-30位',
                            }
                        }
                    },
                    password: {
                        message: '密码无效',
                        validators: {
                            notEmpty: {
                                message: "密码不能为空"
                            },
                            stringLength: {
                                min: 8,
                                max: 30,
                                message: "密码必须是8-20位"
                            }
                        }
                    }
                }
            })
        });
</script>

4、自定义验证规则(regexp)

    <script>
        $(function () {
            $("#login").bootstrapValidator({
                // 全局默认的错误信息
                message: "数据不合法",
                feedbackIcons: {
                    //  验证通过的输入框状态
                    valid: 'glyphicon glyphicon-ok',
                    //  验证失败的输入框状态
                    invalid: 'glyphicon glyphicon-remove',
                    // 验证中的状态
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: "数据不符合规范",
                        validators:{
                          // 无输入提示
                            notEmpty: {
                                message: '用户名不能为空',
                            },
                            // 自定义验证规则  正则表达式
                            regexp: {
                                regexp: '^[a-zA-z]\w{7,20}$',
                                message: '用户必须以字母开头长度为8-20',
                            }
                        }
                    }
                }
            })
        })
    </script>

常用的正则表达式

1.帐号是否合法(字母开头，允许7-20字节，允许字母数字下划线)：/^[a-zA-Z][a-zA-Z0-9_]{7,19}$/
  帐号是否合法(大写开头，允许7-20字节，允许字母数字下划线)：/^[A-Z][a-zA-Z0-9_]{7,19}$/
2. 密码(以字母开头，长度在8~18之间，只能包含字母、数字和下划线)：/^[a-zA-Z]\w{7,17}$/
   强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
3.手机号码：/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
4.Email地址：/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
5.身份证 /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
6.IP地址：/((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/
7.汉字：/^[\u4e00-\u9fa5]{0,}$/

5、验证两次密码一致

  <-- 注册界面 register.html-->
  <div class="row">
        <header class="page-header text-center">
            <h1>用户注册页面</h1>
        </header>
        <div class="col-lg-6 col-lg-offset-3" id='login_box'>
            <form id="login" class="form-horizontal">
                <div class="form-group">
                    <label class="col-lg-3 control-label">用户</label>
                    <div class="col-lg-7">
                        <input name="username" class="form-control" type="text" placeholder="请输入名字"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-3 control-label">邮箱</label>
                    <div class="col-lg-7">
                        <input name="email" class="form-control" type="text" placeholder="请输入邮箱"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-3 control-label">密码</label>
                    <div class="col-lg-7">
                        <input name="password" class="form-control" type="password" placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-3 control-label">确认密码</label>
                    <div class="col-lg-7">
                        <input name="verify_password" class="form-control" type="password" placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-offset-3 col-lg-3">
                        <button type="submit" class="btn-default form-control">登录</button>
                    </div>
                    <div class="col-lg-offset-1 col-lg-3">
                        <button type="submit" class="btn-default form-control">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
  $(function () {
  $("#login").bootstrapValidator({
    // 全局默认的错误信息
    message: "数据验证失败",
    feedbackIcons: {
      //  验证通过的输入框状态
      valid: 'glyphicon glyphicon-ok',
      //  验证失败的输入框状态
      invalid: 'glyphicon glyphicon-remove',
      // 验证中的状态
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      username: {
        message: "数据不符合规范",
        validators: {
          notEmpty: {
            message: '用户名不能为空',
          },
          // 自定义验证规则  正则表达式
          regexp: {
            regexp: /^[a-zA-z]\w{7,20}$/,
            message: '用户必须以字母开头长度为8-20',
          }
        }
      },
      email: {
        message: '邮箱验证失败',
        validators: {
          notEmpty: {
            message: "邮箱不能为空",
          },
          regexp: {
            regexp: /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
            message: '邮箱格式不正确',
          }
        }
      },
      password: {
        message: "密码验证失败",
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          // 不能相同
          different: {
            field: 'username',
            message: '密码不能和用户名相同'
          },
          regexp: {
            // 必须以大写字母开头
            regexp: /^[a-zA-Z]\w{7,15}$/,
            message: '必须以字母开头长度8-16位'
          }
        }
      },
      verify_password: {
        validators: {
          notEmpty: {
            message: '密码不能为空',
          },
          // 两次输入必须一致
          identical: {
            field: 'password',
            message: '两次输入密码不一致',
          },
          different: {
            field: 'username',
            message: '密码不能和用户名相同'
          },
          regexp: {
            // 必须以大写字母开头
            regexp: /^[a-zA-Z]\w{7,15}$/,
            message: '必须以大写字母开头长度8-16位'
          }
        }
      }
    }
  })
})
</script>

6、验证通过之后提交数据

/**
 * 1. 当提交按钮的[type=”submit”]时
 */
$form = $("#login").bootstrapValidator(...)
 // 2.触发点击登录的事件
$form.on("success.form.bv", function (e) {
  // 3.判断数据通过验证
  let valid = $(this).data('bootstrapValidator').isValid();
  if (valid) {
    // 4.获取提交的url地址
    let url = $(this).attr("action");
    // &username=xxx&password=xxx
    let data = $(this).serialize();
    // 5.ajax提交数据
    $.post(url, data, function (result) {
      // 成功的回调函数
      alert(result)
    });
  }
  // 阻止事件冒泡
  return false;
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容