Comment vérifier le formulaire bootstrap

Bootstrap fournit des capacités de vérification de formulaire qui peuvent être ajoutées aux projets en important CSS et JavaScript. Créez un élément de formulaire et forcez les champs ou les attributs de modèle à remplir avec l'attribut requis pour vérifier un format spécifique. Vous pouvez également personnaliser le message de vérification. Lorsqu'un formulaire est soumis, Bootstrap effectue automatiquement une vérification, affiche un message d'erreur et bloque la soumission. FAQ: Désactiver la vérification supprime les attributs requis et de modèle; La méthode CheckValidity () peut être déclenchée manuellement; L'attribut de validité peut obtenir le résultat de vérification.

Vérification du formulaire bootstrap

Bootstrap offre des fonctions de vérification de formulaire simples et faciles à utiliser pour aider les développeurs à vérifier facilement l'entrée de formulaire.

Comment utiliser la vérification du formulaire bootstrap

1. Importation de bootstrap CSS et JavaScript

    <code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.bundle.min.js"></script></code>

2. Créer des éléments de forme

    <code class="html"><form> <input type="text" id="name" name="name" placeholder="姓名" required> <input type="email" id="email" name="email" placeholder="邮箱" required> <button type="submit" class="btn btn-primary">提交</button> </form></code>

3. Ajouter des règles de vérification
   Utilisez required pour forcer les champs à remplir. Vous pouvez également spécifier des expressions régulières en utilisant pattern pour vérifier que l'entrée est conforme à un format spécifique, comme une adresse e-mail:

    <code class="html"><input type="email" id="email" name="email" placeholder="邮箱" required pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$"></code>

4. Message de vérification personnalisé
   Vous pouvez utiliser data pour personnaliser le message de vérification:

    <code class="html"><input type="text" id="name" name="name" placeholder="姓名" required data-invalid-feedback="请输入您的姓名"></code>

5. Soumettre le formulaire
   Lorsqu'un formulaire est soumis, Bootstrap effectuera automatiquement une vérification. Si la vérification échoue, un message d'erreur s'affiche et le formulaire est bloqué.

Questions fréquemment posées

• Comment désactiver la vérification?
  Supprime les propriétés required et pattern .

• Comment déclencher la vérification manuellement?
  Utilisez checkValidity() :

   <code class="javascript">document.getElementById("form").checkValidity();</code>

• Comment obtenir le résultat de la vérification?
  Utilisez validity :

   <code class="javascript">const nameInput = document.getElementById("name"); console.log(nameInput.validity.valid); // 返回true 或false</code>

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!