2 Möglichkeiten zur Implementierung der Ajax-Validierungsduplizierung mithilfe des jQuery-Validierungs-Plug-ins

2 Möglichkeiten zur Implementierung der Ajax-Validierungsduplizierung mithilfe des jQuery-Validierungs-Plug-ins_jquery

WBOY

Freigeben： 2016-05-16 15:18:54

Original

1863 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben zwei Methoden für das jQuery-Validierungs-Plug-in zur Implementierung der Ajax-Verifizierungsduplizierung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Jquery Validierung wurde nach vielen Jahren der Verbesserung perfektioniert. Es kann 80 % der Verifizierungsanforderungen erfüllen. Wenn die integrierte Validierungsfunktion unsere Anforderungen nicht erfüllen kann, bietet sie addMethod, um die Funktion zu erweitern. Lassen Sie uns ein kleines Beispiel geben, um die Verwendung von addMethod zu veranschaulichen.

Der vollständige Demo-Beispielcode lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich empfehle Ihnen, hier die JQuery-Validierung zu verwenden. Sobald Sie damit vertraut sind, ist es sehr praktisch.

Leser, die an weiteren Inhalten zu jQuery-Plug-ins interessiert sind, können sich das Spezialthema dieser Website ansehen: „ Zusammenfassung gängiger jQuery-Plug-ins und deren Verwendung“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.