bootstrap validate 实现页面动态验证（formvalidate）

关于基本的bootstrap validate 验证方法外面有许多博客上都有讲解，我就不在过多叙述了。大家也可以去看官网api：http://bv.doc.javake.cn/api/

今天要说的是动态生成的页面如何添加动态的验证。

因为页面是动态生成的，你并不知道它会有哪些字段，所以验证的时候没有办法按照api上根据name来验证。

 

首先来看这个页面

function brandHtml(category, subCategory, list, size) {
        var brandH = "";
        for ( var i = size; i < list.length; i++) {
            if (category == list[i].category
                    && subCategory == list[i].subCategory) {
                brandH += '<div class="col-xs-12 submit-form-group">'
                        + '<div class="bs-callout bs-callout-info">'
                        + '<div class="row">'
                        + '<div class="col-xs-2">
                        + '<label class=" control-label">' + list[i].brand
                        + '</label>' + '</div>' + '<div class="col-xs-3">'
                        + '<div class="form-group">';
                brandH += radioHtml(list[i].contentName, list[i],
                        list[i].brand, i);
                brandH += '</div>'
                        + '</div>'
                        + '<div class="col-xs-7">'
                        + '<div class="form-group">'
                        + '<div class="input-group">'
                        + '<span class="input-group-addon ">备注</span>'
                        + '<input type="text" class="form-control remark submit-filed"  name="'+list[i].id+'" >'
                        + '</div>' + '</div>'+'</div>'
                         + '</div>'  + '</div>' + '</div>';
            }
        }
        return brandH;
    }
function radioHtml(radiotxt, listnum, isSelfCould, size) {
        var radioH = "";
        var radioValues = listnum.contentType.split('-')[1].split(';');
        for ( var i = 0; i < radioValues.length; i++) {
            radioH += '<div class="radio">' + '<label>';
            radioH += '<input name="'+listnum.id+'_r" class="content submit-filed" type="radio"  value="'+radioValues[i]+'"/>';
            radioH += radioValues[i] + '</label>' + '</div>';
        }
        return radioH;
    }

 

可以看到页面中有很多个radio选择框，有个备注文本框。

可以看到name分别为name="'+listnum.id+'_r"，name="'+list[i].id+'"。

这样子很多人就不知道如何做验证了。而且在bootstrap  的api中查不到方法。这就需要去看Formvalidate这个网站了。

在这个介绍里面有这么一个方法：$('#myForm').bootstrapValidator('addField', list[i].id+"_r",_rdCheck；

    //首先我们需要在页面加载的时候验证初始化
        $('#myForm').bootstrapValidator({
            message : '',
            feedbackIcons : {
                /* valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh' */
            },
            fields : {
            }
        });
　　//可以看到我定义了两个验证规则，一个是对于文本框的，一个是对于radio按钮的
        var _bzCheck = {
                message : '',
                validators : {
                    notEmpty : {
                        message : '不能为空'
                    }
                }
            }

        var _rdCheck = {
                message : '',
                validators : {
                    notEmpty : {
                        message : '该选项为必填的'
                    }
                }
            }
        //定义方法，添加验证，第一次循环给页面所有name=list[i].id+"_r"的元素添加验证，第二次是给name=list[i].id的元素添加验证
        function addValidator(list){
            //list是一个ArrayList数组，存放的是当前页面的所有元素信息
            for(var i=0;i<list.length;i++){
                $('#myForm').bootstrapValidator('addField', list[i].id+"_r",_rdCheck); 
            }
            for(var i=0;i<list.length;i++){
                $('#myForm').bootstrapValidator('addField', list[i].id,_bzCheck); 
            }
        
        }

 

调用上面这个方法，这样子就可以给页面所有的radio和备注元素添加上了验证