Bootstrap フォーム検証の詳細な例-jsチュートリアル-php.cn

Bootstrap フォーム検証の詳細な例

PHPz

リリース： 2018-10-16 16:53:03

オリジナル

7800 人が閲覧しました

この記事では、フォームの動的検証機能を実現するための Bootstrap フォーム検証 formValidation を主に紹介します。必要な方は、Bootstrap チュートリアルを参照してください

入力を動的に追加し、新しい検証メソッドを動的に追加します。

初期ステータス:

Bootstrap フォーム検証の詳細な例

「+」をクリック後:

Bootstrap フォーム検証の詳細な例

検証後:

Bootstrap フォーム検証の詳細な例

知識ポイント:

1 公式ウェブサイトにアクセスしてダウンロード: フォーム検証 .io /

2. ファイルをインポートします。注意事項については、リモート検証の記事で既に説明したので説明しません。

3 使用するキーワード: addField、removeField、differ

4 公式 Web サイトのサンプルの名前が異なることに注意してください。ここでは少し怠け者です。また、プロジェクトが ajax 化されている場合、フォームは送信に使用されず、それ自体が json として送信されるため、x と y の名前は同じになります。

良いスタート:

まず、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>

ログイン後にコピー

それから js が来ます:

/**
   * pos添加
   * @param $that
   */
  function addButtonPosClick($that){
    var panelId = $that.parents(".topTemplate").attr("id");
    var $form=$(&#39;#&#39;+panelId+"form")
//    defaultPanel(panelId)
    var bookIndex=typeObj[panelId]++;
    console.log(panelId,bookIndex)
    var $template = $(&#39;#&#39;+panelId+&#39; #posTemplate&#39;),
      $clone =$template
        .clone()
        .removeClass(&#39;hide&#39;)
        .removeAttr(&#39;id&#39;)
        .attr(&#39;step&#39;,bookIndex)
        .insertBefore($template);
    // Update the name attributes
    $clone
      .find(&#39;[name="garageNo"]&#39;).attr({"step":bookIndex,"name":"garageNo"+bookIndex})
      .click(function(){
        clickBindGarageNo(panelId,bookIndex)
      }).end()
      .find(&#39;[name="posX"]&#39;).attr("step",bookIndex).end()
      .find(&#39;[name="posY"]&#39;).attr("step",bookIndex).end()
    // Add new fields
    // Note that we also pass the validator rules for new field as the third parameter
//    $(&#39;#defaultForm&#39;)
//    gFieldArr.push(panelId+&#39;[&#39; + bookIndex + &#39;].garageNo&#39;)
    $form
      .formValidation(&#39;addField&#39;, "garageNo"+bookIndex, formObj.sameAs(false))
      .formValidation(&#39;addField&#39;, &#39;posX&#39;, myPosXY)
      .formValidation(&#39;addField&#39;, &#39;posY&#39;, myPosXY)
  }
 function myFormValidation($form){
//    var $form=$("#"+$panelId+"form")
    $form
        .formValidation({
          framework: &#39;bootstrap&#39;,
          locale: &#39;zh_CN&#39;,
          message: &#39;值无效&#39;,
          icon: {
            valid: &#39;glyphicon glyphicon-ok&#39;,
            invalid: &#39;glyphicon glyphicon-remove&#39;,
            validating: &#39;glyphicon glyphicon-refresh&#39;
          },
          fields:
          {
            myimg:{
              validators: {
                notEmpty: {
                  message: &#39;请选择一个文件上传&#39;
                },
                file: {
                  extension: &#39;jpeg,jpg,png&#39;,
                  type: &#39;image/jpeg,image/png&#39;,
                  maxSize: 1*1024 * 1024,
                  message: &#39;该文件必须为jpeg,jpg,png格式和必须不超过1MB的大小&#39;
                }
              }
            }
          }
        })
        .on(&#39;click&#39;, &#39;.addButtonPos&#39;, function() {
          addButtonPosClick($(this))
        })
        //Remove button click handler
        .on(&#39;click&#39;, &#39;.removeButtonPos&#39;, function() {
          var $that   = $(this)
          var panelId = $that.parents(".topTemplate").attr("id");
//           defaultPanel(panelId)
          var $row = $(this).parents(&#39;.form-group&#39;),
              index = $row.attr(&#39;step&#39;);
//          var myname=&#39;[&#39; +index + &#39;]&#39;
          var bookIndex= typeObj[panelId]--;
//          $(&#39;#defaultForm&#39;)
          $form
                   .formValidation(&#39;removeField&#39;, $row.find(&#39;[name="garageNo&#39;+bookIndex+&#39;"]&#39;))
                   .formValidation(&#39;removeField&#39;, $row.find(&#39;[name="posX"]&#39;))
                   .formValidation(&#39;removeField&#39;, $row.find(&#39;[name="posY"]&#39;))
          // Remove element containing the fields
          $row.remove();
        })

ログイン後にコピー

私のプロジェクトなのでhas 複数のフォームが送信されますが、ビジネスは似ているため、次のような関数が使用されます。

複数のフォームを区別するには、panelId を使用します。

var form=(“#”+panelId+”form”) 前述のように、x と y の名前は同じであることがわかります。は別の名前です。

たとえば、テーブルに座っている人の ID 番号を同じにすることはできません。

キーワードremoveFieldとaddFieldを同じにすることはできません。以下を参照してください:

var differentValid= function(diffstr){
    var vv={
      validators: {
        different: {
          field: diffstr,
          message: &#39;不能有相同的停车库&#39;
        }
      }
    }
    return vv
  }

ログイン後にコピー

ユーザーがgarageNoの値を入力するとき:

clickBindGarageNo(panelId,idx){
    $form.formValidation(&#39;addField&#39;, "garageNo"+idx, differentValid(diffArr.toString()))
      var fv =$form.data(&#39;formValidation&#39;);
      fv.validate();
}

ログイン後にコピー

これは、

文字列です。すべてのエントリを調べたガレージの名前。例: 3 つのエントリがあり、idx= 1 に焦点が当てられます。次に、diffArr=["garageNo0","garageNo2",]

注意してください。バグ: 入力を多用すると、日付プラグインを使用した後など、入力が自動的に検証されない場合があります。上記のコードは、最初に新しい検証方法を追加してから、フォーム全体を検証するものです。

送信に関する詳細は次のとおりです。フォームに送信ボタンを設定すると、このプラグインは自動的に送信しますが、自動的に更新され、ページが 404 ページまたはその他のエラーページになる場合もあります。更新しないでください。 Bootstrap フォーム検証の詳細な例

インターネット上には更新しないチュートリアルがたくさんあります。その 1 つは、

$form.formValidation(&#39;revalidateField&#39;, "field");

ログイン後にコピー

【関連する推奨事項】

1 です。

JavaScript の無料ビデオチュートリアル

2. Nodejs で一般的に使用されるミドルウェア本体パーサーの詳細な例

以上がBootstrap フォーム検証の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。