Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation-js tutoriel-php.cn

Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation

PHPz

Libérer： 2018-10-16 16:53:03

original

7799 Les gens l'ont consulté

Cet article présente principalement le formulaire de validation de formulaire BootstrapformValidation pour implémenter la fonction de validation dynamique du formulaire. Les amis qui en ont besoin peuvent se référer au Tutoriel Bootstrap

Ajouter dynamiquement. saisie et ajout dynamique d'une nouvelle méthode de vérification !

statut d'initialisation :

Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation

Après avoir cliqué sur "+" :

Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation

Après vérification :

Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation

Points de connaissance :

1 Allez d'abord sur le site officiel pour télécharger : formvalidation.io/

2. Lors de l’importation de fichiers, je n’entrerai pas dans les détails des précautions que j’ai déjà évoquées dans l’article sur la vérification à distance.

3 Mots clés utilisés : addField, RemoveField, Different

4 A noter que les noms des exemples sur le site officiel sont différents. Je suis un peu paresseux ici. Et lorsque le projet est ajaxé, il n'est pas soumis à l'aide du formulaire, mais est soumis lui-même en tant que json, donc les noms de x et y ont le même nom.

Un bon début :

Tout d'abord, il doit y avoir un "+" dans le code HTML, marqué comme addPos, et ensuite il doit y avoir un "-" marqué comme "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>

Copier après la connexion

Alors venez à 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();
        })

Copier après la connexion

Parce que mon projet comporte plusieurs soumissions de formulaires, mais que le métier est similaire, j'utilise ces fonctions

Par exemple : var form=(“#”+panelId+”form”) utilisez panelId. La différence est qu'il existe plusieurs formulaires

Comme mentionné ci-dessus, les noms de x et y sont les mêmes, mais si vous faites attention, vous constaterez que le nom de garageNo est différent. . Pourquoi ?

En raison d'exigences commerciales, les valeurs de garageNo sous la même forme ne peuvent pas être les mêmes. Par exemple, le numéro d'identité de chacun ne peut pas être le même, mais vous et votre collègue de bureau pouvez être tous deux une femme ou. . .

Les valeurs de removeField

garageNo ne peuvent pas être identiques : 🎜>

Lorsque l'utilisateur saisit la valeur de. garageNo :

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

Copier après la connexion

Qu'est-ce que ce diffArr.toString() ? C'est la chaîne

du nom du garageNo que j'ai parcouru

Par exemple : il y a 3 entrées, idx. =1 et le focus est sur 1. Ensuite diffArr=["garageNo0","garageNo2",]

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

Copier après la connexion

Notez un bug : si vous utilisez beaucoup d'entrées, vous constatera que parfois l'entrée n'est pas automatiquement vérifiée. Par exemple, lorsque vous utilisez le plug-in de date pour cliquer sur la date, l'entrée n'est pas vérifiée. À ce stade, vous devez d'abord vérifier manuellement ce qui précède. une nouvelle méthode de validation puis valide l'ensemble du formulaire. Si vous souhaitez simplement valider une saisie, veuillez utiliser :

Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation

Il y a également un détail sur la soumission :

Lorsque nous ne le faisons pas. Si vous ne définissez pas de bouton de soumission, ce plugin le soumettra automatiquement pour vous. Mais vous constaterez également que si votre service de soumission échoue, votre page deviendra une page 404. ou une autre page d'erreur

Mais parfois nous ne le faisons pas. Je ne veux pas qu'il soit actualisé. Que dois-je faire ?

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

Copier après la connexion

Je préfère en utiliser un.

Tutoriel vidéo gratuit Javascript

Exemples détaillés d'analyseur de corps middleware couramment utilisé dans Nodejs

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

Copier après la connexion

3. Compétences code_javascript de mise en œuvre de la vérification du formulaire JavaScript

JS à ligne unique implémente l'inspection du format d'argent du terminal mobile

Liaison de contrôle de formulaire Vue v-model. exemple de tutoriel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!