Explication détaillée de l'utilisation de jQuery Validation

Cadre de validation jQuery :

Code HTML de base :

 1 　　<script src="js/jquery-1.9.1.js"></script> 2     <script src="js/jquery.validate.min.js"></script> 3     <script> 4         $(function () { 5             $('#myForm').validate({ 6  7                 rules: { 8                     //    用户名 9                     username: {　　//指的是input中的name10                         required: true,11                         rangelength: [6, 11]12                     },13                     //   密码14                     password: {15                         required: true,16                         rangelength: [11, 12]17                     },18                 },19           20                 messages: {21                     //   用户名22                     username: {23                         required: '此项必填',24                         rangelength: '用户名长度为6-11位'25                     },26                     //   密码27                     password: {28                         required: '此项必填',29                         rangelength: '用户名长度为11-12位'30                     },            
31                 },32                 // 校验全部通过33                 submitHandler: function () {34                     alert("校验全部通过！")35                 },36                37             })38         })39   </script>40 41 42 html:43     <form action="" id="myForm">44     <!--用户名-->45     <p>46         <label for="user">username:</label>47         <input type="text" name="username" id="user"/>48     </p>49     <!--密码-->50     <p>51         <label for="pass">password:</label>52         <input type="text" name="password" id="pass"/>53     </p>54     <!--提交-->55     <p><input type="submit" value="提交"/></p>56 　　</form>

À partir du code ci-dessus, permettez-moi de parler de l'utilisation de jQuery Validation.

1.validate(options) est le début de l'exécution du formulaire Il est utilisé pour vérifier le formulaire que vous avez sélectionné. La cinquième ligne du code ci-dessus "#myForm". est le nom de l'identifiant du formulaire.

2.rules() est la règle de vérification, ce sont les options de validation, c'est la règle de paire clé/valeur définie par l'utilisateur= ==La clé est l'attribut de nom d'un élément de formulaire, et la valeur est une simple chaîne ou un objet composé de paires règle/paramètre.

3. les messages () sont des messages de paire clé/valeur définis par l'utilisateur === La clé est L'attribut name d'un élément de formulaire, dont la valeur est le message à afficher par l'élément de formulaire.

　4. Le nom d'utilisateur et le mot de passe dans Rules() sont les valeurs de nom dans l'entrée.

　

　5. Il est obligatoire de vérifier cet élément lorsque la valeur de require est vraie.

　

　　6.minlength(length) définit la longueur minimale de l'élément de validation.

　

　 7.maxlength(length) définit la longueur maximale de l'élément de validation.

　 8.rangelength(range) définit une plage de longueurs de l'élément de validation.

　9.max(value) définit la valeur maximale de l'élément de validation.

　10.min(value) définit la valeur minimale de l'élément de validation.

　

　11.range() définit la plage du pointeur.

12.email() vérifie si le format de l'e-mail est correct.

　13.url() Vérifiez si le format de l'URL est correct.

14.date() vérifie si le format de date est correct. [Remarque : ne vérifie pas l'exactitude de la date, seulement le format ]

15.submitHandler Quand le formulaire est réussi Vérifiez et soumettez le formulaire.

// 校验全部通过                submitHandler: function () {
                    alert("校验全部通过！")
                },

　　16.invalidHandler lorsqu'un formulaire dont la validation échoue est soumis , vous pouvez gérer certaines choses dans cette fonction de rappel.

 //  校验不通过　　　　　　　　　　　　　　invalidHandler: function () {
                    alert("no")
                },

　17.La valeur par défaut de focusInvalid est vraie Lorsque la vérification échoue, le focus. passe au premier élément de formulaire invalide.

　18.focusCleanupLa valeur par défaut est vraie, Lorsque le formulaire obtient le focus , Supprime la errorClass sur le formulaire et masque tous les messages d'erreur. [Remarque : évitez de l'utiliser avec focusInvalid. ]

　19. errorElement Utilisez le type d'élément html pour créer un conteneur pour les messages d'erreur. La valeur par défaut est écrite dans l'étiquette

　

　20.errorClassDéfinir le style pour définir les erreurs. style du message.

　21.highlight mettra en avant les éléments du formulaire qui n'ont pas passé la validation.

highlight: function (element, errorClass) {
                  $(element).addClass(errorClass);
                   $(element).fadeOut.fadeIn();
                }

Ce qui précède est ce avec quoi je suis entré en contact, et il y en a bien d'autres sur le cadre de validation jQuery. Ceux qui sont intéressés peuvent consulter l'API de jQuery.validate.js.

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!