Composant JS Artefact de validation de formulaire Compétences BootstrapValidator_javascript

Cet article partage l'artefact de validation de formulaire du composant JS BootstrapValidator pour votre référence. Le contenu spécifique est le suivant

1.Utilisation élémentaire
Regardez la description de bootstrapvalidator : un validateur de formulaire jQuery pour Bootstrap 3. D'après la description, nous pouvons savoir que cela nécessite au moins la prise en charge de jQuery et du bootstrap. Nous introduisons d'abord les composants js requis :

 <script src="~/Scripts/jquery-1.10.2.js"></script>

  <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
  <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

  <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
  <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

Nous savons que puisqu'il s'agit d'une vérification de formulaire, nous devons avoir un formulaire dans la page cshtml, et nous savons que les éléments du formulaire sont obtenus via l'attribut name, donc les éléments du formulaire doivent avoir une valeur d'attribut. de nom.

　<form>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
      </div>
      <div class="form-group">
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>

Après avoir l’élément form, il est temps d’initialiser notre js.

  $(function () {
    $('form').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
      　feedbackIcons: {
        　　　　　　　　valid: 'glyphicon glyphicon-ok',
        　　　　　　　　invalid: 'glyphicon glyphicon-remove',
        　　　　　　　　validating: 'glyphicon glyphicon-refresh'
      　　　　　　　　  },
      fields: {
        username: {
          message: '用户名验证失败',
          validators: {
            notEmpty: {
              message: '用户名不能为空'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱地址不能为空'
            }
          }
        }
      }
    });
  });

Le contenu doit être facile à comprendre. Voyons l'effet :

La vérification a échoué, le bouton Soumettre est grisé et on ne peut pas cliquer

Vérification réussie, bouton de soumission restauré

Voyez l'effet et ressentez-le en premier. Les plus grands avantages : une interface facile à utiliser et conviviale. Jetons un coup d'œil à la validation qui se chevauche.

2. Utilisation intermédiaire
Ci-dessus, nous savons comment écrire une vérification non vide, il doit y avoir d'autres méthodes de vérification en plus de celle-ci. Ne vous inquiétez pas, nous prendrons notre temps. La partie cshtml du code ci-dessus reste inchangée, nous allons légèrement modifier la partie js :

　$(function () {
    $('form').bootstrapValidator({
      message: 'This value is not valid',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        username: {
          message: '用户名验证失败',
          validators: {
            notEmpty: {
              message: '用户名不能为空'
            },
            stringLength: {
              min: 6,
              max: 18,
              message: '用户名长度必须在6到18位之间'
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      }
    });
  });

Après avoir ajouté la vérification superposée, voyons l'effet :

Comme le montre le code ci-dessus, l'attribut validators correspond à un objet Json, qui peut contenir plusieurs types de vérification :

• notEmpty : vérification non vide
• stringLength : vérification de la longueur de la chaîne
• regexp : vérification des expressions régulières
• emailAddress : Vérification de l'adresse e-mail (nous n'avons pas besoin d'écrire l'adresse e-mail habituelle ~~)

De plus, dans le document, nous voyons qu'il comporte un total de 46 types de vérification. Jetons un coup d'œil à quelques-uns des plus courants :

.

• base64 : vérification de l'encodage 64 bits
• entre : vérifiez que la valeur d'entrée doit être comprise dans une certaine plage, par exemple supérieure à 10 et inférieure à 100 
• Carte de crédit : vérification de la carte d'identité
• date : vérification de la date
• ip : vérification de l'adresse IP
• numérique : vérification numérique
• téléphone : vérification du numéro de téléphone
• uri : vérification de l'url

Un autre attribut couramment utilisé est l'attribut submitHandler, qui correspond à la méthode événementielle du bouton de soumission. Utiliser comme suit :

$(function () {
    $('form').bootstrapValidator({
      message: 'This value is not valid',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        username: {
          message: '用户名验证失败',
          validators: {
            notEmpty: {
              message: '用户名不能为空'
            },
            stringLength: {
              min: 6,
              max: 18,
              message: '用户名长度必须在6到18位之间'
            },
            regexp: {
              regexp: /^[a-zA-Z0-9_]+$/,
              message: '用户名只能包含大写、小写、数字和下划线'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      },
      submitHandler: function (validator, form, submitButton) {
        alert("submit");
      }
    });
  });

Il présente de nombreux exemples de vérification dans sa démo. Jetons un coup d'œil brièvement à son effet. Quant au code d'implémentation, il est en fait très simple. Si vous êtes intéressé, vous pouvez directement consulter l'API.

Vérification des couleurs

Vérification du formulaire de page à onglet

Vérification des boutons

Ce qui précède concerne uniquement cet article, j'espère qu'il sera utile à l'étude de chacun.