Premiers pas avec l'utilisation de base de jquery validate form validation_jquery

1. Introduction au plug-in jQuery Validate

Le plug-in jQuery Validate fournit de puissantes fonctions de validation pour les formulaires, facilitant la validation des formulaires côté client, tout en fournissant un grand nombre d'options de personnalisation pour répondre aux divers besoins des applications. Le plugin regroupe un ensemble de méthodes de validation utiles, notamment la validation d'URL et d'e-mails, et fournit une API pour écrire des méthodes définies par l'utilisateur. Toutes les méthodes groupées utilisent par défaut l'anglais pour les messages d'erreur et ont été traduites dans 37 autres langues.

Ce plugin est écrit et maintenu par Jörn Zaefferer, membre de l'équipe jQuery, développeur principal de l'équipe jQuery UI et responsable de QUnit.

• Site officiel : http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• Documentation en ligne : http://docs.jquery.com/Plugins/Validation
• API en ligne : http://jquery.bassistance.de/api-browser/plugins.html

2. Introduction aux fonctionnalités de jQuery Validate

jQuery Validate possède les fonctionnalités suivantes :

(1) Règles de vérification intégrées

Le puissant plug-in de validation de formulaire jQuery convient à la vérification quotidienne des e-mails, des numéros de téléphone, des URL, etc. et à la vérification Ajax. En plus de ses propres règles de validation riches, vous pouvez également ajouter des règles de validation personnalisées.

Compatible avec IE 6, Chrome, Firefox, Safari, Opera 10

(2) Règles de vérification personnalisées

(3) Invite d'informations simple et puissante.

(4) Vérification en temps réel : la vérification est déclenchée par des événements de saisie ou de flou, et pas seulement lors de la soumission.
3. Exemples simples pour apprendre jQuery Validate

Le principe de ces exemples est de présenter la bibliothèque jQuery et le plug-in de validation.

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

1. Utilisez des plug-ins pour effectuer quelques vérifications simples

<title>jQuery PlugIn -一个简单带验证例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../../dist/jquery.validate.js"></script>
<script type="text/javascript" src="../../dist/localization/messages_zh.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size:13px; }
input[type='text']{width:200px;}
textarea{width:155px;}
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
 $("#commentForm").validate();
});
</script>



<form id="commentForm" method="get" action="">
<fieldset>
<legend>表单验证</legend>
<p><label>Name</label><input name="name" class="required" maxlength="4" minlength="2"></p>
<p><label>E-Mail</label><input name="email" class="required email"></p>
<p><label>URL</label><input name="url" class="url"></p>
<p><label>text</label><textarea name="text" cols="22" class="required"></textarea></p>
<p><input class="submit" type="submit" value="提交"></p>
</fieldset>
</form>

L'effet est le suivant :

Explication de la vérification ci-dessus :
1) Tout d’abord, vous devez introduire jquery-1.11.1.js, car ce plug-in est basé sur JQuery.
2). Introduisez le plug-in de validation jquery.validate.js.
3), introduisez un script de localisation rapide. Pour l'internationalisation des informations de vérification, l'invite de vérification par défaut est en anglais. L'internationalisation peut être réalisée en important le fichier d'internationalisation qui a été écrit par validation. Modifiez le style d’affichage des messages d’erreur/correct.
4) Ajoutez le type à vérifier dans l'attribut class de la zone de saisie. Pour différents champs, codez les règles de vérification et définissez les attributs correspondants des champs

Certains types de règles vérifiables :  

(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

5), déterminer quel formulaire doit être vérifié

<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
 $("#commentForm").validate();
});
//]]>
</script>

Ce qui précède est l'apprentissage d'introduction à la vérification du formulaire de validation jquery. J'espère que cela sera utile à l'apprentissage de chacun.