bootstrap插件bootstrapValidator常用验证规则总结

一 :bootstrapValidator引入

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

    
 <script type="text/javascript" src="Public/js/jquery-3.2.1.js">script>

    
    <link rel="stylesheet" type="text/css" href="Public/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="Public/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="Public/css/bootstrapValidator.css">
    <script type="text/javascript" src="Public/js/bootstrap.js">script>
    <script type="text/javascript" src="Public/js/bootstrapValidator.js">script>

二：绑定验证的js代码

class="form-horizontal center-block" id="form_test">
        
class="form-group">
            class="col-sm-2 control-label" for="des">用户名
            
class="col-xs-4">
                type="text"  class="form-control" name="username" id="username" placeholder="username">
            
        

        
class="form-group ">
            class=" control-label col-sm-2" >
            
class="col-xs-4">
                type="submit" class="btn btn-primary">提 交
                type="reset" class="btn btn-default">清 空
            
        
    
  $(document).ready(function() {
        $('#form_test').bootstrapValidator({
            message: 'This value is not valid',
            //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
            excluded: ':disabled',//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证

            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',//显示验证成功或者失败时的一个小图标
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名不能为空',//默认提示信息
                    validators: {
                        notEmpty: {
                            message: '用户名必填不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '用户名长度不能小于6位或超过30位'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '用户名只能由字母、数字、点和下划线组成。'
                        },

                    }
                }

            }
        }).on('error.form.bv', function(e) {
            console.log('error');

            // Active the panel element containing the first invalid element
            var $form         = $(e.target),
                validator     = $form.data('bootstrapValidator'),
                $invalidField = validator.getInvalidFields().eq(0),
                $collapse     = $invalidField.parents('.collapse');

            $collapse.collapse('show');
        });
    });

三.在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: 'confirmPassword',
                        message: 'The password and its confirm are not the same'
                    },

12.判断输入数字是否符合大于18小于100

greaterThan: {
                        value: 18
                    },
lessThan: {
                        value: 100
                    }

13.uri验证

 uri: {}

其他细节参考 http://www.jb51.net/article/99381.htm