la zone de saisie jquery validate ne doit pas devenir rouge

En développement web, la validation des formulaires est un maillon très important. Le plug-in jquery validate peut facilement nous aider à implémenter des fonctions de validation de formulaire. Pendant le processus de validation du formulaire, lorsque la saisie ne répond pas aux exigences, le plug-in rendra la bordure de la zone de saisie rouge pour avertir l'utilisateur que la saisie est incorrecte. Cependant, dans certains cas, nous souhaitons que la zone de saisie ne devienne pas rouge, mais conserve la couleur de bordure d'origine.

Cet article expliquera comment utiliser le plug-in jquery validate pour implémenter la fonction de validation de formulaire afin que la zone de saisie ne devienne pas rouge.

1. Introduction au plug-in jquery validate

jquery validate est un plug-in de validation de formulaire très populaire. Il fournit un ensemble très riche de règles de validation et de fonctions associées, qui peuvent nous aider à implémenter rapidement des fonctions de validation de formulaire. Pour une utilisation spécifique et des instructions associées, veuillez vous référer à la documentation du plug-in.

2. Désactivez l'invite d'erreur par défaut

Dans le plug-in de validation jquery, la méthode d'invite d'erreur par défaut consiste à transformer la bordure de la zone de saisie en rouge et à insérer les informations d'invite d'erreur sous la zone de saisie. Si nous voulons désactiver cette invite d'erreur, nous devons définir certains paramètres lors de l'initialisation du plug-in.

Plus précisément, nous devons désactiver l'invite d'erreur par défaut en définissant les paramètres de surbrillance et de non-surbrillance. Le paramètre highlight est utilisé pour définir le style de la zone de saisie lorsqu'une erreur se produit, et le paramètre unhighlight est utilisé pour définir le style de la zone de saisie lorsqu'elle revient à la normale. Nous pouvons définir une fonction de rappel vide dans ces deux paramètres pour désactiver le style par défaut du plugin.

Par exemple :

$("form").validate({
  highlight: function(element) {
    // do nothing
  },
  unhighlight: function(element) {
    // do nothing
  }
});

Avec les paramètres ci-dessus, la zone de saisie ne deviendra pas rouge en cas d'erreur, et elle ne changera pas lorsqu'elle reviendra à la normale.

3. Méthode d'invite d'erreur personnalisée

Bien que la méthode d'invite d'erreur par défaut soit très pratique, elle peut ne pas convenir dans certains cas. Dans ce cas, nous pouvons utiliser certaines fonctions de rappel fournies par jquery validate pour personnaliser la méthode d'invite d'erreur.

Plus précisément, jquery validate fournit deux fonctions de rappel, errorPlacement et showErrors, pour personnaliser les invites d'erreur. La fonction errorPlacement est utilisée pour déterminer l'emplacement du message d'erreur et la fonction showErrors est utilisée pour afficher le message d'erreur.

Par exemple :

$("form").validate({
  errorPlacement: function(error, element) {
    // 自定义错误提示信息位置
    error.appendTo(element.parent());
  },
  showErrors: function(errorMap, errorList) {
    // 自定义错误提示信息显示
    var error = errorList[0];
    var element = $(error.element);
    element.addClass("error");
    element.next(".error-message").text(error.message);
  }
});

Grâce aux paramètres ci-dessus, nous pouvons personnaliser la position et le style du message d'erreur pour obtenir des effets visuels spécifiques.

4. Utiliser le contrôle de style CSS

Dans certains cas, nous pouvons définir le style CSS pour empêcher la zone de saisie de devenir rouge.

Par exemple :

input.error {
  /* 输入框出错时的样式 */
  /* do something here */
}

input.valid {
  /* 输入框恢复正常时的样式 */
  /* do something here */
}

En définissant le style ci-dessus, nous pouvons contrôler le style de la zone de saisie afin que la zone de saisie ne devienne pas rouge.

5. Résumé

Pendant le processus de vérification du formulaire, la zone de saisie qui devient rouge est une invite d'erreur courante. Cependant, dans certains cas, nous souhaitons que la zone de saisie ne devienne pas rouge, mais conserve la couleur de bordure d'origine. Cet article présente plusieurs méthodes de validation de formulaire pour empêcher la zone de saisie de devenir rouge, notamment la désactivation de l'invite d'erreur par défaut, la personnalisation de l'invite d'erreur et l'utilisation du contrôle de style CSS. La méthode à choisir dépend des besoins réels et des préférences personnelles.

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!