Bootstrap 表單驗證formValidation 實現表單動態驗證功能，validation表單驗證

Bootstrap 表單驗證formValidation 實現表單動態驗證功能，validation表單驗證

動態添加input並動態添加新驗證方式！

init狀態：

 

點擊“+”後：

 

驗證後：

知識點：

1 先去官網下載：http://formvalidation.io/

2 匯入檔案，注意事項我就不多說了在遠程驗證那篇我已經講過。

3 用到的關鍵字：addField、removeField、different

4注意一點就是官網裡的例子他們的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();        })

因為我的項目有多個表單提交。但是業務相似所以都用這幾個函數

比如說： var form=(“#”+panelId+”form”)用panelId來區分是多個表單。

上面說到x，y的name用的是一樣的。但是細心的就會發現garageNo是不一樣的名稱。後面添加了bookindex，為什麼呢。

因為業務需求。同一個表單中的garageNo的值不可以相同。好比如說每一個人的身份號不可以相同但是你和你同桌都可以是女的也都可以18歲。。。。

上面已經很好的使用了關鍵字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，你會發現有時input不會自動驗證。比如說驗證日期的時候用了日期外掛程式點擊日期回來後input沒有驗證。

這個時候就需要再手動驗證一次。 上面那段代碼是 先添加新的驗證方式，然後驗證整個表單。如果你只是想要驗證一個input 請用：

$form.formValidation('revalidateField', "field");

還有一個關於提交的細節：

當我們沒有設定提交按鈕。比起提交按鈕在form表單內。他這個外掛程式是會幫你自動認可。但是你也會發現。如果你提交服務失敗。他會自動重新整理然後你的頁面就變成404頁面或其他錯誤頁面。

但是有的時候我們不想他重新整理。咋辦？

網上好多ajax 提交不重新整理的教程。。我比較喜歡用一種就是。我不把提交按鈕放在form裡面。然後：

$btn.click(function(){//....retrun false;)}

以上所述是小編給大家介紹的Bootstrap 表單驗證formValidation 實現表單動態驗證功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！