suchen

Heim >Web-Frontend >js-Tutorial >Das Formularvalidierungs-Plug-in jQuery Validate fügt eine Überprüfung in Form der Klasse attribute_jquery hinzu

Das Formularvalidierungs-Plug-in jQuery Validate fügt eine Überprüfung in Form der Klasse attribute_jquery hinzu

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

Das Beispiel in diesem Artikel stellt das jQuery Validate-Formularüberprüfungs-Plug-in vor, fügt die Überprüfung in Form von Klassenattributen hinzu und teilt es als Referenz mit allen. Der spezifische Inhalt ist wie folgt.
Der Effekt ist wie folgt:

1. jQuery-Formularvalidierungs-Plug-in, Überprüfung in Form von Klassenattributen hinzufügen

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----添加class属性形式的校验</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.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();
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----添加class属性形式的校验</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25" class="required email" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" class="url" value="" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>


2. Standardregeln
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, dh6, verwenden Sie es mit Vorsicht
  • (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 eingeben (negative Zahl, Dezimalzahl)
  • (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
    • 3bb3ba5d8a8c1e677360c9d603cb067b

  • (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                                                                                                                                                                 

  • (17)min:10 Der Eingabewert darf nicht kleiner als 10 sein
  • Standardaufforderung:


Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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：jquery.validate Benutzerdefinierte Validierungsmethoden und Validierung zugehöriger Parameter_jqueryNächster Artikel：jquery.validate Benutzerdefinierte Validierungsmethoden und Validierung zugehöriger Parameter_jquery

In Verbindung stehende Artikel

Mehr sehen