Heim > Web-Frontend > js-Tutorial > Hauptteil

Erste Schritte mit jQuery. Validieren Sie das Formular validation_jquery

WBOY
Freigeben: 2016-05-16 15:24:53
Original
1181 Leute haben es durchsucht

Dieser Artikel beschreibt die Grundkenntnisse für den Einstieg in die jQuery Validate-Formularvalidierung. Das jQuery Validate-Plug-in bietet leistungsstarke Validierungsfunktionen für Formulare, die die clientseitige Formularvalidierung erleichtern Verschiedene Anwendungsanforderungen. Im Folgenden finden Sie den gesamten Inhalt dieses Artikels, der speziell für alle freigegeben wird.

1. js-Bibliothek importieren

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
Nach dem Login kopieren

2. Standard-Verifizierungsregeln

3. Standard-Eingabeaufforderung

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}.")
},
Nach dem Login kopieren

Wenn Sie es ändern müssen, können Sie es dem js-Code hinzufügen:

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} 的值")
});
Nach dem Login kopieren

Die empfohlene Vorgehensweise besteht darin, diese Datei in „messages_cn.js“ abzulegen und in die Seite einzufügen:

4. So verwenden Sie
1). Schreiben Sie die Verifizierungsregeln in die Steuerung

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


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


Nach dem Login kopieren

Um class="{}" zu verwenden, muss das Paket importiert werden: jquery.metadata.js.
Sie können den Inhalt der Eingabeaufforderung mit der folgenden Methode ändern:

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

Bei Verwendung des Schlüsselworts equalTo muss der folgende Inhalt in Anführungszeichen gesetzt werden. Der Code lautet wie folgt:

class="{required:true,minlength:5,equalTo:'#password'}"
Nach dem Login kopieren

2), schreiben Sie die Verifizierungsregeln in den js-Code

$().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: "两次输入密码不一致不一致"
 }
 }
 });
});
Nach dem Login kopieren

Nachrichten: Wenn ein Steuerelement keine Nachricht hat, wird die Standardnachricht
genannt

<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>
Nach dem Login kopieren

required:true muss einen Wert haben.
erforderlich:"#aa:checked" Wenn der Wert des Ausdrucks wahr ist, ist eine Überprüfung erforderlich.
„required:function(){}“ gibt „true“ zurück, was darauf hinweist, dass eine Validierung erforderlich ist.
Die beiden letztgenannten werden häufig für Elemente im Formular verwendet, die gleichzeitig ausgefüllt oder weggelassen werden müssen.

Das Obige ist der gesamte Inhalt dieses Artikels, der das Einführungswissen zur jQuery Validate-Formularüberprüfung vorstellt. Danach folgt eine eingehende Untersuchung der jQuery Validate-Formularüberprüfung.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage