前端校验框架bootstrapValidator使用总结

发表于 | 分类于 | |

由于项目在用bootstrap，为了更好的用户交互体验，需要加入前端校验框架，在参照了多个校验框架后，发现了这个基于bootstrap的框架bootstrapValidator，界面还不错，功能使用起来也挺符合一般bootstrap插件使用风格，容易理解，就采用了这个。

基本使用

效果

先看一下效果吧，省的介绍学习完了发现不喜欢风格，2333

validator

大概就是这样，风格感觉还是不错的，起码能一目了然。

然后说具体使用。

引入

首先引入插件：

1
2
3
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.min.js"></script>

官网说本插件已更新至FormValidator，不过懒得再去尝试使用了，看来0.5.3是本插件最后一版。

初始化

然后就是对form表单初始化插件，html的form表单正常写就OK，不过要注意各表单项要有name属性，本插件是根据name属性绑定各表单项的。

举个初始化js的例子，拿上图的事件名称和事件类型来说：

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
form.bootstrapValidator({
        message: '输入值不合法',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '事件名称不能为空'
                    },
                    stringLength: {
                        min: 1,
                        max: 30,
                        message: '事件名称不能超过30字'
                    }
                }
            },
            type: {
                validators: {
                    choice: {
                        min: 1,
                        message: '事件类型不能为空'
                    }
                }
            },
        }
}

各项含义还是挺清晰的吧，fileds就是配置各表单项的验证，一个input text元素，一个select元素，支持的验证类型很丰富：

notEmpty：非空验证；

stringLength：字符串长度验证；

regexp：正则表达式验证；

emailAddress：邮箱地址验证；

base64：64位编码验证；

between：验证输入值必须在某一个范围值以内，比如大于10小于100；

creditCard：身份证验证；

date：日期验证；

ip：IP地址验证；

numeric：数值验证；

phone：电话号码验证；

uri：url验证；

还有很多很多，更多的请在次查看，http://bv.doc.javake.cn/validators/

提交

上述配置之后，当你修改某个表单项提交时就会触发校验。

最后还要处理一下提交表单的逻辑，一般是前端校验通过后才允许向后端发送请求，后端最好也再进行校验。

后端校验可以保证数据安全，保证不产生脏数据和运行错误，而前端校验是为了加强用户交互体验但并不安全，所以两者结合是必要的。

以下是提交按钮点击处理事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//注册提交按钮点击事件
    form.find('#submitBtn').on('click', function () {
        var validator = form.data("bootstrapValidator").validate();
        if (validator.isValid()) {  //表单验证通过才向后端发请求
            var formData = getFormData(form);
            var obj = JSON.parse(formData);
            obj.id = select[0]['id'];
            var data = JSON.stringify(obj);
            $.ajax({
                type: 'POST',
                data: data,
                contentType: 'application/json; charset=utf-8',
                url: '/event/update'
            }).done(function (res) {
                if (res.status !== 0) {//校验出错，提示错误信息
                    $('#addMsg').text(res.message);
                } else {
                    $('#bootstrap-table').bootstrapTable('refresh');
                    dialog.close();
                }
            });
        }
    });

关注下前3行即可，如何触发校验，如何得到校验结果。

问题总结

默认编辑对话框弹出时是没有校验的，需要用户填写表单项并提交时才触发校验，我们可以改成展示对话框就进行校验，方便用户知道各项的填写规则而不用试错。

此外，使用日期插件的表单项在修改时不会触发bootstrapvalidator校验，应该是插件本身的bug，我们可以注册日期插件修改事件，手动触发校验。

最后处理如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//展示对话框
var dialog = BootstrapDialog.show({
        size: 'size-wide',
        title: '请填写',
        message: form,
        onshown: function () { //对话框展示时验证表单
            //对话框展示时验证表单
            form.data("bootstrapValidator").validate();
            //开始日期和结束日期修改时，主动触发校验
            form.find('#datetimepicker1').on('changeDate', function () {
                form.bootstrapValidator('revalidateField', 'startTime');
                form.bootstrapValidator('revalidateField', 'endTime');
            });
            form.find('#datetimepicker2').on('changeDate', function () {
                form.bootstrapValidator('revalidateField', 'startTime');
                form.bootstrapValidator('revalidateField', 'endTime');
            });
        }
    }
);

对话框用的BootstrapDialog插件，onshown一项即是用来配置对话框展示后的处理，这里进行了表单校验，以及监听日期项修改触发校验。

从上面日期校验逻辑可以发现，共有开始日期和结束日期两个表单项（效果见最开始的截图），任一项修改都会对两者校验。为什么要校验两个呢，当然因为开始和结束日期需要校验先后啊，开始日期必须早于结束日期，这就引入了第三个问题，如何对多个关联字段校验。

后来，经查阅发现，bootstrapvalidator对此也是有支持的，就是采用它提供的callback函数。

如下：

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
startTime: {
                validators: {
                    notEmpty: {
                        message: '开始时间不能为空'
                    },
                    date: {
                        format: 'YYYY-MM-DD h:m'
                    },
                    callback: {
                        message: '开始日期不能大于结束日期',
                        callback: function (value, validator, $field, options) {
                            var end = ele.find("#endTime").val();
                            return value <= end;
                        }
                    }
                }
            },
            endTime: {
                validators: {
                    notEmpty: {
                        message: '结束时间不能为空'
                    },
                    date: {
                        format: 'YYYY-MM-DD h:m'
                    },
                    callback: {
                        message: '结束日期不能小于开始日期',
                        callback: function (value, validator, $field) {
                            var begin = ele.find("#startTime").val();
                            return value >= begin;
                        }
                    }
                }
            },

通过callback函数，我们可以在校验某一表单项时，获得其它表单项的值进行关联校验。注意以上代码，放在bootstrapvalidator的初始化配置里。

最后的效果就是开始的截图所示，本篇介绍就到此结束。

坚持原创技术分享，您的支持将鼓励我继续创作！
分享到：