Premiers pas avec jQuery Valider le formulaire validation_jquery

Cet article décrit les connaissances de base pour démarrer avec la validation de formulaire jQuery Validate. Le plug-in jQuery Validate fournit de puissantes fonctions de validation pour les formulaires, facilitant ainsi la validation des formulaires côté client. diverses exigences d'application, voici l'intégralité du contenu de cet article, spécialement partagé avec tout le monde.

1. Importer la bibliothèque js

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

2. Règles de vérification par défaut

3. Invite par défaut

messages: {
 required: "This field is required.",
 remote: "Please fix this field.",
 email: "Please enter a valid email address.",
 url: "Please enter a valid URL.",
 date: "Please enter a valid date.",
 dateISO: "Please enter a valid date (ISO).",
 dateDE: "Bitte geben Sie ein gültiges Datum ein.",
 number: "Please enter a valid number.",
 numberDE: "Bitte geben Sie eine Nummer ein.",
 digits: "Please enter only digits",
 creditcard: "Please enter a valid credit card number.",
 equalTo: "Please enter the same value again.",
 accept: "Please enter a value with a valid extension.",
 maxlength: $.validator.format("Please enter no more than {0} characters."),
 minlength: $.validator.format("Please enter at least {0} characters."),
 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
 range: $.validator.format("Please enter a value between {0} and {1}."),
 max: $.validator.format("Please enter a value less than or equal to {0}."),
 min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

Si vous devez le modifier, vous pouvez l'ajouter au code js :

jQuery.extend(jQuery.validator.messages, {
 required: "必选字段",
 remote: "请修正该字段",
 email: "请输入正确格式的电子邮件",
 url: "请输入合法的网址",
 date: "请输入合法的日期",
 dateISO: "请输入合法的日期 (ISO).",
 number: "请输入合法的数字",
 digits: "只能输入整数",
 creditcard: "请输入合法的信用卡号",
 equalTo: "请再次输入相同的值",
 accept: "请输入拥有合法后缀名的字符串",
 maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
 minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
 rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
 range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
 max: jQuery.validator.format("请输入一个最大为{0} 的值"),
 min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

La pratique recommandée est de mettre ce fichier dans messages_cn.js et de l'introduire dans la page :

4. Comment utiliser
1). Écrivez les règles de vérification dans le contrôle

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


$().ready(function() {
 $("#signupForm").validate();
});



 

  Firstname
  
 
 

 E-Mail
 
 
 

 Password
 
 
 

 确认密码
 
 
 

  
 

Pour utiliser class="{}", le package doit être importé : jquery.metadata.js.
Vous pouvez utiliser la méthode suivante pour modifier le contenu de l'invite :

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

Lors de l'utilisation du mot-clé égalÀ, le contenu suivant doit être mis entre guillemets. Le code est le suivant :

class="{required:true,minlength:5,equalTo:'#password'}"

2), écrire les règles de vérification dans le code js

$().ready(function() {
 $("#signupForm").validate({
  rules: {
 firstname: "required",
 email: {
 required: true,
 email: true
 },
 password: {
 required: true,
 minlength: 5
 },
 confirm_password: {
 required: true,
 minlength: 5,
 equalTo: "#password"
 }
 },
  messages: {
 firstname: "请输入姓名",
 email: {
 required: "请输入Email地址",
 email: "请输入正确的email地址"
 },
 password: {
 required: "请输入密码",
 minlength: jQuery.format("密码不能小于{0}个字 符")
 },
 confirm_password: {
 required: "请输入确认密码",
 minlength: "确认密码不能小于5个字符",
 equalTo: "两次输入密码不一致不一致"
 }
 }
 });
});

messages, si un champ n'a pas de message, le message par défaut sera appelé

<form id="signupForm" method="get" action="">
 <p>
  <label for="firstname">Firstname</label>
  <input id="firstname" name="firstname" />
 </p>
 <p>
 <label for="email">E-Mail</label>
 <input id="email" name="email" />
 </p>
 <p>
 <label for="password">Password</label>
 <input id="password" name="password" type="password" />
 </p>
 <p>
 <label for="confirm_password">确认密码</label>
 <input id="confirm_password" name="confirm_password" type="password" />
 </p>
 <p>
  <input class="submit" type="submit" value="Submit"/>
 </p>
</form>

obligatoire :true doit avoir une valeur.
requis : "#aa:checked" Si la valeur de l’expression est vraie, une vérification est requise.
requirejs:function(){} renvoie true, indiquant qu'une validation est requise.
Ces deux derniers sont souvent utilisés pour les éléments du formulaire qui doivent être remplis ou omis en même temps.

Ce qui précède est l'intégralité du contenu de cet article, qui présente les connaissances introductives de la vérification du formulaire jQuery Validate. Après cela, il y aura une étude approfondie de la vérification du formulaire jQuery Validate.