So schreiben Sie eine JQuery-Formularvalidierung

In der Frontend-Entwicklung ist die Formularvalidierung eine wesentliche Fähigkeit. Durch die Formularvalidierung kann die Richtigkeit und Rechtmäßigkeit der von Benutzern eingegebenen Daten sichergestellt werden, wodurch die Wahrscheinlichkeit von Datenfehlern effektiv verringert und den Benutzern ein gutes Erlebnis geboten wird. In diesem Artikel wird erläutert, wie Sie jQuery zum Validieren von Formularen verwenden.

Frameworks und Plug-Ins

Bei der Verwendung von jQuery zur Validierung von Formularen können wir einige hervorragende Frameworks und Plug-Ins verwenden, um die Entwicklungseffizienz und Codequalität zu verbessern. Gängige Formularvalidierungs-Frameworks und Plug-ins sind:

1. jQuery Validation
   jQuery Validation ist ein sehr beliebtes Formularvalidierungs-Plug-in, das Formulare anhand einfacher Einstellungen und Prinzipdaten automatisch validieren kann In. Darüber hinaus unterstützt jQuery Validation mehrere Validierungstypen, einschließlich erforderlicher Felder, Mindestlänge, Maximallänge, reguläre Ausdrücke, Remote-Validierung usw.
2. Bootstrap Validator
   Bootstrap Validator ist ein Formularvalidierungs-Plugin, das auf Bootstrap und jQuery basiert. Es bietet eine Vielzahl von Verifizierungsmethoden, einschließlich erforderlicher Felder, E-Mail, Passwort, Mobiltelefonnummer, URL-Adresse usw., und unterstützt benutzerdefinierte Verifizierungsregeln.
3. FormValidation
   FormValidation ist ein beliebtes Formularvalidierungs-Framework, das die Integration verschiedener JavaScript-Bibliotheken und Frameworks wie Bootstrap und Foundation ermöglicht. FormValidation unterstützt benutzerdefinierte Fehlermeldungen, asynchrone Validierung, praktische Validierungsmethoden und mehrere Validierungsregeln.

Die oben genannten drei Frameworks und Plug-Ins sind einfach zu verwenden, flexibel und veränderbar und verdienen die Aufmerksamkeit der Entwickler.

Implementierung der Formularvalidierung

Im Folgenden wird das jQuery-Validierungs-Plug-in als Beispiel verwendet, um vorzustellen, wie jQuery zum Validieren des Formulars verwendet wird.

1. Einführung in jQuery und jQuery-Validierung

Bevor wir beginnen, müssen wir die erforderlichen JavaScript-Dateien in unsere HTML-Datei einführen.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

2. HTML-Code schreiben

Im HTML-Code müssen wir zunächst ein Formular definieren und jedem Formularelement eine eindeutige ID hinzufügen.

<form id="myform">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>

  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email"><br>

  <button type="submit">提交</button>
</form>

3. JavaScript-Code schreiben

Im JavaScript-Code müssen wir zuerst die Validierungsregeln und die Fehlermeldung konfigurieren und dann die Validierung aufrufen ()-Methode Validiert das Formular. Wenn die Formularvalidierung erfolgreich ist, können entsprechende Vorgänge durchgeführt werden, beispielsweise das Absenden des Formulars.

$(document).ready(function() {
  $("#myform").validate({
    rules: {
      username: {
        required: true,
        minlength: 6
      },
      password: {
        required: true,
        minlength: 8
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名长度必须大于等于6个字符"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度必须大于等于8个字符"
      },
      email: {
        required: "请输入电子邮件",
        email: "请正确填写有效的电子邮件地址"
      }
    },
    submitHandler: function(form) {
      // 表单通过验证后执行的操作
      form.submit();
    }
  });
});

Im obigen Code verwenden wir die Methode „validate()“, um das Formular zu validieren, wobei das Attribut „rules“ die Validierungsregeln und das Attribut „messages“ die entsprechende Fehlermeldung definiert. Wenn das Formular gesendet wird, löst das SubmitHandler-Attribut entsprechende Vorgänge aus.

Es ist zu beachten, dass Sie bei Verwendung von jQuery Validation zur Formularvalidierung zuerst jQuery- und jQuery Validation-Skripte in die HTML-Datei einführen und den Code ausführen müssen, nachdem jQuery bereit ist. Darüber hinaus müssen Sie für jedes Formularelement eine eindeutige ID festlegen, die den Validierungsregeln zugeordnet werden soll.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man das jQuery-Validierungs-Plug-in zur Validierung des Formulars verwendet, sowie gängige Formularvalidierungs-Frameworks und Plug-ins. In der tatsächlichen Entwicklung können wir je nach Situation die geeignete Formularüberprüfungsmethode auswählen und verschiedene Überprüfungsregeln und Fehleraufforderungen verwenden, um die Richtigkeit und Sicherheit der Formulardaten sicherzustellen.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine JQuery-Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!