欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動態(tài)驗(yàn)證功能

 更新時(shí)間：2017年05月17日 16:15:49   作者：北冥沒有魚  
這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動態(tài)驗(yàn)證功能,需要的朋友可以參考下

動態(tài)添加input并動態(tài)添加新驗(yàn)證方式！

init狀態(tài)：

這里寫圖片描述 

點(diǎn)擊“+”后：

這里寫圖片描述 

驗(yàn)證后：

這里寫圖片描述

知識點(diǎn)：

1 先去官網(wǎng)下載：http://formvalidation.io/

2 導(dǎo)入文件，注意事項(xiàng)我就不多說了在遠(yuǎn)程驗(yàn)證那篇我已經(jīng)講過。

3 用到的關(guān)鍵字：addField、removeField、different

4注意一點(diǎn)就是官網(wǎng)里的例子他們的name是不一樣的。我這里比較偷懶。且項(xiàng)目ajax的時(shí)候不是用的form表單提交，而是自己并接成json提交，所以x，y的name的名字一樣。

好開始：

首先是在html里面必須要有一個(gè) “+” 標(biāo)記為addPos，然后有一個(gè)“-” 標(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>

然后來個(gè)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: '請選擇一個(gè)文件上傳'
                },
                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àn)槲业捻?xiàng)目有多個(gè)表單提交。但是業(yè)務(wù)相似所以都用這幾個(gè)函數(shù)

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

上面說到x，y的name用的是一樣的。但是細(xì)心的就會發(fā)現(xiàn)garageNo是不一樣的名稱。后面添加了bookindex，為什么呢。

因?yàn)闃I(yè)務(wù)需求。同一個(gè)表單中的garageNo的值不可以相同。好比如說每一個(gè)人的身份號不可以相同但是你和你同桌都可以是女的也都可以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();
}

這個(gè)diffArr.toString()，是啥呢。這個(gè)是我遍歷了所有條目的garageNo的name的字符串例如：有3條條目，idx=1 焦點(diǎn)在1上。那么diffArr=[“garageNo0”,”garageNo2”,]

這里寫圖片描述 

注意一個(gè)bug：如果用多了input，你會發(fā)現(xiàn)有時(shí)input不會自動驗(yàn)證。比如說驗(yàn)證日期的時(shí)候用了日期插件點(diǎn)擊日期回來后input沒有驗(yàn)證。

這個(gè)時(shí)候就需要再手動驗(yàn)證一次。 上面那段代碼是 先添加新的驗(yàn)證方式，然后驗(yàn)證整個(gè)表單。如果你只是想要驗(yàn)證一個(gè)input 請用：

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

還有一個(gè)關(guān)于提交的細(xì)節(jié)：

當(dāng)我們沒有設(shè)置提交按鈕。比起提交按鈕在form表單內(nèi)。他這個(gè)插件是會幫你自動提交。但是你也會發(fā)現(xiàn)。如果你提交服務(wù)失敗。他會自動刷新然后你的頁面就變成404頁面或其他錯(cuò)誤頁面。

但是有的時(shí)候我們不想他刷新。咋辦？

網(wǎng)上好多ajax 提交不刷新的教程。。我比較喜歡用一種就是。我不把提交按鈕放在form里面。然后：

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

以上所述是小編給大家介紹的Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動態(tài)驗(yàn)證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論