這篇文章主要介紹了Bootstrap 表單驗證formValidation 實作表單動態驗證功能,需要的朋友可以參考下Bootstrap教程
##動態新增input並動態新增驗證方式！ init狀態： 
知識點：
#1 先到官網下載：formvalidation.io/ 2 導入文件，注意事項我就不多說了在遠端驗證那篇我已經講過。 3 用到的關鍵字：addField、removeField、different4注意一點就是官網裡的例子他們的name是不一樣的。我這裡比較偷懶。而專案ajax的時候不是用的form表單提交，而是自己並接成json提交，所以x，y的name的名字一樣。 好開始：首先是在html裡面必須要有一個「+」 標記為addPos，然後有一個「-」 標記為「removPos，
<p id="posXY" class=" panel panel-default ">
<!-- 添加-->
<p class="panel-heading" >设置车库xy坐标</p>
<p class="addPos form-group">
<p 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"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</p>
<p 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>
</p>
</p>
<!-- 删除 -->
<p class="removPos form-group hide" id="posTemplate">
<p 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"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</p>
<p 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>
</p>
</p>
</p>/**
* 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();
})用panelId來區分是多個表單。 。同桌都可以是女的也都可以18歲。怎麼弄呢。的name的
字串例如：有3個條目，idx=1 焦點在1上。 #注意一個bug：如果用多了input，你會發現有時input不會自動驗證。就需要再手動驗證一次。
Nodejs中常用中間件body-parser的實例詳解
#3.
JavaScript表單驗證實作程式碼_javascript技巧
單行JS 實作行動端金錢格式檢定
#5.以上是Bootstrap 表單驗證formValidation 的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
