suchen

Heim  >  Artikel  >  Web-Frontend  >  Erfahren Sie mehr über jQuery Validate form validation_jquery

Erfahren Sie mehr über jQuery Validate form validation_jquery

WBOY
WBOYOriginal
2016-05-16 15:19:341472Durchsuche

Das Beispiel in diesem Artikel stellt die Überprüfung des jQuery-Validierungsformulars vor. Es verwendet hauptsächlich jquery.metadata.js, um die Überprüfungsregeln direkt in das Klassenattribut zu schreiben und es für Ihre Referenz mit allen zu teilen ist wie folgt

1. Fügen Sie ein weiteres Plug-in jquery.metadata.js hinzu und schreiben Sie die Überprüfungsregeln in das Steuerelement.
2. Die Methode zum Auslösen der Überprüfung muss neu geschrieben werden. 

$("#commentForm").validate({meta: "validate"});

3. Der detaillierte Code lautet wie folgt: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

Standardverifizierungsregeln:

  • (1)required:true Erforderliche Felder
  • (2)remote:"check.php" Verwenden Sie die Ajax-Methode, um check.php aufzurufen, um den Eingabewert zu überprüfen
  • (3)email:true Sie müssen eine E-Mail im richtigen Format eingeben
  • (4)url:true Sie müssen die URL im richtigen Format eingeben
  • (5)date:true Sie müssen das Datum im richtigen Format eingeben. Es liegt ein Fehler bei der Datumsüberprüfung vor, z. B. 6, mit Vorsicht verwenden
  • (6)dateISO:true Sie müssen das Datum (ISO) im richtigen Format eingeben, zum Beispiel: 23.06.2009, 22.01.1998 Nur das Format wird überprüft, nicht das Gültigkeit
  • (7)number:true Sie müssen eine gültige Zahl (negative Zahl, Dezimalzahl) eingeben
  • (8)digits:true Sie müssen eine Ganzzahl eingeben
  • (9)Kreditkarte: Sie müssen eine gültige Kreditkartennummer eingeben
  • (10)equalTo:"#field" Der Eingabewert muss mit #field identisch sein
  • (11) Akzeptieren: Geben Sie eine Zeichenfolge mit einem legalen Suffix ein (das vom Suffix der Datei abhängt)
  • (12)maxlength:5 Geben Sie eine Zeichenfolge mit einer maximalen Länge von 5 ein (chinesische Zeichen zählen als ein Zeichen)
  • (13)minlength:10 Geben Sie eine Zeichenfolge mit einer Mindestlänge von 10 ein (chinesische Zeichen zählen als ein Zeichen)
  • (14)rangelength:[5,10] Die Eingabelänge muss eine Zeichenfolge zwischen 5 und 10 Zoll sein (chinesische Zeichen zählen als ein Zeichen)
  • (15)range:[5,10] Der Eingabewert muss zwischen 5 und 10 liegen
  • (16)max:5                                                                                                                                                                                                      Der Eingabewert darf nicht größer als 5 sein (17)min:10 Der Eingabewert darf nicht kleiner als 10 sein

  • Standardaufforderung:


4. Die Darstellung ist wie folgt: 
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}.")
},

5. Hinweis:

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




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


6. Definieren Sie Fehlermeldungen direkt im Klassenattribut. 
class="{required:true,minlength:5,equalTo:'#password'}"


7. Kesannya adalah seperti berikut:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari pengesahan borang jQuery Baru-baru ini, banyak artikel tentang pengesahan borang jQuery telah dikemas kini.

Stellungnahme：
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
Vorheriger Artikel：Die Validatebox-Validierungsregelerweiterung von jQuery Easyui und die Easyui-Validierungsbox Validatebox Usage_jqueryNächster Artikel：Die Validatebox-Validierungsregelerweiterung von jQuery Easyui und die Easyui-Validierungsbox Validatebox Usage_jquery

In Verbindung stehende Artikel

Mehr sehen