Erste Erfahrungen mit jQuery Validate (1)

jQuery ist eine schnelle und einfache JavaScript-Bibliothek, die das Durchlaufen von HTML-Dateien, die Ereignisverarbeitung, Animation und Ajax-Interaktion vereinfacht und so die schnelle Entwicklung der Webseitenproduktion erleichtert. jQuery soll die Art und Weise verändern, wie Sie JavaScript schreiben.

Das jQuery Validate-Plug-in bietet leistungsstarke Validierungsfunktionen für Formulare und erleichtert so die clientseitige Formularvalidierung.

Aber beim Lernen bin ich auch auf Zweifel gestoßen. Viele Beispiele im Internet basieren auf der Bibliothek jquery.metadata.js und schreiben dann class="required remote" in die Klasse selbst Der Präsentationsstil ist jetzt mit verschiedenen Verifizierungsregeln verknüpft, was etwas chaotisch aussieht. So schreiben Sie es, wenn Sie sich nicht auf jquery.metadata.js verlassen.

1. Führen Sie nur jquery.js (wählen Sie die spezifische Version selbst aus) und jquery.validate.js aus

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

Nach dem Login kopieren

Es stellt sich heraus, dass eine einfache Formularüberprüfung abgeschlossen werden kann, indem nur die beiden oben genannten JS-Dateien eingeführt werden.

2. Da die Eingabeaufforderungsinformationen jedoch standardmäßig auf Englisch vorliegen, müssen Sie als Nächstes die Eingabeaufforderungsinformationen auf Chinesisch anzeigen, um eine benutzerfreundliche Eingabeaufforderung zu erhalten.

Methode 1. Passen Sie die Eingabeaufforderungsinformationen über Javascript an.

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

Nach dem Login kopieren

Zuerst gibt es einen Methodenaufruf: $("#registerForm").validate([options]) Dies ist das Formular, das zur Überprüfung der Auswahl verwendet wird. Die Parameter der Methode sind optional und Sie können 0 oder mehr Schlüsselwerte eingeben . Für (Schlüssel/Wert) dient diese Methode zum Beispiel: Senden, Fokussieren, Verwischen, Klicken, um die Validierung auszulösen. Das Objekt ist ein Element des gesamten Formulars oder ein einzelnes Element Definieren Sie die Elemente für die Validierung und verwenden Sie „errorClass“, „errorElement“, „wrapper“, „errorLabelContainer“, „errorContainer“, „showErrors“, „success“, „errorPlacement“, „highlight“, „unhighlight“ und „ignoreTitle“, um die Anzeige von Fehlermeldungen für illegale Elemente zu steuern. Darunter können Sie auch 0 oder mehr Schlüssel-Wert-Paare in Regeln eingeben, und der Schlüssel entspricht dem Namensattributwert des Elements, z. B. Benutzername, Bestätigungskennwort usw. Und sein Wert enthält einige Überprüfungsregeln. Wie Regeln können Nachrichten 0 oder mehr Schlüssel-Wert-Paare eingeben. Ihr Schlüssel ist auch der Namensattributwert des entsprechenden Elements und ihr Wert ist die Überprüfungsfehlermeldung. Kurz gesagt, die Methoden in Rules{} definieren Validierungsregeln. Die Fehlerausgabe wird in Nachrichten{} definiert.

Eine Sache, die Sie oben beachten sollten, ist equalTo: „#cpassword“. Der Wert in diesem Schlüssel-Wert-Paar ist der ID-Wert des Elements (Sie sollten ihn erkennen können, wenn Sie das #-Zeichen bemerken).

Mit der oben genannten Schreibmethode können Sie die Eingabeaufforderungsinformationen anpassen. Vielleicht haben Sie Fragen. Muss ich die Eingabeaufforderungsinformationen jedes Mal neu anpassen, wenn ich das Formular überprüfe? Natürlich nicht, Sie können auch Strg C Strg V drücken. Natürlich ist das ein Witz. . . Die nächste Methode zwei wird Ihre Zweifel jedoch ausräumen.

Methode 2: Passen Sie eine Aufforderungsnachricht an und speichern Sie sie als JS-Datei. Nutzen Sie es einfach als Vorlage und importieren Sie es direkt auf der gewünschten Seite. Ich habe eine Kopie aus dem Internet heruntergeladen.

(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} 的数值")
});
}));

Nach dem Login kopieren

Der Code der Seite ist fast identisch mit JV1.HTML, außer dass eine zusätzliche JS-Datei eingeführt wird.

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

Nach dem Login kopieren

Kaedah 1 dan 2 tidak saling eksklusif dan boleh digunakan secara gabungan. Mula-mula anda boleh menggunakan kaedah dua untuk menyimpan templat yang lebih umum, dan kemudian menggunakan kaedah satu untuk menyesuaikan gesaan mengikut situasi tertentu.

Di atas adalah apa yang saya pelajari petang tadi. Dikatakan bahawa dalam versi baharu, terdapat cara penulisan baharu Tidak perlu bergantung pada pustaka jquery.metadata.js yang disebutkan di atas, mahupun untuk menyesuaikan maklumat segera melalui javascript, sebaliknya, pengesahan peraturan data peraturan digunakan dalam teg , maklumat msg-prompt untuk mentakrifkannya semula dalam format ini. Teruja nak mencuba...

Berikut ialah peraturan pengesahan lalai yang disediakan oleh tapak web rasmi.

(1)diperlukan: medan diperlukan benar
(2)remote:"check.php" Gunakan kaedah ajax untuk memanggil check.php untuk mengesahkan nilai input
(3)email:true Anda mesti memasukkan e-mel dalam format yang betul
(4)url:true Anda mesti memasukkan URL dalam format yang betul
(5)date:true Anda mesti memasukkan tarikh dalam format yang betul
(6)dateISO:true Anda mesti memasukkan tarikh (ISO) dalam format yang betul, contohnya: 2009-06-23, 1998/01/22 Hanya format yang disahkan, bukan kesahihan
(7)nombor:benar Anda mesti memasukkan nombor sah (nombor negatif, perpuluhan)
(8)digit:benar mesti memasukkan integer
(9)kad kredit: Nombor kad kredit yang sah mesti dimasukkan
(10)equalTo:"#field" Nilai input mestilah sama dengan #field
(11)terima: Masukkan rentetan dengan akhiran undang-undang (akhiran fail yang dimuat naik)
(12)maxlength:5 Masukkan rentetan dengan panjang maksimum 5 (aksara Cina dikira sebagai satu aksara)
(13)minlength:10 Masukkan rentetan dengan panjang minimum 10 (aksara Cina dikira sebagai satu aksara)
(14)rangelength:[5,10] Panjang input mestilah rentetan antara 5 dan 10") (Aksara Cina dikira sebagai satu aksara)
(15)julat:[5,10] Nilai input mestilah antara 5 dan 10
(16)maks:5 Nilai input tidak boleh lebih besar daripada 5
(17)min:10 Nilai input tidak boleh kurang daripada 10

Baiklah, setelah meraba-raba hampir dua jam, esei pertama saya kini siap. Pada masa yang sama, saya berharap ia dapat memberi inspirasi kepada semua orang.

Artikel seterusnya akan memperkenalkan anda kepada jQuery Mengesahkan pengalaman awal (2), Jom belajar bersama.

Erste Erfahrungen mit jQuery Validate (1)_jquery