使用bootstrapValidator插件进行动态添加表单元素并校验
一、前言
实际工作中，要实现表单元素的动态增加 ，并使用bootstrapValidator插件 对动态添加 的表单元素进行前台 校验。在以前的工作中也使用过bootstrapValidator对表单元素进行校验，但涉及到的表单元素都是固定的，所以在页面 载入时，对表单元素进行初始化就可以实现。虽然思路很明确，但由于对bootstrapValidator的用法 不熟悉，在这 个问题上还是浪费了很多时间，现在就把解决方法 和功能 效果 图贴出来，希望对大家有所帮助。
思路：动态添加 表单元素，并调用 bootstrapValidator的方法 为表单添加 校验规则，调用 addField()方法 实现功能
在网上找了好久才找到相关方法 ，可以去看下：http://formvalidation.io/api/#add-field，这里直接给出相关内容 的截图，说实话我是没看太明白。。。后来又浪费好多时间去试验怎么使用。
在绝望之际偶然看到有这种用法 ，就试验了下，果然成功了
此图是页面 初始化时的效果 ，表单元素是固定的，并且校验也是加在ready方法 中的，稍后贴代码
下图是点击添加 按钮，动态添加 表单元素，并对元素添加 校验规则的效果
点击添加 按钮时，实现添加 元素，并对元素进行校验
rush:js;">
// 列表-新增按钮
$("#menuAdd").click(function(){
var n=$(".cy-list-content").length+1;
var oDiv=$('
');
oDiv.addClass("cy-list-content");
oDiv.html('
第' + n + '行 '
+''
+ '
fig">交互配置 '
+ '
fig-select selectpicker" name="pushMenu['+(n-1)+'].menuType">'
+ '无 默认反馈操作 '
+ ' '
+ '
'
+ '
'
+ '
'
+ '
'
+ '
'
+ '
Box form-
nor mal form-primary">
Box" class="cy-second-con" id="windowConfirm" name="pushMenu['+(n-1)+'].needConfirm">'
+ '
二次确认'
+ ' ');
oDiv.insertBefore($(".cy-btns"));
$('.cy-con
fig -select').selectpicker();
var cDiv = $('
');
cDiv.addClass("cy-content");
cDiv.html("请在此输入推送业务
内容 ");
cDiv.css("borderb
ott om","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地址 不能为空'
}
}
});
});
rush:js;">
/*推送
内容 校验*/
$("#contentInfoForm").bootstrapValidator({
message : '该值无效',
Feed backIcons : faIcon,//excluded : ':
dis abled',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 : '弹窗
内容 无效','pushMenu[1].url' : {
message : 'URL无效','pushMenu[1].smsNum' : {
message : '业务中心号码无效','pushMenu[1].smsOrder' : {
message : '反馈
内容 编码无效','pushMenu[2].text' : {
message : '弹窗
内容 无效','pushMenu[2].url' : {
message : 'URL无效','pushMenu[2].smsNum' : {
message : '业务中心号码无效','pushMenu[2].smsOrder' : {
message : '反馈
内容 编码无效','pushMenu[3].text' : {
message : '弹窗
内容 无效',validators : {
notEmpty : {
message : '弹窗
内容 不能为空'
}
}
}
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
