recherche

Maison >interface Web >js tutoriel >Première expérience avec jQuery Validate (1)_jquery

Première expérience avec jQuery Validate (1)_jquery

WBOY
WBOYoriginal
2016-05-16 15:26:081376parcourir

jQuery est une bibliothèque JavaScript simple et rapide qui simplifie la traversée des fichiers HTML, le traitement des événements, l'animation et l'interaction Ajax, facilitant ainsi le développement rapide de la production de pages Web. jQuery est conçu pour changer la façon dont vous écrivez du JavaScript.

Le plug-in jQuery Validate fournit de puissantes fonctions de validation pour les formulaires, facilitant ainsi la validation des formulaires côté client.

Mais dans le processus d'apprentissage, j'ai aussi rencontré des doutes. De nombreux exemples sur Internet semblent s'appuyer sur la bibliothèque jquery.metadata.js, puis écrire class="required remote" dans la balise La classe elle-même est The. le style de présentation est désormais associé à diverses règles de vérification, ce qui semble un peu brouillon. Alors, comment l'écrire si vous ne comptez pas sur jquery.metadata.js.

1. Introduisez uniquement jquery.js (choisissez vous-même la version spécifique) et jquery.validate.js

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

Il s'avère qu'une simple vérification de formulaire peut être effectuée en introduisant uniquement les deux fichiers JS ci-dessus.

2. Cependant, étant donné que les informations d'invite par défaut sont en anglais, afin d'avoir une invite conviviale, la prochaine chose à faire est d'afficher les informations d'invite en chinois.

Méthode 1. Personnalisez les informations d'invite via javascript. 

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate({
  rules : {
  username : {
   required : true,
   rangelength:[2,10]
  },
  password : {
   required : true,
   minlength:6
  },
  confirmpassword : {
   required : true,
   equalTo:"#cpassword"
  },
  email : {
   required : true,
   email : true
  }
  },
  messages : {
  username : {
   required : '请输入姓名',
   rangelength:'长度在 {0} 到 {1} 之间'
  },
  password : {
   required : '请输入密码',
   minlength:'密码不能少于 {0}位'
  },
  confirmpassword : {
   required : '请再次输入密码',
   equalTo:'两次输入的密码不一致'
  },
  email : {
   required :'请输入邮箱',
   email : '请输入有效的电子邮件地址'
  }
  }
 });
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text"/>
  </p>
  <p>
  <label for="cpassword">密码</label> 
  <input id="cpassword" name="password" type="password"/>
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password"/>
  </p>
  <p>
  <label for="cemail">邮箱</label>
  <input id="cemail" name="email" type="email"/>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

Il y a d'abord un appel de méthode : $("#registerForm").validate([options]) C'est le formulaire utilisé pour vérifier la sélection. Les paramètres de la méthode sont facultatifs et vous pouvez saisir 0 ou plusieurs valeurs clés. . Pour (clé/valeur), cette méthode consiste à gérer, par exemple : soumettre, focus, keyup, flou, clic qui déclenche la validation. L'objet est un élément du formulaire entier, ou un seul élément pour utiliser des règles et des messages. définissez les éléments à valider et utilisez errorClass , errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle pour contrôler l'affichage des messages d'erreur pour les éléments illégaux. Parmi eux, vous pouvez également saisir 0 ou plusieurs paires clé-valeur dans les règles, et sa clé correspond à la valeur de l'attribut de nom de l'élément, tel que le nom d'utilisateur, le mot de passe de confirmation, etc. Et sa valeur contient quelques règles de vérification. Comme les règles, les messages peuvent saisir 0 ou plusieurs paires clé-valeur. Sa clé est également la valeur de l'attribut de nom de l'élément correspondant et sa valeur est le message d'erreur de vérification. En bref, les méthodes dans Rules{} définissent des règles de validation. La sortie d'erreur est définie dans les messages{}.

Une chose à noter ci-dessus est equalTo : "#cpassword". La valeur dans cette paire clé-valeur est la valeur ID de l'élément (vous devriez pouvoir la détecter si vous remarquez le signe #).

Avec la méthode d'écriture ci-dessus, vous pouvez personnaliser les informations d'invite. Peut-être avez-vous des questions : dois-je re-personnaliser les informations d'invite à chaque fois que je vérifie le formulaire ? Bien sûr que non, vous pouvez également Ctrl C Ctrl V. Bien sûr, c'est une blague. . . Cependant, la deuxième méthode suivante résoudra vos doutes.

Méthode 2 : personnalisez un message d'invite et enregistrez-le sous forme de fichier JS. Utilisez-le simplement comme modèle et importez-le directement sur la page requise. J'en ai téléchargé une copie sur Internet. 

(function( factory ) {
 if ( typeof define === "function" && define.amd ) {
 define( ["jquery", "../jquery.validate"], factory );
 } else {
 factory( jQuery );
 }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
 required: "这是必填字段",
 remote: "请修正此字段",
 email: "请输入有效的电子邮件地址",
 url: "请输入有效的网址",
 date: "请输入有效的日期",
 dateISO: "请输入有效的日期 (YYYY-MM-DD)",
 number: "请输入有效的数字",
 digits: "只能输入数字",
 creditcard: "请输入有效的信用卡号码",
 equalTo: "你的输入不相同",
 extension: "请输入有效的后缀",
 maxlength: $.validator.format("最多可以输入 {0} 个字符"),
 minlength: $.validator.format("最少要输入 {0} 个字符"),
 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
 max: $.validator.format("请输入不大于 {0} 的数值"),
 min: $.validator.format("请输入不小于 {0} 的数值")
});
}));

Le code de la page est presque exactement le même que JV1.HTML, sauf qu'un fichier JS supplémentaire est introduit. 

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script> 
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

방법 1과 2는 서로 배타적이지 않으며 조합하여 사용할 수 있습니다. 먼저 방법 2를 사용하여 보다 일반적인 템플릿을 저장한 다음 방법 1을 사용하여 특정 상황에 따라 프롬프트를 사용자 정의할 수 있습니다.

위 내용은 제가 오늘 오후에 배운 내용입니다. 새 버전에서는 위에서 언급한 jquery.metadata.js 라이브러리에 의존할 필요도 없고 대신에 데이터 규칙 검증을 통해 프롬프트 정보를 맞춤화할 필요도 없다고 합니다. 규칙은 태그, data-msg-prompt 정보에 사용되어 이 형식으로 재정의됩니다. 시도해보고 싶습니다...

다음은 공식 홈페이지에서 제공하는 기본 인증 규칙입니다.

(1)필수:true 필수 필드
(2)remote:"check.php" ajax 메소드를 사용하여 check.php를 호출하여 입력값을 확인합니다
(3)email:true 이메일을 올바른 형식으로 입력해야 합니다
(4)url:true URL을 올바른 형식으로 입력해야 합니다
(5)date:true 날짜를 올바른 형식으로 입력해야 합니다
(6)dateISO:true 날짜(ISO)를 올바른 형식으로 입력해야 합니다. 예: 2009-06-23, 1998/01/22 형식만 확인되며 유효성은 확인되지 않습니다
(7)number:true 유효한 숫자(음수, 소수)를 입력해야 합니다
(8)digits:true는 정수를 입력해야 합니다
(9)신용카드 : 적법한 신용카드 번호를 입력해야 합니다
(10)equalTo:"#field" 입력 값은 #field
와 동일해야 합니다. (11)accept: 법적 접미사(업로드된 파일의 접미사)가 포함된 문자열을 입력하세요.
(12)maxlength:5 최대 5자까지의 문자열을 입력하세요. (한자는 1자로 계산됩니다.)
(13)minlength:10 최소 10자 이상의 문자열을 입력하세요. (한자는 1자로 계산됩니다.)
(14)rangelength:[5,10] 입력 길이는 5~10" 사이의 문자열이어야 합니다. (한자는 1자로 계산됩니다.)
(15)range:[5,10] 입력 값은 5에서 10 사이여야 합니다
(16)max:5 입력값은 5보다 클 수 없습니다
(17)min:10 입력값은 10보다 작을 수 없습니다

자, 거의 두 시간 동안 더듬은 끝에 이제 첫 번째 에세이가 완성되었습니다. 동시에 모든 사람에게 영감을 줄 수 있기를 바랍니다.

다음 글에서는 jQuery Validate 예비 경험(2), 함께 배워보겠습니다.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'objet RegExp des compétences JavaScript expressions régulières_javascriptArticle suivant：Explication détaillée de l'objet RegExp des compétences JavaScript expressions régulières_javascript

Articles Liés

Voir plus