使用bootstrapValidator插件進(jìn)行動(dòng)態(tài)添加表單元素并校驗(yàn)
更新時(shí)間：2016年09月28日 10:23:09 作者：弓長步又
動(dòng)態(tài)添加表單元素，并調(diào)用bootstrapValidator的方法為表單添加校驗(yàn)規(guī)則，調(diào)用addField()方法實(shí)現(xiàn)功能。下面通過本文看下具體實(shí)現(xiàn)方法吧
一、前言
實(shí)際工作中，要實(shí)現(xiàn)表單元素的動(dòng)態(tài)增加，并使用bootstrapValidator插件對(duì)動(dòng)態(tài)添加的表單元素進(jìn)行前臺(tái)校驗(yàn)。在以前的工作中也使用過bootstrapValidator對(duì)表單元素進(jìn)行校驗(yàn)，但涉及到的表單元素都是固定的，所以在頁面載入時(shí)，對(duì)表單元素進(jìn)行初始化就可以實(shí)現(xiàn)。雖然思路很明確，但由于對(duì)bootstrapValidator的用法不熟悉，在這個(gè)問題上還是浪費(fèi)了很多時(shí)間，現(xiàn)在就把解決方法和功能效果圖貼出來，希望對(duì)大家有所幫助。
思路：動(dòng)態(tài)添加表單元素，并調(diào)用bootstrapValidator的方法為表單添加校驗(yàn)規(guī)則，調(diào)用addField()方法實(shí)現(xiàn)功能
在網(wǎng)上找了好久才找到相關(guān)方法 ，可以去看下：http://formvalidation.io/api/#add-field，這里直接給出相關(guān)內(nèi)容的截圖，說實(shí)話我是沒看太明白。。。后來又浪費(fèi)好多時(shí)間去試驗(yàn)怎么使用。
在絕望之際偶然看到有這種用法，就試驗(yàn)了下，果然成功了
二、功能圖
此圖是頁面初始化時(shí)的效果，表單元素是固定的，并且校驗(yàn)也是加在ready方法中的，稍后貼代碼
下圖是點(diǎn)擊添加按鈕，動(dòng)態(tài)添加表單元素，并對(duì)元素添加校驗(yàn)規(guī)則的效果
三、代碼
點(diǎn)擊添加按鈕時(shí)，實(shí)現(xiàn)添加元素，并對(duì)元素進(jìn)行校驗(yàn)
// 列表-新增按鈕
$("#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="請(qǐng)?jiān)诖溯斎胛淖謨?nèi)容" 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">默認(rèn)反饋操作</option><option value="02">應(yīng)用下載配置</option><option value="02a">網(wǎng)址訪問配置</option><option value="03">短信訂購配置</option>'
+ '</select>'
+ '<div class="cy-select-message">'
+ '<h5>業(yè)務(wù)中心號(hào)碼</h5><div class="form-group"><input type="text" class="form-control" id="windowSmsNum" name="pushMenu['+(n-1)+'].smsNum" /></div>'
+ '<h5>反饋內(nèi)容編碼</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>二次確認(rèn)'
+ '</div>');
oDiv.insertBefore($(".cy-btns"));
$('.cy-config-select').selectpicker();
var cDiv = $('<div></div>');
cDiv.addClass("cy-content");
cDiv.html("請(qǐng)?jiān)诖溯斎胪扑蜆I(yè)務(wù)內(nèi)容");
cDiv.css("borderbottom", "1px solid #000");
$(".cy-list").append(cDiv);
/*新增列表后，新增元素加入到Validator中*/
$('#contentInfoForm').bootstrapValidator('addField', 'pushMenu['+(n-1)+'].text', {
validators: {
notEmpty: {
message: '推送業(yè)務(wù)內(nèi)容不能為空'
}
}
});
$("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].smsNum',{
validators: {
notEmpty: {
message: '業(yè)務(wù)中心號(hào)碼不能為空'
}
}
});
$("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].smsOrder',{
validators: {
notEmpty: {
message: '反饋內(nèi)容編碼不能為空'
}
}
});
$("#contentInfoForm").data('bootstrapValidator').addField('pushMenu['+(n-1)+'].url',{
validators: {
notEmpty: {
message: 'URL地址不能為空'
}
}
});
});
初始化bootstrapValidator，可以看到在這并沒有對(duì)第4行進(jìn)行初始化
/*推送內(nèi)容校驗(yàn)*/
$("#contentInfoForm").bootstrapValidator({
message : '該值無效',
feedbackIcons : faIcon,
//excluded : ':disabled',
fields : {
'pushMenu[0].text' : {
message : '彈窗內(nèi)容無效',
validators : {
notEmpty : {
message : '彈窗內(nèi)容不能為空'
}
}
},
'pushMenu[0].url' : {
message : 'URL無效',
validators : {
notEmpty : {
message : 'URL不能為空'
}
}
},
'pushMenu[0].smsNum' : {
message : '業(yè)務(wù)中心號(hào)碼無效',
validators : {
notEmpty : {
message : '業(yè)務(wù)中心號(hào)碼不能為空'
}
}
},
'pushMenu[0].smsOrder' : {
message : '反饋內(nèi)容編碼無效',
validators : {
notEmpty : {
message : '反饋內(nèi)容編碼不能為空'
}
}
},
'alphaID' : {
message : '列表標(biāo)題無效',
validators : {
notEmpty : {
message : '列表標(biāo)題不能為空'
}
}
},
'pushMenu[1].text' : {
message : '彈窗內(nèi)容無效',
validators : {
notEmpty : {
message : '彈窗內(nèi)容不能為空'
}
}
},
'pushMenu[1].url' : {
message : 'URL無效',
validators : {
notEmpty : {
message : 'URL不能為空'
}
}
},
'pushMenu[1].smsNum' : {
message : '業(yè)務(wù)中心號(hào)碼無效',
validators : {
notEmpty : {
message : '業(yè)務(wù)中心號(hào)碼不能為空'
}
}
},
'pushMenu[1].smsOrder' : {
message : '反饋內(nèi)容編碼無效',
validators : {
notEmpty : {
message : '反饋內(nèi)容編碼不能為空'
}
}
},
'pushMenu[2].text' : {
message : '彈窗內(nèi)容無效',
validators : {
notEmpty : {
message : '彈窗內(nèi)容不能為空'
}
}
},
'pushMenu[2].url' : {
message : 'URL無效',
validators : {
notEmpty : {
message : 'URL不能為空'
}
}
},
'pushMenu[2].smsNum' : {
message : '業(yè)務(wù)中心號(hào)碼無效',
validators : {
notEmpty : {
message : '業(yè)務(wù)中心號(hào)碼不能為空'
}
}
},
'pushMenu[2].smsOrder' : {
message : '反饋內(nèi)容編碼無效',
validators : {
notEmpty : {
message : '反饋內(nèi)容編碼不能為空'
}
}
},
'pushMenu[3].text' : {
message : '彈窗內(nèi)容無效',
validators : {
notEmpty : {
message : '彈窗內(nèi)容不能為空'
}
}
}
}
});
四、總結(jié)
addField(field,options)
addField方法的參數(shù)
field就是要?jiǎng)討B(tài)添加校驗(yàn)規(guī)則表單元素的name，即例子中的 pushMenu['+(n-1)+'].text
options實(shí)際就是校驗(yàn)規(guī)則 即例子中的{
validators: {
notEmpty: {
message: '推送業(yè)務(wù)內(nèi)容不能為空'
}
}
您可能感興趣的文章:
- bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無法正常觸發(fā)校驗(yàn)的解決思路
- BootStrap Validator使用注意事項(xiàng)(必看篇)
- 使用BootStrapValidator完成前端輸入驗(yàn)證
- 使用bootstrap validator的remote驗(yàn)證代碼經(jīng)驗(yàn)分享(推薦)
- BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）
- BootStrapValidator初使用教程詳解
相關(guān)文章
這篇文章主要介紹了window.open()的使用及瀏覽器兼容性問題方面的知識(shí)，感興趣的朋友可以參考下2014-05-05
js防抖函數(shù)和節(jié)流函數(shù)使用場景和實(shí)現(xiàn)區(qū)別示例分析
這篇文章主要介紹了js防抖函數(shù)和節(jié)流函數(shù)使用場景和實(shí)現(xiàn)區(qū)別,結(jié)合實(shí)例形式詳細(xì)分析了js防抖函數(shù)和節(jié)流函數(shù)基本功能、定義、用法區(qū)別及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
javascript 中String.match()與RegExp.exec()的區(qū)別說明
最近看了javascript權(quán)威指南 里面的正則部分，match和exec方法有一些相同點(diǎn)和不同點(diǎn)，在這里寫一下加深一下印象2013-01-01
在javascript中，replace方法是屬于String對(duì)象的，可用于替換字符串。今天我們就來詳細(xì)探討下一些replace()方法的使用2015-09-09
JavaScript中iframe實(shí)現(xiàn)局部刷新的幾種方法匯總
Iframe是一種嵌入網(wǎng)頁的框架形式，Web頁面可以通過更改嵌入的部分，達(dá)到部分內(nèi)容刷新，通過本文和大家一起學(xué)習(xí)iframe實(shí)現(xiàn)局部刷新的幾種方法匯總，對(duì)iframe局部刷新相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JSON是一種數(shù)據(jù)格式，在實(shí)際開發(fā)中，JSON總是以配置文件的形式出現(xiàn)。小程序項(xiàng)目中也不例外:通過不同的Json配置文件，可以對(duì)小程序項(xiàng)目進(jìn)行不同級(jí)別的配置2022-10-10
Javascript的數(shù)組與字典用法與遍歷對(duì)象的技巧
Javascript 的數(shù)組Array,既是一個(gè)數(shù)組，也是一個(gè)字典(Dictionary)。先舉例看看數(shù)組的用法2012-11-11
JavaScript實(shí)現(xiàn)合并(歸并)排序算法示例解析
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)合并(歸并)排序算法示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
詳談構(gòu)造函數(shù)加括號(hào)與不加括號(hào)的區(qū)別
下面小編就為大家?guī)硪黄斦剺?gòu)造函數(shù)加括號(hào)與不加括號(hào)的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
前端實(shí)現(xiàn)多個(gè)內(nèi)容滑動(dòng)輪播圖效果實(shí)例
在前端開發(fā)中,滑動(dòng)輪播圖是一種常見的交互元素,用于展示多張圖片或內(nèi)容,這篇文章主要介紹了前端實(shí)現(xiàn)多個(gè)內(nèi)容滑動(dòng)輪播圖效果的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-04-04