vue 结合bootstrapValidator动态验证（包含动态数组）

这里写自定义目录标题

vue mounted方法中声明 form1为form元素id，fields中为需校验元素name属性及校验方法，在页面ajax请求前调用

		var bootstrapValidator1 = $("#form1").data('bootstrapValidator');
        bootstrapValidator1.validate();
       
        if(!bootstrapValidator1.isValid()){
            alert('请完善输入项');
            return;
        }

可实现一般元素检验，feedbackIcons 设置校验码不通过X号、校验通过√号的显示效果
vue 结合bootstrapValidator动态验证（包含动态数组）

mounted:function(){
    $("#form1").bootstrapValidator({
        message:'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{
            sendIp:{
                validators:{
                    notEmpty:{
                        message:'不能为空'
                    },
                    regexp: {
                        regexp: "^(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])$",
                        message: '请输入合法的IP地址'
                    }
                }
            },
            sendPort:{
                validators:{
                    notEmpty:{
                        message:"不能为空"
                    },
                    digits :{
                        message:"请输入正整数"
                    }
                }
            },
            postUrl:{
                validators:{
                    notEmpty:{
                        message:"不能为空"
                    },
                    regexp: {
                        regexp: "^[a-zA-Z0-9_\u4e00-\u9fa5]*$",
                        message: '不能包含特殊字符'
                    }
                }
            }

        }
    });

动态数组元素校验（此处以修改页面为例），获取后端数据

$.get(url+id, function(r){
                vm.items= r.items;
                var itemArr = r.items.itemArr;
                for (var i = 0; i <itemArr.length ; i++) {
                    itemArr[i].nameX='msgName'+count;
                    itemArr[i].nameY='msgDevN'+count;
                    vm.targetArr.push(itemArr[i]);
                    count+=1;
                }
            });

count为全局变量
html页面使用v-for="(item,index) in targetArr" :key="item.nameX"这里的key必须指定并且保证唯一不然在数组remove某个元素的时候渲染会出问题，不绑定id为key是因为存在新增操作

<input type="text" v-model="item.ip" :name="item.nameX" class="form-control placeholder="请输入值" />

:name绑定动态生成的name属性,因为bootstrapvalidator校验根据name属性，动态生成name保证唯一性
vue 结合bootstrapValidator动态验证（包含动态数组）
新增绑定方法

addTarget:function(){
	            this.targetArr.push({
	                ip:'',
	               	port:'',
	                nameX:'nameX'+count,
	                nameY:'nameY'+count
	            });
	            count+=1;
	        }

右上角X号绑定删除方法，删除元素之后刷新校验方法

  remove:function (item) {
            var i = this.targetArr.indexOf(item);
            this.targetArr.splice(i, 1);
            if ($("#form1").data('bootstrapValidator')!=undefined){
                $("#form1").data('bootstrapValidator').destroy();
                $("#form1").data('bootstrapValidator',null);
                vm.checkAllVal();
                $("#form1").data('bootstrapValidator').validate();
            }
        }

checkAllVal:function () {
            for (var i = 0; i <this.targetArr.length; i++) {
                $('#form1').bootstrapValidator("addField",
                    this.targetArr[i].nameX, {
                        validators: {
                            notEmpty: {
                                message: '不能为空'
                            },
                            regexp: {
                                regexp: "^(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])$",
                                message: '请输入合法的IP地址'
                            }
                        }
                    }
                );
                $('#form1').bootstrapValidator("addField",
                this.targetArr[i].nameY, {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        digits :{
                            message:"请输入正整数"
                        }
                    }
                }
             )
       	}
      }

保存操作

vm.checkAllVal();
var bootstrapValidator1 = $("#form1").data('bootstrapValidator');
bootstrapValidator1.validate();
  
 if(!bootstrapValidator1.isValid()){
      alert('请完善输入项');
      return;
  }

仅个人开发记录（本人是java开发者，因为项目开发需要兼职做前端页面内，如有问题，请指出）

vue 结合bootstrapValidator动态验证（包含动态数组）

这里写自定义目录标题

相关推荐