使用bootstrapValidator插件进行动态添加表单元素并校验


Posted in Javascript onSeptember 28, 2016

一、前言

实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验。在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现。虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助。

思路:动态添加表单元素,并调用bootstrapValidator的方法为表单添加校验规则,调用addField()方法实现功能

在网上找了好久才找到相关方法 ,可以去看下:http://formvalidation.io/api/#add-field,这里直接给出相关内容的截图,说实话我是没看太明白。。。后来又浪费好多时间去试验怎么使用。

使用bootstrapValidator插件进行动态添加表单元素并校验

在绝望之际偶然看到有这种用法,就试验了下,果然成功了

使用bootstrapValidator插件进行动态添加表单元素并校验

二、功能图

此图是页面初始化时的效果,表单元素是固定的,并且校验也是加在ready方法中的,稍后贴代码

使用bootstrapValidator插件进行动态添加表单元素并校验

下图是点击添加按钮,动态添加表单元素,并对元素添加校验规则的效果

使用bootstrapValidator插件进行动态添加表单元素并校验

三、代码

点击添加按钮时,实现添加元素,并对元素进行校验

// 列表-新增按钮 
$("#menuAdd").click(function(){ 
var n=$(".cy-list-content").length+1; 
var oDiv=$('<div></div>'); 
oDiv.addClass("cy-list-content"); 
oDiv.html('<h5>第' + n + '行</h5>' 
+'<div class="form-group">' 
+ '<textarea id="pushMenu['+(n-1)+'].text" class="form-control cy-text" rows="3" placeholder="请在此输入文字内容" name="pushMenu['+(n-1)+'].text"></textarea>' 
+'</div>' 
+ '<span class="cy-inter-config">交互配置</span>' 
+ '<select class="cy-config-select selectpicker" name="pushMenu['+(n-1)+'].menuType">' 
+ '<option value="00" >无</option><option value="01">默认反馈操作</option><option value="02">应用下载配置</option><option value="02a">网址访问配置</option><option value="03">短信订购配置</option>' 
+ '</select>' 
+ '<div class="cy-select-message">' 
+ '<h5>业务中心号码</h5><div class="form-group"><input type="text" class="form-control" id="windowSmsNum" name="pushMenu['+(n-1)+'].smsNum" /></div>' 
+ '<h5>反馈内容编码</h5><div class="form-group"><input type="text" class="form-control" id="windowSmsOrder" name="pushMenu['+(n-1)+'].smsOrder" /></div>' 
+ '</div>' 
+ '<div class="cy-select-url">' 
+ '<h5>URL地址</h5><div class="form-group"><input type="text" class="form-control" id="windowUrlPath" name="pushMenu['+(n-1)+'].url" /></div>' 
+ '</div>' 
+ '<div class="cy-second-confirm">' 
+ '<label class="form-checkbox form-normal form-primary"><input type="checkbox" class="cy-second-con" id="windowConfirm" name="pushMenu['+(n-1)+'].needConfirm"></label>' 
+ '<span class="cy-choose">已选</span>二次确认' 
+ '</div>'); 
oDiv.insertBefore($(".cy-btns")); 
$('.cy-config-select').selectpicker(); 
var cDiv = $('<div></div>'); 
cDiv.addClass("cy-content"); 
cDiv.html("请在此输入推送业务内容"); 
cDiv.css("borderbottom", "1px solid #000"); 
$(".cy-list").append(cDiv); 
/*新增列表后,新增元素加入到Validator中*/ 
$('#contentInfoForm').bootstrapValidator('addField', 'pushMenu['+(n-1)+'].text', { 
validators: { 
notEmpty: { 
message: '推送业务内容不能为空' 
} 
} 
}); 
$("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].smsNum',{ 
validators: { 
notEmpty: { 
message: '业务中心号码不能为空' 
} 
} 
}); 
$("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].smsOrder',{ 
validators: { 
notEmpty: { 
message: '反馈内容编码不能为空' 
} 
} 
}); 
$("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].url',{ 
validators: { 
notEmpty: { 
message: 'URL地址不能为空' 
} 
} 
}); 
});

初始化bootstrapValidator,可以看到在这并没有对第4行进行初始化

/*推送内容校验*/ 
$("#contentInfoForm").bootstrapValidator({ 
message : '该值无效', 
feedbackIcons : faIcon, 
//excluded : ':disabled', 
fields : { 
'pushMenu[0].text' : { 
message : '弹窗内容无效', 
validators : { 
notEmpty : { 
message : '弹窗内容不能为空' 
} 
} 
}, 
'pushMenu[0].url' : { 
message : 'URL无效', 
validators : { 
notEmpty : { 
message : 'URL不能为空' 
} 
} 
}, 
'pushMenu[0].smsNum' : { 
message : '业务中心号码无效', 
validators : { 
notEmpty : { 
message : '业务中心号码不能为空' 
} 
} 
}, 
'pushMenu[0].smsOrder' : { 
message : '反馈内容编码无效', 
validators : { 
notEmpty : { 
message : '反馈内容编码不能为空' 
} 
} 
}, 
'alphaID' : { 
message : '列表标题无效', 
validators : { 
notEmpty : { 
message : '列表标题不能为空' 
} 
} 
}, 
'pushMenu[1].text' : { 
message : '弹窗内容无效', 
validators : { 
notEmpty : { 
message : '弹窗内容不能为空' 
} 
} 
}, 
'pushMenu[1].url' : { 
message : 'URL无效', 
validators : { 
notEmpty : { 
message : 'URL不能为空' 
} 
} 
}, 
'pushMenu[1].smsNum' : { 
message : '业务中心号码无效', 
validators : { 
notEmpty : { 
message : '业务中心号码不能为空' 
} 
} 
}, 
'pushMenu[1].smsOrder' : { 
message : '反馈内容编码无效', 
validators : { 
notEmpty : { 
message : '反馈内容编码不能为空' 
} 
} 
}, 
'pushMenu[2].text' : { 
message : '弹窗内容无效', 
validators : { 
notEmpty : { 
message : '弹窗内容不能为空' 
} 
} 
}, 
'pushMenu[2].url' : { 
message : 'URL无效', 
validators : { 
notEmpty : { 
message : 'URL不能为空' 
} 
} 
}, 
'pushMenu[2].smsNum' : { 
message : '业务中心号码无效', 
validators : { 
notEmpty : { 
message : '业务中心号码不能为空' 
} 
} 
}, 
'pushMenu[2].smsOrder' : { 
message : '反馈内容编码无效', 
validators : { 
notEmpty : { 
message : '反馈内容编码不能为空' 
} 
} 
}, 
'pushMenu[3].text' : { 
message : '弹窗内容无效', 
validators : { 
notEmpty : { 
message : '弹窗内容不能为空' 
} 
} 
} 
} 
});

四、总结

addField(field,options)

addField方法的参数

field就是要动态添加校验规则表单元素的name,即例子中的 pushMenu['+(n-1)+'].text

options实际就是校验规则 即例子中的{
validators: {
notEmpty: {
message: '推送业务内容不能为空'
}
}
Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
使用JS读秒使用示例
Sep 21 Javascript
jQuery知识点整理
Jan 30 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 #Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 #Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 #Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 #Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 #Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 #Javascript
详解JavaScript权威指南之对象
Sep 27 #Javascript
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python实现通讯录功能
2018/02/22 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
幼儿园教学管理制度
2014/02/04 职场文书
安全协议书
2014/04/23 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
简历自荐信范文
2015/03/09 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
庭外和解协议书
2016/03/23 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技