jquery invite une erreur de saisie

Dans la conception de sites Web, les formulaires sont l'un des éléments communs. L'utilisateur du formulaire remplit les informations qui doivent être soumises, puis le site Web vérifie la validité des données grâce à la vérification du formulaire. Dans les formulaires, afin d'améliorer l'expérience utilisateur, les plug-ins jQuery sont souvent utilisés pour fournir des conseils et des commentaires. Parmi eux, un plug-in courant est l’invite d’erreur de saisie.

Les invites d'erreur de saisie permettent aux utilisateurs de savoir quelles données sont illégales avant de soumettre le formulaire, ce qui leur fait gagner du temps et réduit les erreurs. Vous trouverez ci-dessous un exemple qui montre comment implémenter une invite d'erreur de saisie.

Tout d’abord, créez un formulaire HTML simple. Le formulaire contient trois champs : nom, e-mail et mot de passe.

<form id="signup-form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
  </div>
  <div class="form-group">
    <label for="email">电子邮件</label>
    <input type="email" class="form-control" id="email" placeholder="请输入您的电子邮件">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

Ensuite, nous utilisons le plug-in jQuery pour provoquer des erreurs de saisie. À l'aide du plugin validate de jQuery, vous pouvez vérifier dynamiquement un formulaire avant que l'utilisateur ne le soumette en fonction des règles relatives aux champs du formulaire (tels que les champs obligatoires ou les formats de courrier électronique). Si le champ n'est pas conforme aux règles, une erreur de saisie sera affichée. Voici un exemple de la façon d'implémenter cette fonctionnalité :

$(document).ready(function(){
  $("#signup-form").validate({
    rules: {
      name: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: {
        required: "姓名不能为空"
      },
      email: {
        required: "电子邮件不能为空",
        email: "电子邮件格式不正确"
      },
      password: {
        required: "密码不能为空",
        minlength: "密码至少需要6个字符"
      }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      error.addClass("invalid-feedback");
      element.closest(".form-group").append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass("is-invalid").removeClass("is-valid");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass("is-invalid").addClass("is-valid");
    }
  });
});

Dans l'exemple ci-dessus, le plugin validate est utilisé au chargement de la page via la méthode $(document).ready(). L'objet rules spécifie les règles et l'objet messages spécifie les messages d'erreur. Dans les messages d'erreur, vous pouvez utiliser le caractère spécial « $ » pour référencer le nom d'un champ de formulaire. $(document).ready()方法在页面加载时使用了validate插件。rules对象指定了规则，messages对象指定了错误信息。在错误信息中，可以使用特殊字符“$”符号来引用表单字段的名称。

errorElement选项将使用div元素来呈现错误消息。errorPlacement选项将错误消息插入到与输入字段相关联的 form-group 类中。highlight和unhighlight

L'option errorElement utilisera un élément div pour afficher les messages d'erreur. L'option errorPlacement insère un message d'erreur dans la classe form-group associée au champ de saisie. Les options highlight et unhighlight sont déclenchées lorsque la zone de saisie est respectivement focalisée et floue. Ces deux méthodes définissent la couleur de la bordure sur rouge et vert pour mieux mettre en évidence les champs d'erreur.

Enfin, le plugin validate effectuera la validation lorsque l'utilisateur soumettra le formulaire. Si le champ n'est pas conforme aux règles, un message d'erreur apparaît. Ces messages sont affichés par champ correspondant sous le bouton Soumettre.

Ce qui précède est un exemple d'invite d'erreur de saisie. L'utilisation de jQuery et de ce plug-in peut aider les concepteurs à mettre en œuvre une vérification de base des formulaires et inciter les utilisateurs à comprendre quelles données sont illégales avant de soumettre le 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!