Maison > Article > interface Web > La vérification du formulaire jquery réussit le formulaire de vérification de classe n'est pas vide_jquery

La vérification du formulaire jquery réussit le formulaire de vérification de classe n'est pas vide_jquery

WBOYoriginal: 2016-05-16 15:34:081266parcourir

Lors du développement d'un système, certaines données de formulaire sont souvent requises. Si jQuery est utilisé pour vérifier via ID, cela affectera non seulement l'efficacité, mais entraînera également des omissions, ce qui rendra difficile la maintenance ultérieure.

Ce chapitre expliquera comment utiliser jQuery pour effectuer une vérification unifiée en configurant des classes pour les formulaires. (L'ID ne peut être utilisé qu'une seule fois sur une page ; la classe peut être référencée plusieurs fois)

1 : Ajoutez une classe à l'entrée. Le nom peut être défini à volonté, mais chaque entrée doit être cohérente. Dans ce chapitre, calss est défini sur noNull. (Si l'entrée a déjà un attribut de classe, il peut être ajouté directement après)

2 : Ajoutez un attribut à l'entrée pour obtenir le champ via jquery plus tard et utilisez-le comme invite. L'attribut d'invite de cas dans ce chapitre est notNull.

3 : Utilisez jQuery pour parcourir tous les formulaires avec calss noNull dans la page et vérifiez si elle est vide, obtenez le champ notNull et fournissez une invite vide.

Pour plus de détails sur la façon de le configurer, veuillez vous référer au cas ci-dessous. Ce chapitre explique les types de saisie, radio, sélection, case à cocher et autres.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
        姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
       性别:
       男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
       女<input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
        年龄：
        <select name="age" class="noNull" notNull="年龄">
          <option value ="">请选择</option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
        兴趣：
        打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
        唱歌<input type="checkbox" name="hobby" value="2">
        跳舞<input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()">保存</button>
  </form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
  $(".noNull").each(function(){
    var name = $(this).attr("name");
    if($(this).val()==""){
    alert($(this).attr('notNull')+"不能为空");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='"+name+"']:checked").size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="'+name+'"]:checked').size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>

Ce qui suit vous présente le plug-in de vérification jquery.validate.js

jquery.validate.js est un plug-in de vérification sous jquery. Grâce aux avantages de jquery, nous pouvons vérifier rapidement certaines entrées courantes et étendre nos propres méthodes de vérification.

Par exemple, il existe un tel formulaire :

<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

Dans ce formulaire, il y a le prénom, le nom, le nom d'utilisateur, le mot de passe, la confirmation du mot de passe et l'email. Ils doivent tous être non vides et l'e-mail doit être une adresse correctement formatée, le mot de passe de confirmation et le mot de passe cohérents. La façon la plus simple d'utiliser la validation jQuery consiste à introduire deux fichiers js, jquery.js et jquery validation.js. Ajoutez ensuite la classe à l'entrée respectivement :

<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>

Ce qui suit répertorie les vérifications par défaut fournies avec validate

obligatoire : "Champ obligatoire",
distant : "Veuillez corriger ce champ",
email : "Veuillez saisir le format correct de votre email",
url : "Veuillez saisir une URL légale",
date : "Veuillez saisir une date légale",
dateISO : "Veuillez saisir une date valide (ISO).",
numéro : "Veuillez saisir un numéro légal",
chiffres : "Seuls des nombres entiers peuvent être saisis",
carte de crédit : "Veuillez saisir un numéro de carte de crédit valide",
equalTo : "Veuillez saisir à nouveau la même valeur",
accepter : "Veuillez saisir une chaîne avec un suffixe légal",
maxlength: jQuery.format("Veuillez saisir une chaîne d'une longueur maximale de {0}"),
minlength : jQuery.format("Veuillez saisir une chaîne d'une longueur d'au moins {0}"),
rangelength : jQuery.format("Veuillez saisir une chaîne d'une longueur comprise entre {0} et {1}"),
range : jQuery.format("Veuillez saisir une valeur comprise entre {0} et {1}"),
max : jQuery.format("Veuillez saisir une valeur allant jusqu'à {0}"),
min : jQuery.format("Veuillez saisir une valeur minimale de {0}")

Ensuite, dans l'événement read du document, ajoutez la méthode suivante :

   <script>
    $(document).ready(function(){
        $("#signupForm").validate();
    }
   </script>

De cette façon, lorsque le formulaire sera soumis, il sera vérifié en fonction de la classe spécifiée par l'entrée. En cas d'échec, la soumission du formulaire sera bloquée. Et les informations d'invite sont affichées derrière l'entrée.

Cependant, cela fait mal car les règles de validation envahissent notre code html. Une autre façon consiste à utiliser des « règles ». Nous supprimons les classes de vérification pour la saisie. Modifiez ensuite le code de réponse à l'événement prêt du document :

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})

De cette façon, le même effet peut être obtenu.

Ensuite, la question suivante est que le message d'erreur affiché est celui par défaut. Nous devons utiliser une invite personnalisée :

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

Si vous souhaitez également afficher un style particulier sur le message d'erreur (par exemple, la police est rouge), vous pouvez ajouter :

<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>

Continuer à ajouter des règles de validation pour la longueur du mot de passe saisi :

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

Utiliser la télécommande

Vous pouvez spécifier la méthode d'effet de déclenchement via un événement (les valeurs facultatives incluent keyup (chaque fois qu'une touche est enfoncée), flou (lorsque le contrôle perd le focus), s'il n'est pas spécifié, il ne se déclenchera que lorsque le bouton de soumission est pressé)

$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})

Si vous spécifiez debug comme vrai, le formulaire ne sera pas soumis et ne pourra être utilisé qu'à des fins de vérification (la valeur par défaut est la soumission) et peut être utilisé pour le débogage

$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})

Si vous devez effectuer un traitement personnalisé avant de soumettre, utilisez le paramètre submitHandler

$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery CSS3 liste déroulante des cartes pliantes pour obtenir effect_jqueryArticle suivant：jQuery CSS3 liste déroulante des cartes pliantes pour obtenir effect_jquery

Articles Liés

Voir plus