BootstrapValidator 的使用教程

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

三、效果图

初始的   填写表单,验证效果如下         remote 远程调用可以参考这个 https://liuyanzhao.com/7844.html      

发表评论

目前评论:1