BootstrapValidator 的使用教程

avatar 2018年02月18日22:02:44 6 3331 views
博主分享免费Java教学视频，B站账号：Java刘哥
在使用 Bootstrap 作为前端框架的时候，表单验证时必不可少要用到 BootstrapValidator，本文介绍 BootstrapValidator 的基本使用。  

一、下载和引用

Bootstrap 下载地址：https://v3.bootcss.com/getting-started/#download BootstrapValidator 下载地址：http://www.bootcdn.cn/bootstrap-validator/   head 里引入 CSS
  1. <link rel="stylesheet" th:href="@{/common/bootstrap/v3/css/bootstrap.min.css}">
  footer 里引入 JS
  1. <!-- jQuery -->
  2. <script th:src="@{/common/jquery/jquery.min.js}"></script>
  3. <!-- Bootstrap 3.3.7 -->
  4. <script th:src="@{/common/bootstrap/v3/js/bootstrap.min.js}"></script>
  5. <!--BootstrapValidator-->
  6. <script th:src="@{/common/bootstrap-validator/bootstrapValidator.js}"></script>
  博主这里使用的是 Thymeleaf，所以有 th:href 和 th:src  

二、开始使用

HTML
  1. <div class="form-group has-primary has-feedback">
  2.            <label for="username" class="col-sm-3 control-label">
  3.                用户名 <span class="text-danger">*</span>
  4.            </label>
  5.            <div class="col-sm-8">
  6.                <input type="text" id="username" name="username" class="form-control" >
  7.            </div>
  8.        </div>
  10.        <div class="form-group has-primary has-feedback">
  11.            <label for="name" class="col-sm-3 control-label">
  12.                昵称 <span class="text-danger">*</span>
  13.            </label>
  14.            <div class="col-sm-8">
  15.                <input type="text" id="name" name="name" class="form-control" >
  16.            </div>
  17.        </div>
  19.        <div class="form-group has-primary has-feedback">
  20.            <label for="password" class="col-sm-3 control-label">
  21.                密码 <span class="text-danger">*</span>
  22.            </label>
  23.            <div class="col-sm-8">
  24.                <input type="password" id="password" name="password" class="form-control" >
  25.            </div>
  26.        </div>
  28.        <div class="form-group has-primary has-feedback">
  29.            <label for="confirm_password" class="col-sm-3 control-label">
  30.                确认密码 <span class="text-danger">*</span>
  31.            </label>
  32.            <div class="col-sm-8">
  33.                <input type="password" id="confirm_password" name="confirm_password" class="form-control">
  34.            </div>
  35.        </div>
  37.        <div class="form-group has-primary has-feedback">
  38.            <label class="col-sm-3 control-label">
  39.                角色 <span class="text-danger">*</span>
  40.            </label>
  41.            <div class="col-sm-8">
  42.                <label class="checkbox-inline">
  43.                    <input type="checkbox" name="authorityId" value="1">管理员
  44.                </label>
  45.                <label class="checkbox-inline">
  46.                    <input type="checkbox" name="authorityId" value="2" checked>用户
  47.                </label>
  48.            </div>
  49.        </div>
  51.        <div class="form-group has-primary has-feedback">
  52.            <label for="email" class="col-sm-3 control-label">
  53.                Email <span class="text-danger">*</span>
  54.            </label>
  55.            <div class="col-sm-8">
  56.                <input type="text" id="email" name="email" class="form-control" >
  57.            </div>
  58.        </div>
  60.        <div class="form-group has-primary has-feedback">
  61.            <label for="phone" class="col-sm-3 control-label">手机号码</label>
  62.            <div class="col-sm-8">
  63.                <input type="text" id="phone" name="phone" class="form-control" >
  64.            </div>
  65.        </div>
  67.        <div class="form-group has-primary has-feedback">
  68.            <label for="homepage" class="col-sm-3 control-label">个人主页</label>
  69.            <div class="col-sm-8">
  70.                <input type="text" id="homepage" name="homepage" class="form-control" >
  71.            </div>
  72.        </div>
  74.        <div class="form-group has-primary has-feedback">
  75.            <label for="profile" class="col-sm-3 control-label">简介</label>
  76.            <div class="col-sm-8">
  77.                <textarea class="form-control" rows="3" name="profile" id="profile"></textarea>
  78.            </div>
  79.        </div>
  81.        <div class="form-group has-primary has-feedback">
  82.            <label class="col-sm-3 control-label">
  83.                状态 <span class="text-danger">*</span>
  84.            </label>
  85.            <div class="col-sm-8">
  86.                <label class="radio-inline">
  87.                    <input type="radio" name="status" value="normal" checked>正常
  88.                </label>
  89.                <label class="radio-inline">
  90.                    <input type="radio" name="status" value="locked">锁定
  91.                </label>
  92.            </div>
  93.        </div>
  96.        <div class="form-group has-primary has-feedback">
  97.            <div class="col-sm-offset-3 col-sm-8">
  98.                <button type="submit" class="btn btn-primary">提交</button>
  99.            </div>
  100.        </div>
  JS
  1. $(document).ready(function () {
  2.         $("#userForm").bootstrapValidator({
  3.             message: '输入值不合法',
  4.             feedbackIcons: {
  5.                 valid: 'glyphicon glyphicon-ok',
  6.                 invalid: 'glyphicon glyphicon-remove',
  7.                 validating: 'glyphicon glyphicon-refresh'
  8.             },
  9.             fields: {
  10.                 username: {
  11.                     message: '用户名不合法',
  12.                     validators: {
  13.                         notEmpty: {
  14.                             message: '用户名不能为空'
  15.                         },
  16.                         stringLength: {
  17.                             min: 2,
  18.                             max: 20,
  19.                             message: '用户名为2到20个字符'
  20.                         },
  21.                         regexp: {
  22.                             regexp: /^[a-zA-Z0-9_.@]+$/,
  23.                             message: '用户名只能由字母、数字和下划线组成'
  24.                         },
  26.                     }
  27.                 },
  28.                 name: {
  29.                     message: '姓名不合法',
  30.                     validators: {
  31.                         notEmpty: {
  32.                             message: '姓名不能为空'
  33.                         },
  34.                         stringLength: {
  35.                             min: 2,
  36.                             max: 20,
  37.                             message: '昵称为2到20个字符'
  38.                         }
  39.                     }
  40.                 },
  41.                 password: {
  42.                     message: '密码不合法',
  43.                     validators: {
  44.                         notEmpty: {
  45.                             message: '密码不能为空'
  46.                         },
  47.                         stringLength: {
  48.                             min: 6,
  49.                             max: 100,
  50.                             message: '密码为6到100个字符'
  51.                         },
  52.                         regexp: {
  53.                             regexp: /^[a-zA-Z0-9_]+$/,
  54.                             message: '密码只能由字母、数字和下划线组成'
  55.                         }
  56.                     }
  57.                 },
  58.                 confirm_password: {
  59.                     message: '确认密码不合法',
  60.                     validators: {
  61.                         notEmpty: {
  62.                             message: '确认密码不能为空'
  63.                         },
  64.                         stringLength: {
  65.                             min: 6,
  66.                             max: 100,
  67.                             message: '请输入6到100个字符'
  68.                         },
  69.                         regexp: {
  70.                             regexp: /^[a-zA-Z0-9_]+$/,
  71.                             message: '确认只能由字母、数字和下划线组成'
  72.                         },
  73.                         identical: {
  74.                             //需要验证的field
  75.                             field: 'password',
  76.                             message: '两次密码输入不一致'
  77.                         }
  78.                     }
  79.                 },
  80.                 authorityId: {
  81.                     validators: {
  82.                         notEmpty: {
  83.                             message: '角色必选'
  84.                         }
  85.                     }
  86.                 },
  87.                 email: {
  88.                     validators: {
  89.                         notEmpty: {
  90.                             message: '邮箱地址不能为空'
  91.                         },
  92.                         emailAddress: {
  93.                             message: '请输入正确的邮箱地址'
  94.                         }
  95.                     }
  96.                 },
  97.                 phone: {
  98.                     validators: {
  99. //                        phone: {
  100. //                            country: 'CN',
  101. //                            message: "手机号不合法"
  102. //                        },
  103.                         stringlength: {
  104.                             min: 11,
  105.                             max: 11,
  106.                             message: '请输入11位手机号码'
  107.                         },
  108.                         regexp: {
  109.                             regexp: /^1[3|5|8]{1}[0-9]{9}$/,
  110.                             message: '请输入正确的手机号码'
  111.                         }
  112.                     }
  113.                 },
  114.                 homepage: {
  115.                     message: '个人主页不合法',
  116.                     validators: {
  117.                         uri: {
  118.                             message:'url不合法'
  119.                         },
  120.                         stringLength: {
  121.                             max: 50,
  122.                             message: '个人主页不要超过50个字符'
  123.                         },
  124.                     }
  125.                 },
  127.                 profile: {
  128.                     message: '简介不合法',
  129.                     validators: {
  130.                         stringLength: {
  131.                             max: 20,
  132.                             message: '简介不要超过50个字符'
  133.                         },
  134.                     }
  135.                 },
  136.                 status: {
  137.                     validators: {
  138.                         notEmpty: {
  139.                             message: '状态必选'
  140.                         }
  141.                     }
  142.                 },
  144.             }
  145.         });
  146.     });
 

三、效果图

初始的   填写表单，验证效果如下         remote 远程调用可以参考这个 https://liuyanzhao.com/7844.html      
历史上的今天
二月
18日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0