Erste Schritte mit jQuery. Validieren Sie das Formular validation_jquery

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>

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}.")
},

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

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();
});



 

  Firstname
  
 
 

 E-Mail
 
 
 

 Password
 
 
 

 确认密码
 
 
 

  
 

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:'请输入内容'}}"

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'}"

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: "两次输入密码不一致不一致"
 }
 }
 });
});

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>

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.