使用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 相关文章推荐
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
详解Node中导入模块require和import的区别
Aug 11 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
js操作二进制数据方法
Mar 03 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
vue点击当前路由高亮小案例
Sep 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
介绍一下Java的事务处理
2012/12/07 面试题
销售找工作求职信
2013/12/20 职场文书
求职信模板怎么做
2014/01/26 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
小学一年级评语大全
2014/04/22 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Elasticsearch 批量操作
2022/04/19 Python