使用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类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
带你快速理解javascript中的事件模型
Aug 14 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延迟静态绑定示例分享
2014/06/22 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
javascript 节点遍历函数
2010/03/28 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python之list对应元素求和的方法
2018/06/28 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python图片的横坐标汉字实例
2019/12/04 Python
pymysql模块的操作实例
2019/12/17 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python callable内置函数原理解析
2020/03/05 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
经济学人订阅:The Economist
2018/07/19 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
业务主管岗位职责
2013/11/20 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
北京奥运会主题口号
2014/06/13 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
仓库管理制度范本
2015/08/04 职场文书
厉行节约工作总结
2015/08/12 职场文书
导游词之日月潭
2019/11/05 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android