Ausführliche Erläuterung der Verwendung der JQurey-Validierung im Formular validation_jquery

ist ein hervorragendes Plug-in, das Client-Formulare validieren kann und viele anpassbare Eigenschaften und Methoden mit guter Skalierbarkeit bietet. Dieser Artikel dient dazu, die Anwendung der Validierung anhand der Erläuterung dieses Beispiels zu verstehen.

Die in diesem Beispiel beteiligten Überprüfungen sind:

Benutzername: Länge, Zeichenüberprüfung, Wiederholbarkeit Ajax-Überprüfung (ob bereits vorhanden).

Passwort: Längenüberprüfung, wiederholte Passwortüberprüfung.

Mail: Überprüfung der E-Mail-Adresse.

Festnetz: Überprüfung der Festnetznummer auf dem chinesischen Festland.

Mobiltelefonnummer: Überprüfung der Mobiltelefonnummer auf dem chinesischen Festland.

Webadresse: Überprüfung der Website-URL-Adresse.

Datum: Standard-Datumsformatvalidierung.

Zahl: Ganzzahl, positive Ganzzahlüberprüfung, Zahlenbereichsüberprüfung.

Ausweis: Überprüfung der Ausweisnummer auf dem chinesischen Festland.

Postleitzahl: Überprüfung der Postleitzahl des Festlandes.

Datei: Überprüfung des Dateityps (Suffix), zum Beispiel dürfen nur Bilder hochgeladen werden.

IP: IP-Adresse Verifizierung.

Bestätigungscode: Ajax-Verifizierung des Bestätigungscodes.

Anwendung:

1. Bereiten Sie die Plug-ins jquery und jquery.validate vor

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

2. CSS-Stile vorbereiten

Ich werde nicht näher auf den Seitenstil eingehen. Sie können Ihren eigenen Stil schreiben oder auf den Quellcode der DEMO-Seite verweisen. Der hier hervorzuhebende Schlüsselstil ist der Stil zur Anzeige von Verifizierungsinformationen

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; 
background:url(images/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background: 
url(images/checked.gif) no-repeat 2px 0} 

3. XHTML

<form id="myform" action="#" method="post"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> 
 <tr class="table_title"> 
  <td colspan="2">jquery.validation 表单验证</td> 
 </tr> 
 <tr> 
  <td width="22%" align="right">用户名：</td> 
  <td><input type="text" name="user" id="user" class="input required" /> 
  <p>用户名为3-16个字符，可以为数字、字母、下划线以及中文</p></td> 
 </tr> 
 <tr> 
  <td align="right">密码：</td> 
  <td><input type="password" name="pass" id="pass" class="input required" /> 
  <p>最小长度:6 最大长度:16</p> 
  </td> 
 </tr> 
 <tr> 
  <td align="right">确认密码：</td> 
  <td><input type="password" name="repass" class="input required" /></td> 
 </tr> 
</table> 
</form>

Aus Platzgründen fängt dieser Artikel nur einen kleinen Teil des HTML-Codes im Beispiel ab. Den detaillierten XHTML-Code finden Sie auf der Seite DEMO-Quellcode. Es ist erwähnenswert, dass ich der Bezeichnung einen „erforderlichen“ Klassenstil gegeben habe und ihre Rolle im Folgenden erwähnt wird.

4. Validierungs-Plug-in anwenden

Methode zum Aufrufen des Validierungs-Plug-Ins:

$(function(){    
  var validate = $("#myform").validate({ 
     rules:{ //定义验证规则 
      ...... 
     }, 
     messages:{ //定义提示信息 
      ...... 
     } 
  }) 
}); 

Regeln: Definieren Sie Überprüfungsregeln in der Form „Schlüssel:Wert“, wobei „Schlüssel“ das zu überprüfende Element ist und „Wert“ eine Zeichenfolge oder ein Objekt sein kann. Überprüfen Sie beispielsweise die Länge des Benutzernamens und lassen Sie ihn nicht leer sein:

rules:{ 
 user:{ 
   required:true, 
   maxlength:16, 
   minlength:3 
 }, 
 ...... 
} 

Tatsächlich können wir das Klassenattribut der Eingabe nach Bedarf direkt im XHTML-Code angeben. Die Funktion besteht darin, nicht zuzulassen, dass es leer ist, sodass es nicht wiederholt in den JS-Teil geschrieben werden muss. Um E-Mails usw. zu überprüfen, setzen Sie auf die gleiche Weise das Klassenattribut der Eingabe direkt auf E-Mail.

Nachrichten: Definieren Sie Eingabeaufforderungsnachrichten in der Form „Schlüssel:Wert“, wobei „Schlüssel“ das zu überprüfende Element und „Wert“ eine Zeichenfolge oder Funktion ist. Die Nachricht wird angezeigt, wenn die Überprüfung fehlschlägt.

messages:{ 
 user:{ 
   required:"用户名不能为空！", 
   remote:"该用户名已存在，请换个其他的用户名！" 
 }, 
 ...... 
} 

Das in diesem Beispiel verwendete Verifizierungs-JS ist gemäß den oben genannten Regeln geschrieben. Das Validierungs-Plug-in kapselt viele grundlegende Verifizierungsmethoden wie folgt:

erforderlich:true muss einen Wert haben und darf nicht leer sein

remote:url kann verwendet werden, um festzustellen, ob der Benutzername bereits existiert. Der Server gibt true aus, was bedeutet, dass die Überprüfung bestanden wurde

minlength:6 Die Mindestlänge beträgt 6

maxlength:16 Die maximale Länge beträgt 16

rangelength: Längenbereich

Bereich:[10,20] Der Wertebereich liegt zwischen 10 und 20

E-Mail:echte Bestätigungs-E-Mail

url:true Verifizierungs-URL

dateISO:true Überprüfen Sie das Datumsformat „JJJJ-MM-TT“

digits:true kann nur Zahlen sein

accept:'gif|jpg' Akzeptiert nur Bilder mit dem Suffix gif oder jpg. Erweiterungen, die häufig zum Überprüfen von Dateien verwendet werden

equalTo:'#pass' ist gleich dem Formularfeldwert, der häufig zur Überprüfung wiederholter Passworteingaben verwendet wird

Darüber hinaus habe ich mehrere Überprüfungen basierend auf der tatsächlichen Situation des Projekts erweitert. Der Überprüfungscode befindet sich in „validate-ex.js“. Dieser JS muss vor der Verwendung geladen werden. Es bietet die folgende Überprüfung:

userName:true Der Benutzername darf nur chinesische Zeichen, englische Buchstaben, Zahlen und Unterstriche enthalten

isMobile:Verifizierung der echten Mobiltelefonnummer

isPhone: Überprüfung der echten Festland-Handynummer

isZipCode:Überprüfung der echten Postleitzahl

isIdCardNo:true Überprüfung der ID-Nummer des chinesischen Festlandes

ip:Überprüfung der echten IP-Adresse

Die oben bereitgestellten Verifizierungsmethoden erfüllen grundsätzlich unsere Anforderungen in den meisten Projekten. Sollten weitere besondere Nachweisanforderungen bestehen, kann diese wie folgt erweitert werden:

jQuery.validator.addMethod("isZipCode", function(value, element) {   
 var zip = /^[0-9]{6}$/;   
 return this.optional(element) || (zip.test(value));   
}, "请正确填写您的邮政编码!"); 

Fehlerbehebung

1. Bei der Überprüfung, ob der Benutzername im Projekt vorhanden ist, wurde festgestellt, dass die chinesische Eingabeüberprüfung nicht unterstützt wird. Meine Lösung besteht darin, den Benutzernamen mit encodeURIComponent zu kodieren und im Hintergrund PHP dann den akzeptierten Wert

urldekodieren

user:{ 
  remote: { 
     url: "chk_user.php", //服务端验证程序 
     type: "post", //提交方式 
     data: { user: function() { 
       return encodeURIComponent($("#user").val()); //编码数据 
     }} 
  } 
}, 

Code des serverseitigen Verifizierungsprogramms chk_user.php:

<&#63;php 
$request = urldecode(trim($_POST['user'])); 
usleep(150000); 
$users = array('daimajiayuan.com', 'jeymii', 'Peter', 'daimajiayuan'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
&#63;> 

Das Serverprogramm, das ich verwende, ist PHP, Sie können auch ASP, ASP.NET, JAVA usw. verwenden. Darüber hinaus dient dieses Beispiel der Demonstration. Die eigentliche Anwendung besteht darin, die Benutzernamendaten aus der -Datenbank zu entnehmen und mit den vom Client empfangenen Daten zu vergleichen.

2. Bei der Verifizierung von Checkbox- und Funksteuerungen erscheinen die Verifizierungsinformationen nicht nach dem letzten Steuerungstext, sondern direkt nach der ersten Steuerung, was unseren Anforderungen nicht entspricht.

Die Lösung besteht darin, den folgenden Code an „validate({})“ anzuhängen:

errorPlacement: function(error, element) { 
  if ( element.is(":radio") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is(":checkbox") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is("input[name=captcha]") ) 
    error.appendTo ( element.parent() ); 
  else 
    error.insertAfter(element); 
} 

3、重置表单。Form表单原始的重置方法是reset自带

<input type="reset" value="重 置" /> 

点击“重置”按钮，表单元素将会重置，但是再运行Validation插件后，验证的提示信息并没重置，就是那些提示信息没有消失。感谢Validation提供了重置表单的方法：resetForm()

$("input:reset").click(function(){ 
  validate.resetForm(); 
}); 

以上所述就是本文的全部内容了，希望大家能够喜欢。