bootStrap Validator验证

bootStrapTable;

$(function () {
var oTable = new TableInit();
oTable.Init();
});

var TableInit = function () {
    var oTableInit = new Object();
    oTableInit.Init = function () {
        $('#table').bootstrapTable({
            url: '/xx/xx', //请求后台的URL（*）
            method: 'get', //请求方式（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortName: 'xx',// 默认排序字段
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 15, //每页的记录行数（*）
            pageList: [15, 25, 50, 100], //可供选择的每页的行数（*）
            search: false, //是否显示表格搜索，此搜索是客户端搜索,也可以是服务端检索
            silent: true,
            strictSearch: true,//设置为 true启用全匹配搜索，否则为模糊搜索。
            showColumns: false, //是否显示所有的列.前端可选择显示哪些列
            showRefresh: false, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "customerId", //每一行的唯一标识，一般为主键列
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            //得到查询的参数
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                var query_params = {
                    limit: params.limit,                         //页面大小
                    offset: params.offset,   //页码
                    sort: params.sort,      //排序列名
                    order: params.order, //排位命令（desc，asc）

                    //查询框中的参数传递给后台
                    xx: $('#xxId').val(), // 请求时向服务端传递的参数
                };
                return query_params;
            },
            columns: [
                {
                    title: 'xxxx',
                    field: 'xxName',
                    align: "center",
                    valign: 'middle',
                    sortName: 'xx',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return [
                            '<a onclick="openEditDetailsModel(&quot;' + row.customerId + '&quot,&quot;' + row.xx+ '&quot,&quot;' + value + '&quot)" style="cursor:pointer;" tabindex="0">' + value + '</a>'
                        ].join('');
                    }
                },
                {
                    title: 'xx',
                    field: 'xx',
                    align: "center",
                    valign: 'middle',
                    sortName: 'xx',
                    sortable: true
                }
            ]

        });
    };
    return oTableInit;
};

bootStrap Validator验证

function xxValidator() {
// bootstrapValidator表单校验
$(".formClassName").bootstrapValidator({
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        checkName: {
            validators: {
                notEmpty: {
                    message: 'errorMessage'
                },
                stringLength: {
                    /*长度提示*/
                    min: 1,
                    max: 20,
                    message: 'errorMessage'
                },
                remote: {
                    url: "/xx/xxx",
                    data: function (validator) {
                        return {
                            checkName: $("#checkName").val(),
                        };
                    },
                    message: 'errorMessage',
                    delay: 10
                },
                callback: {
                    message: "errorMessage",
                    callback: function (value, validator) {

                        for (var i = 0; i < allCheckName.length; i++) {
                            if (value == allCheckName[i]) {
                                return false;
                            }
                        }
                        return true;
                    }
                }
            }
        },
        checkName: {
            validators: {
                notEmpty: {
                    message: 'errorMessage'
                },
                stringLength: {
                    min: 1,
                    max: 20,
                    message: 'errorMessage'
                },

                regexp: {
                    regexp: /^([1-9]\d{0,15}|[0]{1,1})$/,
                    message: 'errorMessage'
               }
            }
        }
    }
})

// 有效日期格式 bootstrap validator 日期插件 验证. 日期插件点击需要重新更新验证
$("#dateId").on('change', function (e) {
    $('.formClassName').data('bootstrapValidator').updateStatus('checkName', 'NOT_VALIDATED', null).validateField('checkName');
});
}

 

bootstrap validator 验证:

前台的table或tr,input是js动态生成的,需要用到 addField

for (.................){

tr="..<input type=text id = inputId>..."

tr.append("....................");

tr.appendTo("....................")

// xxxxxxx:动态添加的元素例如:$("#inputId)    然后在$(".formClassName").bootstrapValidator({里面需要添加对应的校验信息内容规则})

$(".formClassName").bootstrapValidator('addField', xxxxxxx); 

}

 

验证完 关键之处:

// model关闭

$('#modeId').on('hidden.bs.modal', function () {

// 清除动态添加的验证

$(".formClassName").bootstrapValidator('removeField', 'checkName');

// 销毁验证

$(".formClassName).data('bootstrapValidator').destroy();

// 重新加载验证

xxValidator();

// 重新刷新table

$('#tableId').bootstrapTable('refresh');

}