Bootstrap 表單驗證formValidation 實現(xiàn)表單動態(tài)驗證功能
動態(tài)添加input并動態(tài)添加新驗證方式！
init狀態(tài)：
點擊“+”后：
驗證后：
知識點：
1 先去官網(wǎng)下載：http://formvalidation.io/
2 導入文件，注意事項我就不多說了在遠程驗證那篇我已經(jīng)講過。
3 用到的關鍵字：addField、removeField、different
4注意一點就是官網(wǎng)里的例子他們的name是不一樣的。我這里比較偷懶。且項目ajax的時候不是用的form表單提交，而是自己并接成json提交，所以x，y的name的名字一樣。
好開始：
首先是在html里面必須要有一個 “+” 標記為addPos，然后有一個“-” 標記為“removPos，
<div id="posXY" class=" panel panel-default ">
<!-- 添加-->
<div class="panel-heading" >設置車庫xy坐標</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è)務相似所以都用這幾個函數(shù)
比如說： var form=(“#”+panelId+”form”)用panelId來區(qū)分是多個表單。
上面說到x，y的name用的是一樣的。但是細心的就會發(fā)現(xiàn)garageNo是不一樣的名稱。后面添加了bookindex，為什么呢。
因為業(yè)務需求。同一個表單中的garageNo的值不可以相同。好比如說每一個人的身份號不可以相同但是你和你同桌都可以是女的也都可以18歲。。。。
上面已經(jīng)很好的使用了關鍵字removeField和addField
garageNo的值不可以相同。怎么弄呢。請看下面：
var differentValid= function(diffstr){
var vv={
validators: {
different: {
field: diffstr,
message: '不能有相同的停車庫'
}
}
}
return vv
}
當用戶輸入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");
還有一個關于提交的細節(jié)：
當我們沒有設置提交按鈕。比起提交按鈕在form表單內(nèi)。他這個插件是會幫你自動提交。但是你也會發(fā)現(xiàn)。如果你提交服務失敗。他會自動刷新然后你的頁面就變成404頁面或其他錯誤頁面。
但是有的時候我們不想他刷新。咋辦？
網(wǎng)上好多ajax 提交不刷新的教程。。我比較喜歡用一種就是。我不把提交按鈕放在form里面。然后：
$btn.click(function(){
//....
retrun false;
)}
以上所述是小編給大家介紹的Bootstrap 表單驗證formValidation 實現(xiàn)表單動態(tài)驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Javascript 面象對象成員、共享成員變量實驗，需要的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS的執(zhí)行機制(EventLoop、宏任務和微任務)
這篇文章主要介紹了JS的執(zhí)行機制(EventLoop、宏任務和微任務)，具有很好的參考價值，希望對大家有所幫助。2023-01-01
TypeScript是Microsoft（微軟）開發(fā)的一種開源編程語言，它充分利用了JavaScript原有的對象模型，并在此基礎上進行了擴充，TypeScript設計目標是開發(fā)大型應用，它可以編譯成純JavaScript，編譯出來的JavaScript可以運行在任何一種JS運行環(huán)境中2022-12-12
JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法的具體區(qū)別詳
在JavaScript中數(shù)組是一種非常常見且功能強大的數(shù)據(jù)結構,這篇文章主要介紹了JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法具體區(qū)別的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
JavaScript代碼實現(xiàn)春晚劉謙魔術的模擬程序
昨晚春晚上劉謙的兩個魔術表演都非常精彩,尤其是第二個魔術,他演繹了經(jīng)典的約瑟夫環(huán)問題！約瑟夫環(huán)是一個經(jīng)典的數(shù)學問題,本文給出了完整的 JavaScript 代碼實現(xiàn),感興趣的同學可以自己動手實現(xiàn)一下2024-02-02
這篇文章主要介紹了JS數(shù)組方法join()用法,結合實例形式分析了JS數(shù)組join()方法具體功能、定義、使用方法及相關操作注意事項,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了qrcode插件的使用方法,包括ES6/ES7示例、常用API及Vue示例,同時還討論了二維碼的優(yōu)點和缺點,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)簡易計算器小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript實現(xiàn)將毫秒數(shù)轉換為易讀時長格式
在許多開發(fā)場景中,我們通常需要將后端接口返回的毫秒數(shù)轉換成更易讀的時長格式,本文將封裝一個簡潔的 JavaScript 函數(shù)實現(xiàn)這一功能,需要的可以了解下2025-02-02