BootstrapValidator指南

|   Visit count

BootstrapValidator是一款基于jQuery的Bootstrap表单校验插件，提供了非常丰富的校验规则。

准备工作

要使用BootstrapValidator，需要先引入必要的文件：

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-3.0.3.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrapValidator-0.5.2.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-3.0.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrapValidator-0.5.2.min.js"></script>

其中需要注意的是jQuery版本必须大于1.9.1。文件下载地址：https://drive.google.com/open?id=1FVhZT899gewytpLVTwD-4x2uR1tSXFkN。

需要校验的表单必须由<form></form>标签包裹，并且需要验证的字段由<div class="form-group"></div>包裹，并且有name属性。比如：

1
2
3
4
5
6
<form>
    <div class="form-group">
        <label>labelName</label>
        <input type="text" class="form-control" name="fieldName"/>
    </div>
</form>

绑定校验规则

对form元素绑定校验规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$("form").bootstrapValidator({
    // 指定不验证的情况
    // 值可设置为以下三种类型：
    // 1、String  ':disabled, :hidden, :not(:visible)'
    // 2、Array  默认值  [':disabled', ':hidden', ':not(:visible)']
    // 3、带回调函数  
    //  [':disabled', ':hidden', function($field, validator) {
            // $field 当前验证字段dom节点
            // validator 验证实例对象 
            // 可以再次自定义不要验证的规则
            // 必须要return，return true or false; 
            return !$field.is(':visible');
        }]
    // 
    excluded: [':disabled', ':hidden', ':not(:visible)'],
    // 生效规则
    // enabled:字段值发生变化就触发验证
    // disabled/submitted:点击提交时触发验证
    live: 'disabled',
    // 图标 
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        field1: { // 字段名
            validators: {
                // ...
            }
        },
        field2: {
            validators: {
                // ...
            }
        }
    }
});

下面具体介绍各种校验规则。

非空校验

非空校验是最常见的一种校验之一，比如对name属性为userName的字段进行非空校验：

1
2
3
4
5
6
7
userName: { // name属性值
    validators: {
        notEmpty: { // 非空校验
            message: '用户名不能为空!'
        }
    }
},

文本长度校验

比如对userName的长度进行控制：

1
2
3
4
5
6
7
8
9
userName: {
    validators: {
        stringLength: { // 长度校验
            min: 3,
            max: 10,
            message: '用户名长度%s~%s个字符！'
        }
    }
},

这里userName的长度被限制为3~10个字符（包含3和10）。%s分别表示3和10。

正则校验

BootstrapValidator支持正则表达式校验，比如：

1
2
3
4
5
6
7
8
userName: {
    validators: {
        regexp: { //正则校验
            regexp: /^[a-zA-Z0-9_]+$/, 
            message:'用户名仅支数字，字母和下划线的组合'
        },
    }
},

远程校验

远程校验使用Ajax异步请求从服务端进行校验，比如校验userName的值是否已经存在。如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
userName: {
    validators: {
        remote: {
            url: "user/confirmUserName.do",
            message: "用户名已存在",
            type: "get",
            data: function(){ // 额外的数据，默认为当前校验字段,不需要的话去掉即可
                return {
                    "name": $("input[name='userName']").val().trim()
                };
            }
        }
    }
},

假如userName字段填写的值为123，则参数格式为：userName=123&name=123，所以如果无需额外参数的话，data属性可以略去。

服务端：

1
2
3
4
5
6
7
8
9
10
11
12
@RequestMapping("user/confirmUserName")
@ResponseBody
public Map<String,Boolean> confirmUserName(String name) {
    Map<String,Boolean> map = new HashMap<String, Boolean>();
    map.put("valid", true);
    // 模拟数据库中已经存在“Mike”
    if(name.equals("Mike")){
        // 设置校验不通过
        map.put("valid", false);
    }
    return map;
}

当valid为true的时候，表示Mike用户名可用；当valid为false的时候，表示Mike已被注册。

邮箱校验

BootstrapValidator提供了邮箱校验的方法，可以不用手动编写邮箱的正则表达式：

1
2
3
4
5
6
7
email: {
    validators: {
        emailAddress: { // 可以不用自己写正则
            message: '邮箱格式不正确'
        }
    }
},

对比校验

对比校验就是指当前字段的值和别的字段的值相比较，产生校验结果。常用于密码字段，比如有如下form表单：

1
2
3
4
5
6
7
8
9
10
<form>
    <div class="form-group">
        <label>请输入密码</label>
        <input type="text" class="form-control" name="password"/>
    </div>
    <div class="form-group">
        <label>请再次输入密码</label>
        <input type="text" class="form-control" name="confirmPassword"/>
    </div>
</form>

常用的校验规则如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
password: {
    validators: {
        notEmpty: {
            message: '请输入密码'
        },
        different: { // 比较是否不同，否的话校验不通过
            field: 'userName', // 和userName字段比较
            message: '密码不能与用户名相同！'	
        }
    }
},
confirmPassword: { 
    validators: {
        notEmpty: {
            message: '请再次确认密码！'
        },
        identical: { // 比较是否相同，否的话校验不通过
            field: 'password', // 和password字段比较
            message: '两次密码输入不一致'
        }
    }
},

复选框校验

复选框校验用于控制复选框的选中个数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="form-group">
    <label>兴趣爱好</label>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="hobbies" value="swimming" /> 游泳
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="hobbies" value="fitness" /> 健身
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="hobbies" value="football" /> 足球
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="hobbies" value="sleep" /> 睡觉
        </label>
    </div>
</div>

校验规则：

1
2
3
4
5
6
7
8
9
hobbies: {
    validators: {
        choice: {
            min: 1,
            max: 3,
            message: '请选择1~3项兴趣爱好'
        }
    }
},

数字范围校验

数字范围校验类似与文本长度校验，不过其一般用于数字类型的长度校验，比如限制年龄范围为1~150：

1
2
3
4
5
6
7
8
9
age: {
    validators: {
        between: {
            min: 0,
            max: 150,
            message: '请输入正常的年龄,范围为%s到%s',
        }
    }
},

除了使用between外，还可以使用lessThan和greaterThan来实现和between类似的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
age: {
    validators: {
        lessThan: {
            value: 150,
            inclusive: true, // 是否包含150，true为包含
            message: '年龄必须小于等于%s'
        },
        greaterThan: {
            value: 0,
            inclusive: false, 不包含0
            message: '年龄必须大于%s'
        }
    }
},

文件校验

文件校验用于对上传的附件类型，大小等进行限制，常用的规则如下：

1
2
3
4
5
6
7
8
9
10
files: {
    validators: {
        file:  {
            maxSize: 1024*1024, // 文件大小，单位为b，这里为1mb
            extension: 'jpg,png', // 格式
            type: 'image/jpeg,image/png', // 对应的MIME type
            message: '文件不合法，必须小于1MB，并且格式为jpg或png'
        }
    }
},

更详细的校验规则如下表所示：

选项HTML属性类型描述
extensiondata-fv-file-extensionString允许的扩展名，用逗号分隔
maxFilesdata-fv-file-maxfilesNumber最大文件数
maxSizedata-fv-file-maxsizeNumber最大文件大小（以字节为单位）
maxTotalSizedata-fv-file-maxtotalsizeNumber所有文件的最大大小（以字节为单位）
minFilesdata-fv-file-minfilesNumber文件的最小数量
minSizedata-fv-file-minsizeNumber最小文件大小（以字节为单位）
minTotalSizedata-fv-file-mintotalsizeNumber所有文件的最小大小（以字节为单位）
messagedata-fv-file-messageString错误消息
typedata-fv-file-typeString允许的MIME类型，以逗号分隔。例如：设置
image/jpeg,image/png,application/pdf只允许上传JPEG，PNG图像和PDF文档。
下表显示了常见的MIME类型。对于其他MIME类型，可以参考https://www.sitepoint.com/mime-types-complete-list/。
MIME类型文件扩展名
application/msworddoc
application/pdfpdf
application/rtfrtf
application/vnd.ms-excelxls
application/vnd.ms-powerpointppt
application/x-rar-compressedrar
application/x-shockwave-flashswf
application/zipzip
audio/midimid midi kar
audio/mpeg,audio/mp3mp3
audio/oggogg
audio/x-m4am4a
audio/x-realaudiora
image/gifgif
image/jpegjpeg jpg
image/pngpng
image/tifftif tiff
image/vnd.wap.wbmpwbmp
image/x-iconico
image/x-jngjng
image/x-ms-bmpbmp
image/svg+xmlsvg svgz
image/webpwebp
text/csscss
text/htmlhtml htm shtml
text/plaintxt
text/xmlxml
video/3gpp3gpp 3gp
video/mp4mp4
video/mpegmpeg mpg
video/quicktimemov
video/webmwebm
video/x-flvflv
video/x-m4vm4v
video/x-ms-wmvwmv
video/x-msvideoavi

callback验证

callback用于校验验证码等类型，比如要实现下面这样的效果：

578a01ef884cd58e02669a5ed868d593.png

HTML代码：

1
2
3
4
<div class="form-group">
    <label id="question"></label>
    <input type="text" class="form-control" name="answer" />
</div>

生成数学算式：

1
2
3
4
function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
};
$('#question').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

校验规则：

1
2
3
4
5
6
7
8
9
10
11
12
answer: {
    validators: {
        callback: {
            message: "答案不正确！",
            callback: function(value, validator){ // 验证答案是否正确，value为用户输入的值
                var items = $('#question').html().split(' ');
                var sum = parseInt(items[0]) + parseInt(items[2]);
                return value == sum;
            }
        }
    }
}

实际中，可以将上面的校验规则组合在一起，实现更复杂的校验。

常用事件

手动触发校验

手动触发校验包含触发单个字段和触发整个表单：

1
2
3
4
// 整个表单
$("form").bootstrapValidator('validate');
// 单个字段
$("form").data('bootstrapValidator').validateField('fieldName');

获取当前表单校验结果

获取当前表单校验状态，校验通过返回true，否则返回false：

1
2
3
4
var bootstrapValidators = $("form").data('bootstrapValidator');
if(bootstrapValidators.isValid()) {
    // todo
}

重置校验

1
2
$('form').data('bootstrapValidator').resetForm(true); // 重置校验
$('form')[0].reset();// 表单清空
请作者喝瓶肥宅水🥤
0