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选择框，有个备注文本框。

aaarticlea/png;base64,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" alt="" />

可以看到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);

            }

        }

秒客网

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

相关文章