使用bootstrapValidator插件进行动态添加表单元素并校验
一、前言实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验。在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现。虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助。 思路:动态添加表单元素,并调用bootstrapValidator的方法为表单添加校验规则,调用addField()方法实现功能 在网上找了好久才找到相关方法 ,可以去看下:http://formvalidation.io/api/#add-field,这里直接给出相关内容的截图,说实话我是没看太明白。。。后来又浪费好多时间去试验怎么使用。 在绝望之际偶然看到有这种用法,就试验了下,果然成功了 二、功能图此图是页面初始化时的效果,表单元素是固定的,并且校验也是加在ready方法中的,稍后贴代码 下图是点击添加按钮,动态添加表单元素,并对元素添加校验规则的效果 三、代码点击添加按钮时,实现添加元素,并对元素进行校验 '); oDiv.addClass("cy-list-content"); oDiv.html('第' + n + '行' +''
+' '
+ ''
+ ''
+ '反馈内容编码' + '' + 'URL地址 '
+ ''
+ ''
+ '二次确认'
+ ' ');
oDiv.insertBefore($(".cy-btns"));
$('.cy-config-select').selectpicker();
var cDiv = $('');
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行进行初始化 四、总结addField(field,options) addField方法的参数 field就是要动态添加校验规则表单元素的name,即例子中的 pushMenu['+(n-1)+'].text (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! ' + ' |