Rumah > hujung hadapan web > tutorial js > Bermula dengan penggunaan asas jquery validate form validation_jquery

Bermula dengan penggunaan asas jquery validate form validation_jquery

WBOY
Lepaskan: 2016-05-16 15:19:29
asal
1223 orang telah melayarinya

1. Pengenalan kepada jQuery Validate plug-in

Pemalam jQuery Validate menyediakan fungsi pengesahan yang berkuasa untuk borang, menjadikan pengesahan borang sebelah pelanggan lebih mudah, sambil menyediakan sejumlah besar pilihan penyesuaian untuk memenuhi pelbagai keperluan aplikasi. Pemalam ini menggabungkan satu set kaedah pengesahan yang berguna, termasuk URL dan pengesahan e-mel, dan menyediakan API untuk menulis kaedah yang ditentukan pengguna. Semua kaedah yang digabungkan menggunakan bahasa Inggeris untuk mesej ralat secara lalai dan telah diterjemahkan ke dalam 37 bahasa lain.

Pemalam ini ditulis dan diselenggara oleh Jörn Zaefferer, ahli pasukan jQuery, pembangun utama dalam pasukan UI jQuery dan penyelenggara QUnit.

2. Pengenalan kepada ciri jQuery Validate

jQuery Validate mempunyai ciri-ciri berikut:

(1) Peraturan pengesahan terbina dalam;

Pemalam pengesahan borang jQuery yang berkuasa sesuai untuk pengesahan harian e-mel, nombor telefon, URL, dsb. dan pengesahan Ajax Selain peraturan pengesahannya sendiri, anda juga boleh menambah peraturan pengesahan tersuai.

Serasi dengan IE 6, Chrome, Firefox, Safari, Opera 10

(2) Peraturan pengesahan tersuai;

(3) Gesaan maklumat yang ringkas dan berkuasa.

(4) Pengesahan masa nyata: Pengesahan dicetuskan melalui acara keyup atau kabur, bukan hanya selepas penyerahan.


3. Contoh mudah untuk mempelajari jQuery Valid

Premis contoh ini adalah untuk memperkenalkan perpustakaan jQuery dan pemalam Pengesahan.

 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>
Salin selepas log masuk

1. Gunakan pemalam untuk melakukan beberapa pengesahan mudah



 jQuery PlugIn -一个简单带验证例子
 
 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>
 
 
 <script>
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>


 
 
表单验证

Salin selepas log masuk
Kesannya adalah seperti berikut:

Penjelasan pengesahan di atas:

1) Mula-mula, anda perlu memperkenalkan jquery-1.11.1.js, kerana pemalam ini adalah berdasarkan JQuery.
2). Perkenalkan pemalam pengesahan jquery.validate.js.
3), memperkenalkan skrip penyetempatan segera. Untuk pengantarabangsaan maklumat pengesahan, gesaan pengesahan lalai adalah dalam bahasa Inggeris Pengantarabangsaan boleh dicapai dengan mengimport fail pengantarabangsaan yang telah ditulis melalui pengesahan. Tukar ralat/gaya paparan mesej yang betul.
4) Tambahkan jenis yang akan disahkan dalam atribut kelas kotak input. Untuk medan yang berbeza, kodkan peraturan pengesahan dan tetapkan atribut medan yang sepadan

Beberapa jenis peraturan yang boleh disahkan:  


(1)required:true 必输字段 
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值 
(3)email:true 必须输入正确格式的电子邮件(只能验证格式,不保证有效性) 
(4)url:true 必须输入正确格式的网址 
(5)date:true 必须输入正确格式的日期 
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 
(7)number:true 必须输入合法的数字(负数,小数) 
(8)digits:true 必须输入整数 
(9)creditcard: 必须输入合法的信用卡号 
(10)equalTo:"#field" 输入值必须和#field相同 
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀) 
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) 
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 
(15)range:[5,10] 输入值必须介于 5 和 10 之间 
(16)max:5 输入值不能大于5 
(17)min:10 输入值不能小于10
Salin selepas log masuk
5), tentukan borang yang perlu disahkan


<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
 $("#commentForm").validate();
});
//]]>
</script>
Salin selepas log masuk
Di atas adalah pembelajaran pengenalan untuk pengesahan borang pengesahan jquery Saya harap ia akan membantu pembelajaran semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan