cari

Rumah >hujung hadapan web >tutorial js >2 cara untuk melaksanakan pendua pengesahan ajax menggunakan jQuery mengesahkan plug-in_jquery

2 cara untuk melaksanakan pendua pengesahan ajax menggunakan jQuery mengesahkan plug-in_jquery

WBOY
WBOYasal
2016-05-16 15:18:541849semak imbas

Contoh dalam artikel ini menerangkan dua kaedah untuk pemalam pengesahan jQuery untuk melaksanakan pendua pengesahan ajax. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

jquery validate telah disempurnakan selepas bertahun-tahun penambahbaikan. Ia boleh memenuhi 80% keperluan pengesahan Jika fungsi pengesahan terbina dalam tidak dapat memenuhi keperluan kami, ia menyediakan addMethod untuk melanjutkan fungsi. Mari kita berikan contoh kecil untuk menggambarkan penggunaan addMethod.

Kod contoh demo yang lengkap adalah seperti berikut: 

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

Saya syorkan anda untuk menggunakan jquery validate di sini Setelah anda biasa dengannya, ia sangat mudah.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan pemalam jQuery boleh menyemak topik khas tapak ini: " Ringkasan pemalam dan penggunaan jQuery biasa"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah untuk menambah, memadam dan mengisih data dalam kemahiran json format_javascriptArtikel seterusnya：Kaedah untuk menambah, memadam dan mengisih data dalam kemahiran json format_javascript

Artikel berkaitan

Lihat lagi