Bootstrap 表單驗證formValidation 實現(xiàn)表單動態(tài)驗證功能
動態(tài)添加input并動態(tài)添加新驗證方式！
init狀態(tài)：
點擊“+”后：
驗證后：
知識點：
1 先去官網(wǎng)下載：http://formvalidation.io/
2 導(dǎo)入文件，注意事項我就不多說了在遠程驗證那篇我已經(jīng)講過。
3 用到的關(guān)鍵字：addField、removeField、different
4注意一點就是官網(wǎng)里的例子他們的name是不一樣的。我這里比較偷懶。且項目ajax的時候不是用的form表單提交，而是自己并接成json提交，所以x，y的name的名字一樣。
好開始：
首先是在html里面必須要有一個 “+” 標(biāo)記為addPos，然后有一個“-” 標(biāo)記為“removPos，
<div id="posXY" class=" panel panel-default ">
<!-- 添加-->
<div class="panel-heading" >設(shè)置車庫xy坐標(biāo)</div>
<div class="addPos form-group">
<div class="col-lg-4 col-sm-4 col-xs-4" >
<input type="text" class="form-control text-left" name="garageNo" placeholder="停車庫" style="min-width: 150px"/>
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</div>
<div class="col-lg-2 col-sm-2 col-xs-2" >
<button type="button" class="btn btn-default addButtonPos"><i class="glyphicon glyphicon-plus"></i></button>
</div>
</div>
<!-- 刪除 -->
<div class="removPos form-group hide" id="posTemplate">
<div class="col-lg-4 col-sm-4 col-xs-4" >
<input type="text" class="form-control text-left" name="garageNo" placeholder="停車庫" style="min-width: 150px"/>
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</div>
<div class="col-lg-2 col-sm-2 col-xs-2" >
<button type="button" class="btn btn-default removeButtonPos"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
</div>
然后來個js：
/**
* pos添加
* @param $that
*/
function addButtonPosClick($that){
var panelId = $that.parents(".topTemplate").attr("id");
var $form=$('#'+panelId+"form")
// defaultPanel(panelId)
var bookIndex=typeObj[panelId]++;
console.log(panelId,bookIndex)
var $template = $('#'+panelId+' #posTemplate'),
$clone =$template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('step',bookIndex)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="garageNo"]').attr({"step":bookIndex,"name":"garageNo"+bookIndex})
.click(function(){
clickBindGarageNo(panelId,bookIndex)
}).end()
.find('[name="posX"]').attr("step",bookIndex).end()
.find('[name="posY"]').attr("step",bookIndex).end()
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
// $('#defaultForm')
// gFieldArr.push(panelId+'[' + bookIndex + '].garageNo')
$form
.formValidation('addField', "garageNo"+bookIndex, formObj.sameAs(false))
.formValidation('addField', 'posX', myPosXY)
.formValidation('addField', 'posY', myPosXY)
}
function myFormValidation($form){
// var $form=$("#"+$panelId+"form")
$form
.formValidation({
framework: 'bootstrap',
locale: 'zh_CN',
message: '值無效',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
myimg:{
validators: {
notEmpty: {
message: '請選擇一個文件上傳'
},
file: {
extension: 'jpeg,jpg,png',
type: 'image/jpeg,image/png',
maxSize: 1*1024 * 1024,
message: '該文件必須為jpeg,jpg,png格式和必須不超過1MB的大小'
}
}
}
}
})
.on('click', '.addButtonPos', function() {
addButtonPosClick($(this))
})
//Remove button click handler
.on('click', '.removeButtonPos', function() {
var $that = $(this)
var panelId = $that.parents(".topTemplate").attr("id");
// defaultPanel(panelId)
var $row = $(this).parents('.form-group'),
index = $row.attr('step');
// var myname='[' +index + ']'
var bookIndex= typeObj[panelId]--;
// $('#defaultForm')
$form
.formValidation('removeField', $row.find('[name="garageNo'+bookIndex+'"]'))
.formValidation('removeField', $row.find('[name="posX"]'))
.formValidation('removeField', $row.find('[name="posY"]'))
// Remove element containing the fields
$row.remove();
})
因為我的項目有多個表單提交。但是業(yè)務(wù)相似所以都用這幾個函數(shù)
比如說： var form=(“#”+panelId+”form”)用panelId來區(qū)分是多個表單。
上面說到x，y的name用的是一樣的。但是細心的就會發(fā)現(xiàn)garageNo是不一樣的名稱。后面添加了bookindex，為什么呢。
因為業(yè)務(wù)需求。同一個表單中的garageNo的值不可以相同。好比如說每一個人的身份號不可以相同但是你和你同桌都可以是女的也都可以18歲。。。。
上面已經(jīng)很好的使用了關(guān)鍵字removeField和addField
garageNo的值不可以相同。怎么弄呢。請看下面：
var differentValid= function(diffstr){
var vv={
validators: {
different: {
field: diffstr,
message: '不能有相同的停車庫'
}
}
}
return vv
}
當(dāng)用戶輸入garageNo的值后：
clickBindGarageNo(panelId,idx){
$form.formValidation('addField', "garageNo"+idx, differentValid(diffArr.toString()))
var fv =$form.data('formValidation');
fv.validate();
}
這個diffArr.toString()，是啥呢。這個是我遍歷了所有條目的garageNo的name的字符串例如：有3條條目，idx=1 焦點在1上。那么diffArr=[“garageNo0”,”garageNo2”,]
注意一個bug：如果用多了input，你會發(fā)現(xiàn)有時input不會自動驗證。比如說驗證日期的時候用了日期插件點擊日期回來后input沒有驗證。
這個時候就需要再手動驗證一次。 上面那段代碼是 先添加新的驗證方式，然后驗證整個表單。如果你只是想要驗證一個input 請用：
$form.formValidation('revalidateField', "field");
還有一個關(guān)于提交的細節(jié)：
當(dāng)我們沒有設(shè)置提交按鈕。比起提交按鈕在form表單內(nèi)。他這個插件是會幫你自動提交。但是你也會發(fā)現(xiàn)。如果你提交服務(wù)失敗。他會自動刷新然后你的頁面就變成404頁面或其他錯誤頁面。
但是有的時候我們不想他刷新。咋辦？
網(wǎng)上好多ajax 提交不刷新的教程。。我比較喜歡用一種就是。我不把提交按鈕放在form里面。然后：
$btn.click(function(){
//....
retrun false;
)}
以上所述是小編給大家介紹的Bootstrap 表單驗證formValidation 實現(xiàn)表單動態(tài)驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要是對js上下左右鍵控制焦點的示例代碼進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了微信小程序自定義模態(tài)彈窗組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
原生JavaScript實現(xiàn)滑動拖動驗證的示例代碼
這篇文章主要介紹了原生JavaScript實現(xiàn)滑動拖動驗證的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Android 自定義view仿微信相機單擊拍照長按錄視頻按鈕
這篇文章主要介紹了Android 自定義view仿微信相機單擊拍照長按錄視頻按鈕，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
下面小編就為大家?guī)硪黄猨s彈出窗口返回值的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
在本文里小編給各位分享的是關(guān)于js中switch語句的使用方法及學(xué)習(xí)筆記內(nèi)容，有興趣的朋友們可以參考下。2020-03-03
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)JS上傳圖片預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了使用javascript實現(xiàn)數(shù)據(jù)格式化為字符串，非常的實用，這里推薦給有相同需求的小伙伴。2014-12-12
javascript使用substring實現(xiàn)的展開與收縮文字功能示例
這篇文章主要介紹了javascript使用substring實現(xiàn)的展開與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JavaScript SHA512&SHA256加密算法詳解
本文給大家分享的是javascript版的SHA512&SHA256加密算法的代碼，以及用法，有需要的小伙伴可以參考下。2015-08-08