bootstrapValidator常用验证规则总结

bootstrapValidator常用验证规则总结

一 、bootstrapValidator引入

在使用bootstrapValidator前我们需要引入bootstrap和bootstrapValidator对应的js和css文件。

    <link rel="stylesheet" href="css/bootstrap.min.css" />
　　<link rel="stylesheet"  href="bootstarp-validator/bootstrapValidator.css}"/>
    <!-- 1、Jquery组件引用  -->
    <script src="js/jquery-1.10.2.min.js"  th:src="@{/js/jquery-1.10.2.min.js}"></script> 
    <!-- 2、bootstrap组件引用  -->
    <script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <!-- 3、引入bootstrapValidator的js  -->
    <script type="text/javascript"  th:src="@{js/bootstraptable/bootstrapValidator.js}"></script>

二、绑定验证的js代码

    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
        <form id="form-wizard" enctype="multipart/form-data"
                    name="form-wizard" class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-lg-3" for="username">用户名</label>
                <div class="col-lg-6">
                    <input type="text"  class="form-control" name="username" id="username"    placeholder="username">
                </div>
            </div>
            <div class="form-group">
              <label class="control-label col-lg-3">密码</label>
                  <div class="col-lg-6">
            <input type="password" class="form-control" name="password" />
          </div>
        </div>
          <div class="form-group">
                <label class="control-label col-lg-3" for="remark">备注</label>
                <div class="col-lg-6">
                    <input type="text"  class="form-control" name="remark" id="remark"    placeholder="remark">
                </div>
            </div>
         </form>
         </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveButton">提交</button>
            </div>
        </div>
    </div>
    $(function() {
      $('#form-wizard').bootstrapValidator({
　　　　　　　　// excluded: [':disabled', ':hidden', ':not(:visible)'],//默认指定不验证的情况
                message : 'This value is not valid',
                feedbackIcons : {
                    valid : 'glyphicon glyphicon-ok',
                    invalid : 'glyphicon glyphicon-remove',
                    validating : 'glyphicon glyphicon-refresh'
                },
                fields : {
                     username: {  /*键名username和input name值对应*/
                        message: '用户名不能为空',//默认提示信息
                        validators: {
                            notEmpty: { /*非空提示*/
                                message: '用户名必填不能为空'
                            },
                            stringLength: { /*长度提示*/
                                min: 6,
                                max: 30,
                                message: '用户名长度不能小于6位或超过30位'
                            },
                            regexp: { /*正则校验*/
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '用户名只能由字母、数字、点和下划线组成。'
                            },
                        }
                    },
                   password: {
                      message:'密码无效',
                          validators: {
                            notEmpty: {
                                  message: '密码不能为空'
                                    },
                            stringLength: {
                                  min: 6,
                                 max: 30,
                              message: '密码长度必须在6到30之间'
                                }
                              }
                       },
                    remark : {
                        validators : {
                            notEmpty : {
                                message : '备注必填'
                            },
                         stringLength : {
                            min : 2,
                            max : 200,
                            message : '备注长度必须2-200字符'
                        } 
                        }
                    },  
                }
            });
      //提交按钮,所有验证通过方可提交
            $("#saveButton").click(
                    function() {
                                var flag = $('#form-wizard').bootstrapValidator(
                                        'validate').data('bootstrapValidator')
                                        .isValid();
                                if (flag) {
                                    alert("校验通过");                    
                                }
                    });
    });

注意:

bootstrapValidator默认配置对于“隐藏域（:hidden）、禁用域（:disabled）、不可见域（:not (visible)）”是不进行验证的。通过excluded: [':disabled']配置,表示只对于禁用域不进行验证，其他的表单元素都要验证.

三.在validators中一些验证规则的总结

1.判断字段是否为空
     notEmpty: {
              message: '用户名必填不能为空'
                },

2.字段长度判断
    stringLength: {
              min: 6,
              max: 30,
              message: '长度不能小于6位或超过30位'
              },

3.通过正则表达式进行验证
    regexp: {
              regexp: /^[A-Z\s]+$/i,
              message: '只能由字母字符和空格组成。'
              },

4.大小写验证
    stringCase: {
              message: '姓氏必须只包含大写字符。',
              case: 'upper'//其他值或不填表示只能小写字符
                },

5.两个字段不相同的判断
    different: {
              field: 'password',
              message: '用户名和密码不能相同。'
            },

6.email验证
    emailAddress: {
             message: 'The input is not a valid email address'
           },

7.日期格式验证
    date: {
             format: 'YYYY/MM/DD',
             message: '日期无效'
           },

8.纯数字验证
     digits: {
             message: '该值只能包含数字。'
           },

9.ajax验证

    threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
    remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json            数据。例表示正确：{"valid",true}  
    url: 'exist2.do',//验证地址
    message: '用户已存在',//提示消息
    delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字                符，提交一次，服务器压力太大）
    type: 'POST'//请求方式
     },

10.复选框验证
    choice: {
               min: 2,
               max: 4,
               message: '请选择2-4项'
           },

11.密码确认
    identical: {
                 field: 'Password',   //指定控件name  
                 message: 'The password and its confirm are not the same'
              },

12.判断输入数字是否符合大于等于18并且小于等于65
    greaterThan: {
                    value: 18
                   },
    lessThan: {
                   value: 65
                 }

四、常用事件

1、重置某一单一验证字段验证规则

    $(formName).data(“bootstrapValidator”).updateStatus("fieldName",  "NOT_VALIDATED",  null );

2、重置表单所有验证规则

    $(formName).data("bootstrapValidator").resetForm();

3、手动触发表单验证

    //触发全部验证
    $(formName).data(“bootstrapValidator”).validate();
    //触发指定字段的验证
    $(formName).data(“bootstrapValidator”).validateField('fieldName');

4、获取当前表单验证状态

    // flag = true/false 
    var flag = $(formName).data(“bootstrapValidator”).isValid();

5、根据指定字段名称获取验证对象

    // element = jq对象 / null
    var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');

 学习 :http://www.bootcdn.cn/

　　http://bootstrapvalidator.votintsev.ru/getting-started/

相关链接: https://blog.csdn.net/u013938465/article/details/53507109 

　　　　https://blog.csdn.net/qq_26431469/article/details/52022345

对隐藏域值校验: https://blog.csdn.net/zsg88/article/details/72597956

 

转载于:https://www.cnblogs.com/Steven5007/p/8796709.html