cari

Rumah >hujung hadapan web >tutorial js >Pengalaman awal dengan jQuery Validate (1)_jquery

Pengalaman awal dengan jQuery Validate (1)_jquery

WBOY
WBOYasal
2016-05-16 15:26:081352semak imbas

jQuery ialah perpustakaan JavaScript yang pantas dan ringkas yang memudahkan melintasi fail HTML, pemprosesan acara, animasi dan interaksi Ajax, sekali gus memudahkan pembangunan pesat pengeluaran halaman web. jQuery direka untuk mengubah cara anda menulis JavaScript.

Pemalam jQuery Validate menyediakan fungsi pengesahan yang berkuasa untuk borang, menjadikan pengesahan borang pihak pelanggan lebih mudah.

Tetapi dalam proses pembelajaran, saya juga menghadapi keraguan Banyak contoh di Internet nampaknya bergantung pada perpustakaan jquery.metadata.js, dan kemudian tulis class="required remote" dalam teg gaya persembahan kini dilampirkan dengan pelbagai peraturan pengesahan, yang kelihatan agak kemas. Jadi bagaimana untuk menulisnya jika anda tidak bergantung pada jquery.metadata.js.

1. Hanya perkenalkan jquery.js (pilih versi tertentu sendiri) dan 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>

Ternyata pengesahan borang mudah boleh diselesaikan dengan hanya memperkenalkan dua fail JS di atas.

2 Walau bagaimanapun, memandangkan maklumat gesaan lalai adalah dalam bahasa Inggeris, untuk mendapatkan gesaan mesra, perkara seterusnya yang perlu dilakukan ialah memaparkan maklumat gesaan dalam bahasa Cina.

Kaedah 1. Sesuaikan maklumat segera melalui 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>

Pertama terdapat panggilan kaedah: $("#registerForm").validate([options]) Ini ialah borang yang digunakan untuk mengesahkan pemilihan Parameter kaedah adalah pilihan dan anda boleh memasukkan 0 atau lebih nilai kunci . Untuk (kunci/nilai), kaedah ini adalah untuk mengendalikan, contohnya: serahkan, fokus, kekunci, kabur, klik yang mencetuskan pengesahan takrifkan elemen untuk pengesahan dan gunakan errorClass , errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle untuk mengawal paparan mesej ralat untuk unsur haram. Antaranya, anda juga boleh memasukkan 0 atau lebih pasangan nilai kunci dalam peraturan, dan kuncinya sepadan dengan nilai atribut nama elemen, seperti nama pengguna, kata laluan pengesahan, dsb. Dan nilainya mengandungi beberapa peraturan pengesahan. Seperti peraturan, mesej boleh memasukkan 0 atau lebih pasangan nilai kunci Kuncinya juga merupakan nilai atribut nama bagi elemen yang sepadan, dan nilainya ialah mesej ralat pengesahan. Ringkasnya, kaedah dalam peraturan{} mentakrifkan peraturan pengesahan. Output ralat ditakrifkan dalam mesej{}.

Satu perkara yang perlu diperhatikan di atas ialah equalTo: "#cpassword". Nilai dalam pasangan nilai kunci ini ialah nilai ID elemen (anda sepatutnya dapat mengesannya jika anda melihat tanda #).

Dengan kaedah penulisan di atas, anda boleh menyesuaikan maklumat segera. Mungkin anda mempunyai soalan, adakah saya perlu menyesuaikan semula maklumat segera setiap kali saya mengesahkan borang? Sudah tentu tidak, anda juga boleh Ctrl C Ctrl V. Sudah tentu ini adalah gurauan. . . Walau bagaimanapun, kaedah kedua seterusnya akan menyelesaikan keraguan anda.

Kaedah 2: Sesuaikan mesej gesaan dan simpan sebagai fail JS. Hanya gunakannya sebagai templat dan import terus pada halaman yang diperlukan. Saya memuat turun salinan dari 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} 的数值")
});
}));

Kod halaman hampir sama dengan JV1.HTML, kecuali fail JS tambahan diperkenalkan. 

<!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>

Les méthodes 1 et 2 ne s'excluent pas mutuellement et peuvent être utilisées en combinaison. Vous pouvez d'abord utiliser la deuxième méthode pour enregistrer un modèle plus général, puis utiliser la première méthode pour personnaliser les invites en fonction de situations spécifiques.

Ce qui précède est ce que j’ai appris cet après-midi. On dit que dans la nouvelle version, il existe une nouvelle façon d'écrire. Il n'est pas nécessaire de s'appuyer sur la bibliothèque jquery.metadata.js mentionnée ci-dessus, ni de personnaliser les informations d'invite via javascript. La règle est utilisée dans la balise, les informations data-msg-prompt pour la redéfinir dans ce format. J'ai hâte d'essayer...

Voici les règles de vérification par défaut fournies par le site officiel.

(1)obligatoire : vrai champ obligatoire
(2)remote :"check.php" Utilisez la méthode ajax pour appeler check.php pour vérifier la valeur d'entrée
(3)email:true Vous devez saisir un email au bon format
(4)url:true Vous devez saisir l'URL dans le bon format
(5)date:true Vous devez saisir la date dans le bon format
(6)dateISO:true Vous devez saisir la date (ISO) dans le bon format, par exemple : 2009-06-23, 1998/01/22 Seul le format est vérifié, pas la validité
(7)numéro : vrai Vous devez saisir un numéro légal (nombre négatif, décimal)
(8)chiffres : vrai doit saisir un entier
(9)carte de crédit : Un numéro de carte de crédit légal doit être saisi
(10)equalTo:"#field" La valeur d'entrée doit être la même que #field
(11)accepter : saisissez une chaîne avec un suffixe légal (le suffixe du fichier téléchargé)
(12)maxlength:5 Saisissez une chaîne d'une longueur maximale de 5 (les caractères chinois comptent pour un caractère)
(13)minlength:10 Saisissez une chaîne d'une longueur minimale de 10 (les caractères chinois comptent pour un caractère)
(14)rangelength :[5,10] La longueur d'entrée doit être une chaîne comprise entre 5 et 10") (les caractères chinois comptent pour un caractère)
(15)range :[5,10] La valeur d'entrée doit être comprise entre 5 et 10
(16)max:5 La valeur d'entrée ne peut pas être supérieure à 5
(17)min:10 La valeur d'entrée ne peut pas être inférieure à 10

D'accord, après avoir tâtonné pendant près de deux heures, mon premier essai est maintenant terminé. En même temps, j’espère que cela pourra inspirer tout le monde.

Le prochain article vous présentera l'expérience préliminaire de jQuery Validate (2), Apprenons ensemble.

Kenyataan：
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
Artikel sebelumnya：Penjelasan terperinci tentang objek RegExp bagi kemahiran JavaScript regular expressions_javascriptArtikel seterusnya：Penjelasan terperinci tentang objek RegExp bagi kemahiran JavaScript regular expressions_javascript

Artikel berkaitan

Lihat lagi