Beispielerklärung des Formularvalidierungs-Plug-ins Validation application_jquery

jquery.Validation ist ein hervorragendes JQuery-Plug-In, das Client-Formulare validieren kann und viele anpassbare Eigenschaften und Methoden mit guter Skalierbarkeit bietet. In Kombination mit der tatsächlichen Situation habe ich die im Projekt häufig verwendeten Überprüfungen in einer Beispiel-DEMO zusammengefasst. In diesem Artikel soll die Anwendung der Validierung anhand dieses Beispiels erläutert werden.

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, erneute Passwortüberprüfung.
E-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.
URL: Überprüfung der Website-URL-Adresse.
Datum: Standardvalidierung des Datumsformats.
Zahl: Ganzzahl, positive Ganzzahlvalidierung, numerische Bereichsvalidierung.
Personalausweis: Überprüfung der Personalausweisnummer vom chinesischen Festland.
Postleitzahl: Überprüfung der Postleitzahl des Festlandes.
Datei: Überprüfung des Dateityps (Suffix). Beispielsweise dürfen nur Bilder hochgeladen werden.
IP: Überprüfung der IP-Adresse.
Bestätigungscode: Bestätigungscode Ajax-Verifizierung.
Verwendung:
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> 

Es ist erwähnenswert, dass ich der Beschriftung einen „erforderlichen“ Klassenstil gegeben habe und ihre Funktion im Folgenden erwähnt wird.
4. Validierungs-Plugin 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 die Eingabeaufforderungsnachricht in der Form „Schlüssel: Wert“. Der Schlüssel ist das zu überprüfende Element und der Wert ist eine Zeichenfolge oder Funktion. 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 darauf hinweist, 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
email: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 Wert des Formularfelds und wird häufig zur Überprüfung der wiederholten Passworteingabe verwendet
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: Überprüfung der echten Mobiltelefonnummer
isPhone: Echte Verifizierung der Festland-Handynummer
isZipCode:Überprüfung der echten Postleitzahl
isIdCardNo:wahre Verifizierung der ID-Nummer des Festlandchinas
ip:wahre IP-Adressüberprüfung
Die oben bereitgestellten Überprüfungsmethoden 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 dann das Hintergrund-PHP zu verwenden, um 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('月光光', 'jeymii', 'Peter', 'helloweba'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
&#63;> 

我使用的服务端程序是PHP，您也可以使用ASP，ASP.NET，JAVA等。此外本例为了演示，用户名数据是直接写在服务端的，真正的应用是从数据库里取出的用户名数据，来和接收客户端的数据进行对比。
2、在验证checkbox和radio控件时，验证信息不会出现在最后的控件文本后面，而是直接跟在第一个控件的后面，不符合我们的要求。

解决办法是在validate({})追加以下代码：

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