Contoh penjelasan pemalam pengesahan borang Aplikasi_jquery pengesahan

jquery.Validation ialah pemalam jquery yang sangat baik yang boleh mengesahkan borang pelanggan dan menyediakan banyak sifat dan kaedah yang boleh disesuaikan dengan kebolehskalaan yang baik. Kini digabungkan dengan situasi sebenar, saya telah menyusun pengesahan yang sering digunakan dalam projek menjadi DEMO contoh Artikel ini adalah untuk memahami aplikasi Pengesahan dengan menerangkan contoh ini.

Pengesahan yang terlibat dalam contoh ini ialah:
Nama pengguna: panjang, pengesahan aksara, pengesahan ajax kebolehulangan (sama ada ia sudah wujud).
Kata laluan: Pengesahan panjang, ulangi pengesahan kata laluan.
E-mel: Pengesahan alamat e-mel.
Talian Tetap: Pengesahan nombor talian tetap Tanah Besar China.
Nombor telefon bimbit: Pengesahan nombor telefon bimbit Tanah Besar China.
URL: Pengesahan alamat URL tapak web.
Tarikh: Pengesahan format tarikh standard.
Nombor: Integer, pengesahan integer positif, pengesahan julat angka.
Kad ID: Pengesahan nombor ID Tanah Besar China.
Poskod: Pengesahan kod pos Tanah Besar.
Fail: Pengesahan jenis fail (akhiran), contohnya, hanya imej dibenarkan untuk dimuat naik.
IP: pengesahan alamat IP.
Kod pengesahan: kod pengesahan pengesahan ajax.
Penggunaan:
1. Sediakan jquery dan jquery.sahkan pemalam

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.validate.js"></script> 

2. Sediakan gaya CSS
Saya tidak akan menerangkan secara terperinci tentang gaya halaman Anda boleh menulis gaya anda sendiri atau anda boleh merujuk kepada kod sumber halaman DEMO. Gaya utama untuk ditekankan di sini ialah gaya untuk memaparkan maklumat pengesahan:

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; 
background:url(images/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background: 
url(images/checked.gif) no-repeat 2px 0} 

3. XHTML

<form id="myform" action="#" method="post"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> 
 <tr class="table_title"> 
  <td colspan="2">jquery.validation 表单验证</td> 
 </tr> 
 <tr> 
  <td width="22%" align="right">用户名：</td> 
  <td><input type="text" name="user" id="user" class="input required" /> 
  <p>用户名为3-16个字符，可以为数字、字母、下划线以及中文</p></td> 
 </tr> 
 <tr> 
  <td align="right">密码：</td> 
  <td><input type="password" name="pass" id="pass" class="input required" /> 
  <p>最小长度:6 最大长度:16</p> 
  </td> 
 </tr> 
 <tr> 
  <td align="right">确认密码：</td> 
  <td><input type="password" name="repass" class="input required" /></td> 
 </tr> 
</table> 
</form> 

Perlu disebut bahawa saya memberikan label gaya kelas "diperlukan", dan fungsinya akan disebut di bawah.
4. Gunakan pemalam Pengesahan
Kaedah untuk memanggil pemalam Pengesahan:

$(function(){    
  var validate = $("#myform").validate({ 
     rules:{ //定义验证规则 
      ...... 
     }, 
     messages:{ //定义提示信息 
      ...... 
     } 
  }) 
}); 

peraturan: Tentukan peraturan pengesahan, dalam bentuk kunci:nilai, kunci ialah elemen yang akan disahkan dan nilai boleh menjadi rentetan atau objek. Contohnya, sahkan panjang nama pengguna dan jangan biarkan ia kosong:

rules:{ 
 user:{ 
   required:true, 
   maxlength:16, 
   minlength:3 
 }, 
 ...... 
} 

Malah, kita boleh secara langsung menentukan atribut kelas input seperti yang diperlukan dalam kod XHTML Fungsinya adalah untuk tidak membenarkannya kosong, supaya tidak perlu menulisnya berulang kali di bahagian JS. Dengan cara yang sama untuk mengesahkan e-mel, dsb., tetapkan secara langsung atribut kelas input kepada e-mel.
mesej: Tentukan mesej gesaan Dalam bentuk kunci: nilai, kunci ialah elemen yang akan disahkan, dan nilai ialah rentetan atau fungsi Mesej digesa apabila pengesahan gagal.

messages:{ 
 user:{ 
   required:"用户名不能为空！", 
   remote:"该用户名已存在，请换个其他的用户名！" 
 }, 
 ...... 
} 

JS pengesahan yang terlibat dalam contoh ini ditulis mengikut peraturan di atas Pemalam Pengesahan merangkumi banyak kaedah pengesahan asas, seperti berikut:
required:true mesti mempunyai nilai dan tidak boleh kosong
remote:url boleh digunakan untuk menentukan sama ada nama pengguna sudah wujud Pelayan mengeluarkan benar, menunjukkan bahawa pengesahan telah diluluskan
minlength:6 Panjang minimum ialah 6
maxlength:16 Panjang maksimum ialah 16
julat panjang: julat panjang
julat:[10,20] Julat nilai adalah antara 10-20
e-mel: e-mel pengesahan benar
url:URL Pengesahan benar
dateISO:true Sahkan format tarikh 'yyyy-mm-dd'
digit:true hanya boleh menjadi nombor
terima:'gif|jpg' hanya menerima gambar dengan gif atau akhiran jpg. Sambungan yang biasa digunakan untuk mengesahkan fail
equalTo:'#pass' adalah sama dengan nilai medan bentuk yang mana, selalunya digunakan untuk mengesahkan kemasukan kata laluan berulang
Selain itu, saya juga mengembangkan beberapa pengesahan berdasarkan situasi sebenar projek Kod pengesahan berada dalam validate-ex.js ini perlu dimuatkan sebelum digunakan. Ia menyediakan pengesahan berikut:
userName:true Username hanya boleh memasukkan aksara Cina, huruf Inggeris, nombor dan garis bawah
isMobile:pengesahan nombor telefon mudah alih sebenar
isPhone: pengesahan nombor telefon bimbit Tanah Besar sejati
isZipCode:pengesahan kod zip sebenar
isIdCardNo: pengesahan nombor ID Tanah Besar China sebenar
ip:pengesahan alamat IP sebenar
Kaedah pengesahan yang disediakan di atas pada asasnya memenuhi keperluan kami dalam kebanyakan projek. Jika terdapat keperluan pengesahan khas lain, ia boleh dikembangkan, seperti berikut:

jQuery.validator.addMethod("isZipCode", function(value, element) {   
 var zip = /^[0-9]{6}$/;   
 return this.optional(element) || (zip.test(value));   
}, "请正确填写您的邮政编码!"); 

Menyelesaikan masalah:
1 Apabila mengesahkan sama ada nama pengguna wujud dalam projek, didapati pengesahan input bahasa Cina tidak disokong. Penyelesaian saya ialah mengekod nama pengguna dengan encodeURIComponent, dan kemudian gunakan latar belakang PHP untuk urldecode nilai yang diterima

user:{ 
  remote: { 
     url: "chk_user.php", //服务端验证程序 
     type: "post", //提交方式 
     data: { user: function() { 
       return encodeURIComponent($("#user").val()); //编码数据 
     }} 
  } 
}, 

Kod program pengesahan sisi pelayan chk_user.php:

<&#63;php 
$request = urldecode(trim($_POST['user'])); 
usleep(150000); 
$users = array('月光光', 'jeymii', 'Peter', 'helloweba'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
&#63;> 

我使用的服务端程序是PHP，您也可以使用ASP，ASP.NET，JAVA等。此外本例为了演示，用户名数据是直接写在服务端的，真正的应用是从数据库里取出的用户名数据，来和接收客户端的数据进行对比。
2、在验证checkbox和radio控件时，验证信息不会出现在最后的控件文本后面，而是直接跟在第一个控件的后面，不符合我们的要求。

解决办法是在validate({})追加以下代码：

errorPlacement: function(error, element) { 
  if ( element.is(":radio") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is(":checkbox") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is("input[name=captcha]") ) 
    error.appendTo ( element.parent() ); 
  else 
    error.insertAfter(element); 
} 

3、重置表单。Form表单原始的重置方法是reset自带

<input type="reset" value="重 置" /> 

点击“重置”按钮，表单元素将会重置，但是再运行Validation插件后，验证的提示信息并没重置，就是那些提示信息没有消失。感谢Validation提供了重置表单的方法：resetForm()

$("input:reset").click(function(){ 
  validate.resetForm(); 
});