使用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 相关文章推荐
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
vue.js学习之递归组件
Dec 13 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Vue.js用法详解
Nov 13 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
删除javascript所创建子节点的方法
2015/05/21 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
深入理解Python3 内置函数大全
2017/11/23 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python删除不需要的python文件方法
2018/04/24 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
社区安全检查制度
2014/02/03 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
2022年四月新番
2022/03/15 日漫