recherche

Maison  >  Article  >  interface Web  >  2 façons d'implémenter la duplication de validation ajax à l'aide du plug-in de validation jQuery_jquery

2 façons d'implémenter la duplication de validation ajax à l'aide du plug-in de validation jQuery_jquery

WBOY
WBOYoriginal
2016-05-16 15:18:541842parcourir

Les exemples de cet article décrivent deux méthodes permettant au plug-in de validation jQuery d'implémenter la duplication de vérification ajax. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

jquery validate a été perfectionné après de nombreuses années d'amélioration. Il peut répondre à 80 % des besoins de vérification. Si la fonction intégrée de validate ne peut pas répondre à nos besoins, il fournit addMethod pour étendre la fonction. Donnons un petit exemple pour illustrer l'utilisation de addMethod.

L'exemple de code de démonstration complet est le suivant : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>jquery validate ajax check exist</title>
<head>
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.validate.min.js"></script>
 <script>
 $(document).ready(function(){
  jQuery.validator.addMethod("phonecheck", function(value, element) {
    string = value.match(/0(\d{2,2})-(\d{7,7})/ig);
    if(string != null){
      return true;
    }else{
      return false;
    }
 }, "telphone number like 021-1234567");
  jQuery.validator.addMethod("phonesame", function(value, element) {
    var flag = 1;
    $.ajax({
      type:"POST",
      url:'tel.php',
      async:false,
      data:{'tel':value},
      success: function(msg){
        if(msg == 'yes'){
          flag = 0;
        }
      }
    });
    if(flag == 0){
      return false;
    }else{
      return true;
    }
 }, "sorry number have been exist");
 $("#myform").validate({
   errorPlacement: function(error, element) {
    error.insertAfter(element);
   },
   rules:{
       username:{
         required:true,
         remote:{
        url:"tel.php",
        type:"post",
        dataType:"html",
        data:{
         username:function(){return $("#username").val();}
        },
         dataFilter: function(data, type) {
      if (data == "yes")
       return true;
      else
       return false;
     }
       }
       },
      telphone:{
        required:true,
        rangelength:[11,11],
        phonecheck:true,
        phonesame:true
      }
    },
    messages:{
      telphone:{
        required:"Please enter your phone",
        rangelength:"phone must be 11 numbers"
      },
      username:{
        required:"Please enter your username",
        remote:"the username have been exist"
      }
    },
   debug:true
   })
 });
 </script>
</head>
<body style="margin-left:500px;margin-top:100px;">
<div style="font-size:24px;">021-1234567 or tank exist</div><br>
 <form id="myform" method="post">
 <label>Your telphone</label>
 <input name="telphone" class="required" value="" /><br><br>
 <label>Your username</label>
 <input name="username" id="username" class="required" value="" />
 <br/>
 <input type="submit" value="Submit"/>
</form>
</body>
</html>

Je vous recommande d'utiliser jquery validate ici. Une fois que vous vous y êtes familiarisé, c'est très pratique.

Les lecteurs intéressés par plus de contenu lié aux plug-ins jQuery peuvent consulter le sujet spécial de ce site : " Résumé des plug-ins jQuery courants et de leur utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.

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：Méthodes d'ajout, de suppression et de tri des données au format json_javascript skillsArticle suivant：Méthodes d'ajout, de suppression et de tri des données au format json_javascript skills

Articles Liés

Voir plus