suchen

Heim  >  Artikel  >  Web-Frontend  >  Validieren von Formularen mit Parsley.js

Validieren von Formularen mit Parsley.js

WBOY
WBOYnach vorne
2023-08-31 08:21:061395Durchsuche

使用 Parsley.js 验证表单

In diesem Tutorial zeigen wir Ihnen, wie Sie Parsley.js verwenden, eine JavaScript-Bibliothek, die hauptsächlich zur Validierung von Formularen verwendet wird. Parsley hilft auf sehr subtile und einfache Weise bei der Validierung von Formularen und ist eine der am weitesten verbreiteten Bibliotheken zur Formularvalidierung.

Funktionen von Parsley.js

Es gibt viele Gründe, warum Parsley eine gute Wahl für die Validierung von JavaScript-Formularen ist. Einige davon sind unten aufgeführt.

  • Intuitive DOM-API – Die DOM-API ermöglicht Ihnen die Verwendung von einfachem Englisch im HTML-Markup und Parsley erledigt den Rest. Selbst für eine einfache Formularvalidierung müssen Sie keine einzige Zeile JavaScript schreiben.

  • Dynamische Formularvalidierung – Parsley kann Formularänderungen leicht erkennen und seine Validierung entsprechend anpassen.

  • Viele Validatoren – In Parsley gibt es eine große Anzahl integrierter Validatoren. Bei Bedarf können wir auch einen Ajax-Validator verwenden.

  • Sehr zuverlässig – Es ist fehlerfrei und wurde außerdem gründlich getestet.

  • Benutzererfahrungsfokussiert – Parsley ist auf UI und UX spezialisiert und wir können sogar fast alle Standardverhaltensweisen von Parsley überschreiben, um sie genau an Ihre Bedürfnisse anzupassen.

So verwenden Sie Parsley, um ein Formular zu validieren

Da wir nun ein wenig über Parsley.js wissen, ist es an der Zeit, uns auf ein Beispiel mit Parsley zu konzentrieren. Betrachten Sie die folgende Datei „index.html“, in der wir ein Formular mit darin eingebettetem einfachen JavaScript-Code haben.

Beispiel

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Parsely.js Example</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
   crossorigin="anonymous"></script>
   <script
   src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/dist/parsley.js"></script>
</head>
<body>
   <h2>Fill in the form and click the validate button at the bottom</h2>
   <form id="demo-form" data-parsley-validate="">
   <label for="fullname">Enter Your Full Name * :</label>
   <input type="text" class="form-control" name="fullname" required="">
   <br /><br />
   <label for="email">Enter Your Email * :</label>
   <input type="email" class="form-control" name="email" data-parsleytrigger="change" required="">
   <br /><br />
   <label for="contactMethod">Please Enter Your Preferred Contact Method*:</label> Email: <input type="radio" name="contactMethod"id="contactMethodEmail" value="Email" required=""> Phone: <input type="radio" name="contactMethod" id="contactMethodPhone" value="Phone">
   <br /><br />
   <label for="hobbies">Enter Your Hobbies (Optional, but 2 minimum):</label>
   <p>
      Coding <input type="checkbox" name="hobbies[]" id="hobby1"value="ski" data-parsley-mincheck="2"><br> Walking <input type="checkbox"name="hobbies[]" id="hobby2" value="run"><br> Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br> Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br> Traveling <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br> Writing <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br></p>
   <p>
      <label for="heard">Heard about us via *:</label>
      <select id="heard" required="">
         <option value="">Choose..</option>
         <option value="press">Press</option>
         <option value="net">Internet</option>
         <option value="mouth">Word of mouth</option>
         <option value="other">Other..</option>
      </select>
   </p>
   <p>
      <label for="message">Message (20 chars min, 100 max) :</label>
      <textarea id="message" class="form-control" name="message" dataparsley- trigger="keyup" data-parsley-minlength="20" data-parsleymaxlength=" 100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validationthreshold="10"></textarea>
   </p>
   <br>
   <input type="submit" class="btn btn-default" value="validate">
   </form>
   <script>
      $(function() {
         $('#demo-form').parsley().on('field:validated', function() {
            var ok = $('.parsley-error').length === 0;
            $('.bs-callout-info').toggleClass('hidden', !ok);
            $('.bs-callout-warning').toggleClass('hidden', ok);
         })
         .on('form:submit', function() {
            return false;
         });
      });
   </script>
</body>
</html>

Klicken Sie oben auf die Schaltfläche „Bearbeiten und ausführen“, um diesen Code auszuführen und das Ausgabeformular anzuzeigen.

Anleitung

In diesem Code haben wir ein Formular mit mehreren Textbereichen, die unterschiedliche Werte erfordern. In jedem Wert haben wir ein Textschlüsselwort, ein Kontrollkästchen oder eine Option.

Außerdem gibt es am Ende des Codes eine Schaltfläche „Bestätigen“. Sie erhalten Popup-Fehler von Parsley, wenn Sie auf die Schaltfläche klicken, ohne ein Formular auszufüllen, und Sie erhalten Validierungsfehler von Parsley.js, wenn einige der von Ihnen eingegebenen Felder nicht den Erwartungen entsprechen.

Sie können diesen Code hier ausführen und die verschiedenen Felder entsprechend dem von Ihnen gewählten Testzweck ausfüllen.

Fazit

In diesem Tutorial zeigen wir anhand eines einfachen Beispiels, wie man ein Formular in JavaScript mit Parsley.js validiert.

Das obige ist der detaillierte Inhalt vonValidieren von Formularen mit Parsley.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie kann man mit FabricJS ein Polygonobjekt auf Rotationsereignisse reagieren lassen?Nächster Artikel：Wie kann man mit FabricJS ein Polygonobjekt auf Rotationsereignisse reagieren lassen?

In Verbindung stehende Artikel

Mehr sehen