Comment écrire la validation du formulaire jquery

Dans le développement front-end, la validation de formulaire est une compétence essentielle. La validation du formulaire peut garantir l'exactitude et la légalité des données saisies par les utilisateurs, réduisant efficacement la probabilité d'erreurs de données et apportant une bonne expérience aux utilisateurs. Cet article explique comment utiliser jQuery pour valider les formulaires.

Frameworks et plug-ins

Lorsque nous utilisons jQuery pour valider des formulaires, nous pouvons choisir d'utiliser d'excellents frameworks et plug-ins pour améliorer l'efficacité du développement et la qualité du code. Les frameworks et plug-ins de validation de formulaire courants sont :

1. jQuery Validation
   jQuery Validation est un plug-in de validation de formulaire très populaire qui peut valider automatiquement les formulaires grâce à des paramètres et des données de principes simples. dans. De plus, jQuery Validation prend en charge plusieurs types de validation, notamment les champs obligatoires, la longueur minimale, la longueur maximale, les expressions régulières, la validation à distance, etc.
2. Bootstrap Validator
   Bootstrap Validator est un plugin de validation de formulaire basé sur Bootstrap et jQuery. Il fournit une variété de méthodes de vérification, notamment les champs obligatoires, l'e-mail, le mot de passe, le numéro de téléphone mobile, l'adresse URL, etc., et prend en charge les règles de vérification personnalisées.
3. FormValidation
   FormValidation est un framework de validation de formulaire populaire qui propose l'intégration de différentes bibliothèques et frameworks JavaScript, tels que Bootstrap et Foundation. FormValidation prend en charge les messages d'erreur personnalisés, la validation asynchrone, les méthodes de validation pratiques et plusieurs règles de validation.

Les trois frameworks et plug-ins ci-dessus sont faciles à utiliser, flexibles et modifiables, et méritent l'attention des développeurs.

Implémentation de la validation du formulaire

Ce qui suit prendra le plug-in jQuery Validation comme exemple pour présenter comment utiliser jQuery pour valider le formulaire.

1. Présentation de jQuery et jQuery Validation

Avant de commencer, nous devons introduire les fichiers JavaScript nécessaires dans notre fichier HTML.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

2. Écrire du code HTML

Dans le code HTML, nous devons d'abord définir un formulaire et ajouter un identifiant unique à chaque élément du formulaire .

<form id="myform">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>

  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email"><br>

  <button type="submit">提交</button>
</form>

3. Écrire le code JavaScript

Dans le code JavaScript, nous devons d'abord configurer les règles de validation et le message d'erreur, puis appeler le validate () méthode Valider le formulaire. Si la validation du formulaire réussit, les opérations correspondantes peuvent être effectuées, comme la soumission du formulaire.

$(document).ready(function() {
  $("#myform").validate({
    rules: {
      username: {
        required: true,
        minlength: 6
      },
      password: {
        required: true,
        minlength: 8
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名长度必须大于等于6个字符"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度必须大于等于8个字符"
      },
      email: {
        required: "请输入电子邮件",
        email: "请正确填写有效的电子邮件地址"
      }
    },
    submitHandler: function(form) {
      // 表单通过验证后执行的操作
      form.submit();
    }
  });
});

Dans le code ci-dessus, nous utilisons la méthode validate() pour valider le formulaire, où l'attribut Rules définit les règles de validation et l'attribut messages définit le message d'erreur correspondant. Lorsque le formulaire est soumis, l'attribut submitHandler déclenche les opérations associées.

Il convient de noter que lorsque vous utilisez jQuery Validation pour la validation de formulaire, vous devez d'abord introduire les scripts jQuery et jQuery Validation dans le fichier HTML et exécuter le code une fois que jQuery est prêt. De plus, vous devez également définir un identifiant unique pour chaque élément de formulaire à associer aux règles de validation.

Summary

Grâce à cet article, nous avons appris à utiliser le plug-in jQuery Validation pour valider le formulaire, ainsi que les frameworks et plug-ins de validation de formulaire courants. Dans le développement réel, nous pouvons choisir la méthode de vérification de formulaire appropriée en fonction de la situation spécifique et utiliser diverses règles de vérification et invites d'erreur pour garantir l'exactitude et la sécurité des données du formulaire.

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!