Web Forms 2023 – Teil 9: Wie du clientseitige Validierung durchführst (eingebaut und mit JavaScript)

1. Kurseinleitung – Form: Willkommen, willkommen, willkommen in einer anderen Klasse. Ich bin super, super aufgeregt. Mein Name ist Clyde. Ich werde dein Lehrer sein und das ist Teil einer ganzen Serie rund um Formulare. Wir haben einen sehr langen Weg zurückgelegt, aber das ist super interessant, weil wir über die clientseitige Validierung sprechen und einfach einen Schrittzurück gehen die clientseitige Validierung sprechen und einfach einen Schritt und darüber nachdenken, warum Validierung wichtig ist. Wenn Sie keine Validierung für ein Formular haben, was passiert dann? Das ist richtig. Der Benutzer wird ein Formular ausfüllen. Der Benutzer wird auf den Submit-Button drücken, das Formular Tochter geht auf den Server. Und auf dem Server, den Sie eine Validierung haben wir benötigt haben, davon auszugehen, dass die Servervene einen Fehler findet , der eine Antwort an den Browser zurückgeben muss , der sagt, dass der Benutzer keine Ära ist und der gesamte Prozess wiederholt werden muss. Das ist sehr ineffizient. Und genau deshalb haben wir eine clientseitige Validierung. Aber was Sie vielleicht nicht wissen, ist, dass es zwei Arten der clientseitigen Validierung gibt. Wir haben Bolton Invalidierung und von Bolton meinen nicht nur beide in durch den Browser. Zum Beispiel hat eine Eingabe vom Typ von E-Mail bestimmte hex und Anforderungen, die erfüllt werden müssen, damit der Browser dem Benutzer erlauben kann, bevor zu senden. Das ist also eine eingebaute Validierung. Der zweite Typ der clientseitigen Validierung ist die JavaScript-Validierung. Ja, wir müssen etwas JavaScript programmieren, aber keine Sorge, ich zeige Ihnen, wie das geht. Und wir werden die Einschränkungs-Validierungs-API verwenden. Es wird faszinierend sein. Also ist diese Klasse wirklich für alle Ebenen von Ihnen erlebt, dass Sie gerade anfangen. Keine Sorge, es ist für dich. Sie werden in der Lage sein, mitzuverfolgen und Sie werden etwas Neues lernen. Genug Blubber, Blubber. Lasst uns reingehen. Wir sehen uns in der allerersten Vorlesung. 2. Zwei Arten von client: Super, super aufregend, nicht wahr? Denn jetzt werden wir über Form reden, Foundation. Und es wird nicht so kompliziert von einem Abschnitt sein. Ich meine, Sie wissen eine Menge davon bereits, wir haben viele, viele Vorfälle von uns behandelt , die Front-End-Validierung durchführen, aber ich möchte nur ein wenig mehr darüber sprechen. So, wie Sie wissen, vor dem Senden von Daten an den Server, sollten Sie sicherstellen, dass alle erforderlichen Formularsteuerelemente oder vollständig im richtigen Format. Und das nennt man was, 100 Prozent. Das nennt man clientseitige Validierung. Und die clientseitige Validierung trägt dazu bei, dass die übermittelten Daten den Anforderungen entsprechen, die in den verschiedenen Formularsteuerelementen festgelegt sind. Und während dieses gesamten Kurses haben wir die grundlegenden Konzepte besprochen und viele Beispiele für die Durchführung clientseitiger Formularvalidierung verwendet . Wir hatten Kleinheitsattribute. Wir setzen das erforderliche Attribut auf verschiedene Formularsteuerelemente. Auf einigen der numerischen Formular-Steuerelemente hatten wir die Min-Attribute, max attribute, et cetera, et cetera. Wir haben wirklich viele, viele Beispiele in diesem Kurs gemacht . Etwas, an das Sie sich erinnern müssen, ist die Validierung als Client-Seite nur eine erste Prüfung und es ist ein wichtiges Feature für eine gute Benutzererfahrung. Warum? Nun, denk drüber nach. Wenn Sie ungültige Daten auf der Clientseite abfangen können, kann der Benutzer diese sofort beheben. Was ich damit meine, ist, wenn Sie keine clientseitige Validierung haben, was wird passieren? Das ist richtig. Die Tochter wird schien dem Server zu bekommen, dann wird der Server seine Prüfungen durchführen und es wird nur Dane abgelehnt werden, dann muss es den ganzen Weg zurück durch die Leitung zum Client kommen und erst dann kann der Client es reparieren. Mit anderen Worten, Sie würden unnötige Verzögerungen verursachen, indem Sie einen Roundtrip zum Server und dann zurück zur Clientseite haben, um dem Benutzer mitzuteilen, dass er die Tochter reparieren soll. Daher ist die clientseitige Validierung eine erste Prüfung und es verbessert die Benutzererfahrung, dass Esel zu zuversichtlich clientseitige Validierung nicht als erschöpfende Sicherheitsmaßnahme angesehen werden sollte . Ihre App sollte immer Sicherheitsüberprüfungen in jedem Formular durchführen, einige Metadaten auf der Serverseite sowie auf der Clientseite. Da die clientseitige Validierung zu einfach ausgeschaltet werden kann, ist es zu einfach, von Hackern zu umgehen. Bösartige Benutzer können immer noch leicht sehen, die schlechten Daten bis zu Ihrem Server. Sie sollten immer eine clientseitige Validierung haben, aber Sie können sich nicht erschöpfend darauf verlassen. Macht es Sinn? Ok. Ok. Nun, die andere Sache ich erwähnen möchte, ist, dass wir clientseitige Validierung haben, und das sind zwei verschiedene Arten der clientseitigen Validierung. Was sind diese verschiedenen Typen? Nun, wir haben eine native Validierung, oder? Wird auch als integrierte Formularvalidierung bezeichnet. Und dann haben wir auch das Richtige, JavaScript-Validierung. Was sind die Unterschiede später Validierung wird durch den Browser zur Verfügung gestellt, das wird durch die HTML-Spezifikation zur Verfügung gestellt. Und die native Validierung erfordert nicht viel, wenn überhaupt, JavaScript, da Sie kein benutzerdefiniertes JavaScript oder benutzerdefinierten Code schreiben müssen. Validierung von Bolzen in Form hat in der Regel eine bessere Leistung als JavaScript. Aber natürlich ist der Nachteil, dass es nicht so anpassbar ist wie JavaScript, was mich zur JavaScript-Validierung bringt. Was ist das? Das ist nur eine Validierung, die Sie in JavaScript schreiben müssen. Der Hauptvorteil ist, dass es vollständig anpassbar ist, aber natürlich müssen Sie alles erstellen. Sie müssen wissen, wie Sie JavaScript schreiben, oder Sie müssen eine Bibliothek verwenden. Also gehen wir hin. Es gibt nur die Zusammenfassung der Formularvalidierung auf hoher Ebene. Und speziell auf die zwei verschiedenen Arten der clientseitigen Validierung zu achten. 3. Eingebaute Validierung: Willkommen zurück, Willkommen zurück. Ich bin super, super aufgeregt, wie Sie sich in der vorherigen Vorlesung erinnern werden, haben wir diskutiert, dass es zwei Arten der clientseitigen Validierung gibt. Erinnerst du dich, was sie waren? Die erste war eine integrierte Formularvalidierung und die zweite Art der JavaScript-Validierung werden wir in Kürze JavaScript betrachten. Aber bevor wir es tun, möchte ich nur Bolzen in Form Validierung in ein wenig detaillierter diskutieren . Also lasst uns hineingehen. Eines der wichtigsten oder wichtigsten Merkmale von HTML5 Form Controls ist die Fähigkeit zu validieren, eine Tochter zu verwenden, ohne sich auf JavaScript zu verlassen. Und wie wird das gemacht? Nun, es wird durch die Verwendung von Validierungsattributen für verschiedene Formularelemente getan. Wir haben viele Beispiele dafür im Kurs gesehen. Um jedoch zusammenzufassen, müssen einige der erforderlichen Attribute mit einem vollständigen Feld ausgefüllt werden bevor das Formular an den Server gesendet werden kann. Wir haben auch einen MAN-Link. Und als nächstes, ganz intuitiv Tag geben Sie die minimale und maximale Länge von textuellen Datenzeichenfolgen an. Wir haben Minimax. Worum geht es denn? Tun? Intuitiv legt er die Minimal- und Maximalwerte numerischer Eingabetypen fest, wie beispielsweise die Art der Zahl. Und dann haben wir dieses Typattribut. Dieses Typattribut war erstaunlich, nicht wahr? Denn das gibt an, ob es sich bei der Tochter um eine Nummer, eine E-Mail-Adresse oder einen anderen bestimmten Typ handeln muss . Und wir können mit der integrierten clientseitigen Validierung komplexer werden. Wir können die Patent-Attribute verwenden. Sie werden in Kürze ein Beispiel sehen, aber dies gibt einen regulären Ausdruck an, der ein Muster definiert. Die Inter Tochter muss folgen. Ein nettes, nur ein paar von ihnen, die wir uns angesehen haben. Wir haben uns mehr von diesen Attributen angesehen sind wichtig, weil, wenn die Tochter in einem Formularfeld eingegeben folgt alle Regeln, die durch diese Attribute angegeben gelten gelten als gültig und der Browser wird es dem Benutzer erlauben, einreichen das Formular an den Server. Es macht Heilige. Also, wenn ein Element gültig ist, werden die folgenden Dinge passieren. Erstens wird das Element mit der geprüften CSAS-Pseudo-Klasse übereinstimmen , mit der Sie einen bestimmten Stil auf gültige Elemente anwenden können. Wir haben viele Beispiele von uns gesehen, die dies im Kurs verwenden. Und das zweite, was passieren wird, wenn ein Element gültig ist , ist , dass der Browser das Formular sendet, wenn der Benutzer versucht, die Tochter zu senden. Natürlich, vorausgesetzt, es gibt nichts, was sie davon abhält. Wie, wenn Sie zum Beispiel verwendet, wenn ein Element gültig ist. Alles Clyde, was passiert, wenn ein Element ungültig ist? Und beachte meine Seite, offensichtlich, aber eine Menge zu fassen. Es wird alles mit Gelernten verfestigen. Ähnlich wie der gültige Zustand, wenn ein Element ungültig ist, werden zwei Dinge passieren. Erstens wird das Element mit der ungültigen CSS-Pseudo-Klasse übereinstimmen. Und manchmal wird es auch mit anderen UI-Pseudo-Klassen übereinstimmen. Zum Beispiel außerhalb des zulässigen Bereichs. Und das hängt alles von der Art der IRA ab, die Schönheit, diese ungültige Pseudo-Klasse zu haben, ist natürlich, dass Sie einen bestimmten Stil anwenden können, zwei Elemente, die in der eingespeist sind. Die zweite Sache, die passieren wird, ist, dass, wenn der Benutzer versucht, Tochter, der Browser wird das Senden des Formulars zu blockieren und der Browser wird eine native Fehlermeldung anzeigen. Sehr, sehr nützlich. Bevor ich fortfahre, möchte ich nur, dass Sie wissen, dass es sich um mehrere Epochen handelt, die das Absenden des Formulars verhindern. Und wir werden einige dieser kürzeren betrachten, vor allem, wenn wir uns mit JavaScript beschäftigen. Aber wie auch immer, wir setzen verschiedene Arten von ER ist wie eine schlechte Eingabe zu kurzen Typ-Mismatch Wert, fehlende steile Dismatch Bereich, Unterlauf, et cetera, et cetera, et cetera. Es gibt viele verschiedene Bereiche, die mit verschiedenen Arten von Eingängen verbunden sind. Und wenn diese Fehler auftreten, sendet der Browser das Formular nicht oder nicht. Das passiert also, wenn ein Element mit dem ungültigen Zustand übereinstimmt. Aber einer der häufigsten. Und das haben wir in den Kursen gesehen. - Was? Das ist richtig, Es ist das erforderliche Attribut. Und wenn wir dieses erforderliche Attribut auf dem Formularelement haben, wird es die erforderliche Pseudo-Klasse entsprechen. Was bedeutet das? Nun, es bedeutet, dass Formular-Steuerelement als Wert, der leer ist und innere Nachricht angezeigt wird, wenn der Benutzer versucht, das Formular zu senden. Und natürlich wissen wir, dass auch die ungültige Pseudo-Klasse übereinstimmen wird. Das ist genug zu sprechen, ich möchte zum Texteditor springen. Lassen Sie uns an einem Eingang von Taktiken zu seinem Ziel codieren. Sie benötigten Pseudo-Klasse, die ungültige und die gültige Pseudo-Klasse. Du wirst sehen, wie einfach es ist. Und wir können mit dieser Vorlesung fortfahren. Also lasst uns das jetzt schnell machen. 4. Quick - ein ungültige und pseudo valid,: Beginnen wir wie immer mit einer leeren Datei. Wir werden einen Kopfteil in der Stilabteilung haben. Aber jetzt, lasst uns einfach unsere Form sehr schnell ziehen, oder? Also innerhalb des Körpers, lasst uns eine Form haben. Wir brauchen kein Aktionsattribut. Wir machen uns noch keine Sorgen darüber, es an einen Server zu senden. Lassen Sie uns hier ein Label-Attribut haben. Und geben Sie ihm einfach einen vollen Attributwert von wählen. Möchten Sie eine Banane oder eine fröhliche Zeit bevorzugen? Nein, ich weiß, dass es zufällig ist. Ich will dir nur ein Beispiel geben. Und dann wird natürlich das, um eine Eingabe mit einem Type-Attribut zu haben, auf Text gesetzt. Hab es. Und dann können wir ihm ein Namensattribut unseres gleichen geben. Und ich gebe ihm ein Namensattribut unseres Likes, denn wenn wir es nicht tun, wird es nicht an den Server gesendet. Denken Sie daran, dass wir Namenswertpaare benötigen, damit Daten an den Server übermittelt werden . Also der Name, den wir den Stühlen geben, ist wie, Wir wissen, dass der ID-Wert den vier Attributen Wert von wählen entsprechen muss. Das letzte, was ich tun möchte, ist eine Schaltfläche vom Typ hinzuzufügen, die gesendet wurde. Wir können es einfach haben, speichern, den Browser aktualisieren. Und da gehen wir. Wir haben buchstäblich unsere Eingaben. Wie ich in der Vorlesung erwähnt habe, eine der einfachsten HTML5-Validierungsfunktionen die erforderlichen Attribute. Und um eine Eingabe obligatorisch zu machen, müssen wir nur dieses Attribut dem Element hinzufügen, richtig? Denn im Moment kann der Benutzer dieses Formular absenden. Ich mag wird an die URL angehängt, aber es gibt keinen Wert. Wenn wir es erforderlich machen wollen, müssen wir nur das erforderliche Attribut zu diesem Eingabeelement hinzufügen. Es ist eine boolesche Attribute. Wir müssen ihm keinen Wert zuweisen. Entweder ist es da oder es ist nicht. Wenn der Benutzer nun versucht, zu senden, wird der Browser verhindern, dass der Benutzer dies tut. Und was wirklich cool ist, ist, dass, wenn dieses Attribut gesetzt ist, das Element der erforderlichen UI-Pseudo-Klasse entspricht und diesem entspricht, unabhängig davon, ob es einen Wert gibt oder nicht. Und erinnern Sie sich an die Form Wein Senden, es wird eine Fehlermeldung angezeigt, wenn der Wert fehlt, wenn der Wert leer ist, und während die Werte leer sind, wird die Eingabe auch als ungültig angesehen werden, mit der ungültigen UI-Pseudo-Klasse übereinstimmt. Also jetzt, wenn ein Benutzer versucht, zu senden, beachten Sie, wie die Eingabefeld Kinder konzentrieren und wir erhalten diese Fehlermeldung, die uns vom Browser angezeigt wird. Lassen Sie mich beweisen, dass einige dieser Pseudoklassen funktionieren. Erstens, was wir tun können, ist, dass wir das Eingabeelement anvisieren können, wo sein Zustand ungültig ist. Und das sollte hier sehr einfach sein, zwei Pixel, einfarbig roter Rand, und dies ist der Standardstartpunkt. Der Standardwert, wenn wir ein erforderliches Attribut für ein Element haben, ist, dass es mit dem ungültigen Zustand übereinstimmt, weil sein Wertattribut leer ist, oder? Aber sobald der Benutzer anfängt zu tippen, sagen Sie, dass er eine Banane will, ist es nicht mehr rot. Aka es ist nicht ungültig und der Benutzer bricht mit dem Formular ab. Aber natürlich, sobald es eingereicht wurde, geht es zurück in diesen ungültigen Zustand. Was sind noch ein paar Dinge, die ich dir zeigen kann? Nun, warum zielen wir nicht auf die Eingabe ab, oder? Wir, sein Zustand ist ungültig. Aber denken Sie daran, ich sagte, es wird auch den erforderlichen Zustand entsprechen. Also, wie haben wir das angestrebt? Und wir können diesem ein cooles Hintergrundbild Styling geben. Wir können ihm einen linearen Farbverlauf geben. Sagen wir einfach rosa und hellgrün. Speichern Sie das. Also gehen wir hin. Wir wissen jetzt, dass es mit dem erforderlichen Zustand übereinstimmt und gleichzeitig mit dem ungültigen Zustand übereinstimmt. Kannst du sehen, wie das Rosa von oben nach unten fließt? Wenn Sie das nicht wollen, zum Beispiel mit dieser linearen Gradientenmethode, können wir einfach hier nach rechts sagen. Und natürlich geht es von links nach rechts. Nun begann das Rosa den Liftverlauf Julie in grün von links nach rechts. Und es ist nur ein bisschen zu FYI. Und dann schließlich können wir auch die Eingabe anvisieren, aber dieses Mal, wenn es Status gültig ist und Liste geben Sie ihm einfach einen Rahmen von zwei Pixeln, solide grün. Alles klar, wir speichern das, wenn der Benutzer beginnt, Banana zu tippen. Können wir sehen, oder sehen Sie, dass es eine grüne Grenze gibt? Natürlich ist es schwer zu sehen, weil wir auch einen Umriss haben, diesen schwarzen Umriss. Also warum entfernen wir den Umriss nicht, setzen ihn auf keine. Benutzer fängt an, Banane zu tippen, und da gehen wir. Wir wissen jetzt, dass es gültig ist. Du musst, du musst das Zeug genießen, das so interessant ist. Und es macht so Spaß, wenn es klickt, wie es wird einfach sehr intuitiv, sehr einfach, mit dem Styling Ihrer Formulare auf eine sehr, sehr lustige Art und Weise zu beginnen. Bird sowieso, das sind die einfachen eingebauten Validierungs-Pseudo-Klassen, aber sie sind mehr. Und vor allem diesen möchte ich jetzt mit Ihnen besprechen. Also springen wir zurück zur Vorlesung. 5. Das pattern: Du gehst, ich habe dir gesagt, dass es nicht so schlimm ist, oder? Aber jetzt möchte ich in eine etwas komplexere integrierte Validierung einsteigen. Ich möchte jetzt die theta1-Attribute betrachten. Und dieses Musterattribut ist ein weiteres sehr nützliches Validierungsfeature. Und was erwartet sie? Das ist richtig, es erwartet einen regulären Ausdruck als seinen Wert. Was ist ein regulärer Ausdruck? Reguläre Ausdrücke oder Regex, ist nur ein Muster, das verwendet werden kann, um eine Zeichenkombinationen in Textzeichenfolgen entsprechen. Was genau ist Rigs? Nun, es ist ein sehr kompliziertes Thema und es ist jenseits des Rahmens dieses Kurses für mich, es zu bekommen. Denken Sie daran, dass jeder Browser-Anbieter seine eigene Regex-Engine hat, die Wackelausdrucks-Software, die reguläre Ausdrücke verarbeiten kann. Und der ganze reguläre Ausdruck versucht zu tun, ist , dass er versucht, ein Muster einer bestimmten Zeichenfolge zuzuordnen. Also, Clyde, was ist dieser reguläre Ausdruck Motor Pol? Nun, es hängt davon ab, welchen Browser Sie verwenden. Wenn wir also Chrome betrachten, verwendet Chrome die V8-Engine, wenn es JavaScript ausführt. Und die Entwickler haben so viel Mühe gemacht, dass sie irgendwie ignorierten, ihren eigenen benutzerdefinierten Code für reguläre Ausdrücke zu erstellen. Nun, das war bis vor ein paar Jahren. So verwendet Google Chrome jetzt die eigene Regex-Engine namens Ohrringe. Eine andere Sache, die ich Ihnen erwähnen möchte, ist, dass nicht alle Eingabetypen mit bestimmten Mustern die Patentattribute angegeben haben müssen. Zum Beispiel haben wir gesehen, dass die Eingabegewichtungstyp auf E-Mail gesetzt ist. In diesem Fall müssen wir nicht benutzerdefinierte theta1 RegEx schreiben. Wir können, wenn wir wollen, aber das müssen wir nicht. Warum müssen wir das nicht? Da der Browser Baja nicht kennt, wenn wir Eingabe vom Typ E-Mail verwenden, Browser verwendet bereits eine wohlgeformte E-Mail theta1. Jedenfalls wollte ich das nur erwähnen, bevor ich weitermache, lass uns wieder darauf eingehen. Wie ich bereits erwähnt habe, sind Rick x ziemlich komplex, also beabsichtigen Sie nicht, sie in diesem Kurs erschöpfend zu unterrichten. Aber ich möchte Ihnen nur ein paar Beispiele geben. Haben Sie eine Last, um Ihnen eine grundlegende Vorstellung davon zu geben, wie sie funktionieren. Okay, also was sind einige Muster, die wir angeben können? Nun, ja, ich werde nur drei sehr einfache Beispiele. Wenn wir nur das Zeichen x haben, Lassen Sie uns gehen, um ein Zeichen zu entsprechen. Das ist x muss nicht x, x, nur x sein. Wenn wir Muster x, y angeben, wird das mit x gefolgt von Y übereinstimmen. Und dann natürlich, wieder ihre eigene Syntax. Wir können an Zeile verwenden, um alle zu spezifizieren. Also können wir x oder y sagen. Und das wird mit einem Zeichen übereinstimmen, das ist x oder y. Und es sind viele, viele weitere Möglichkeiten und Beispiele, die noch behandelt werden, aber die obigen sind nur ein paar einfache Beispiele, um Sie angefangen. Und während wir zu diesem Thema sind, warum sind wir zurück zu diesem Beispiel gegangen, das wir zuvor gemacht haben? Und warum stellen wir nicht ein eigenes Haustier ein Attribut dort auf, nur um zu sehen, wie es mit unseren ungültigen und geprüften Pseudo-Klassen funktioniert. Schauen wir uns jetzt mal an. Wir sind wieder an unserem ursprünglichen Beispiel. Und hier fragen wir den Benutzer, ob er eine Banane oder eine fröhliche bevorzugen würde. Also möchte ich nicht, dass der Benutzer in der Lage ist, nichts zu schreiben und das sofort einzureichen. Sie können das einreichen. Also, wie können wir das tun? Nun, sobald Sie anfangen, über ein Muster nachzudenken, Ding, Ding, Ding, Ding, können wir an reguläre Ausdrücke denken. Also hier gingen wir, um den Benutzer schreiben zu begrenzen. Kirsche. Orban Ehre, Schriftsteller sind die einzigen Dinge, die wir wollen, dass der Benutzer tun kann. Warum machen wir das nicht? Und lasst uns den Farbverlauf loswerden. Ich möchte nur etwas Lärm entfernen. Lassen Sie uns nur die ungültige und eine gültige Pseudo-Klasse hier haben. Wie können wir das tun? Nun, zuerst, lass mich das ein bisschen größer machen. Das erste, was wir tun können, ist natürlich, fügen Sie diese Patent-Attribute zu unserer Eingabe vom Typ Text. Es ist alles ein Text und wir wissen, dass der Wert dieses Musterattributs ein regulärer Ausdruck ist. Damit wir das tun können. Wir könnten sagen, nun, der reguläre Ausdruck muss Banane sein, Kirsche. Wir könnten das machen genossen, bekam unseren Browser. Wir können hier nichts eingeben. Und wir können sehen, dass es immer noch das ungültige Styling darauf angewendet hat, richtig? Es ist entfernt, der Umriss. Speichern Sie es, fangen Sie an, Gras zu tippen. Wir haben immer noch die ungültige Klasse. Ja, es ist super fröhlich. Wir haben immer noch den ungültigen Verlust. Warum ist das so? Oh, es ist wegen Entschuldigung. Ich habe noch einen Raum gesetzt. Lassen Sie uns einfach den Raum entfernen. Wir wollen keinen Raum. Speichern Sie es. Wenn wir Kirsche tippen, gehen wir. Es ist grün. Wenn der Benutzer Banane eingibt, ist es grün und darf einreichen. Aber es gibt ein Problem damit in dem Sinne, dass der Benutzer ein Kapital B machen könnte, aber nicht darin wird nicht funktionieren. Also, welche Rigs, du musst sehr explizit sein. Und was wir hier am Anfang definieren könnten, bevor wir nur ein kleines b definieren , ist ein Zeichensatz und ein Zeichenzustand ist nur in RegEx mit den eckigen Klammern definiert. Es ist im Grunde eine Alternative, diese gerade Linie, in Ordnung, also könnten wir sagen, was Zeichen erlaubt sind, entweder ein kleines b oder ein großes B. Und dann wollen wir natürlich kein weiteres B. diese gerade Linie, in Ordnung, also könnten wir sagen, was Zeichen erlaubt sind, entweder ein kleines b oder ein großes B. Und dann wollen wir natürlich kein weiteres B. Wir können das gleiche mit dem C tun also definieren wir ein Zeichen. Der Benutzer kann entweder ein kleines c für großes C eingeben. Nun, wenn wir dies speichern und der Benutzer cherry mit einem Großbuchstaben C eingibt, wird es gültig sein. Wie genial ist das? Es ist einfach, oder? Dies ist überhaupt kein schwieriger Code. Wir haben gerade das Patentattribut aufgenommen. Wir haben jetzt unsere eigene clientseitige integrierte Validierung implementiert. Wer das Zeug macht lustig, nicht wahr? So gut gemacht? Ich hatte eine Menge, viel Spaß in diesem Vortrag, der Bolt in der Validierung betrachtete. Erinnern Sie sich an die beiden Arten der Validierung in bolt und JavaScript? Wir haben uns die häufigsten in beiden Annotationstypen in dieser Vorlesung angesehen. Aber jetzt, was haben wir angefangen, in ein bisschen JavaScript zu springen , Off-Script-Validierung funktioniert. Wir sehen uns in der nächsten Vorlesung. 6. JavaScript: Ich freue mich über diesen Vortrag, denn in diesem Vortrag werden wir uns von integrierten HTML5-Validierung zur JavaScript-Validierung entfernen. Und mit der JavaScript-Validierung meine ich nur, Javascript zu verwenden, um Ihr Formular zu validieren. Und lassen Sie mich klarstellen, Sie müssen JavaScript verwenden, wenn Sie die Kontrolle über das Aussehen von nativen Fehlermeldungen übernehmen oder sich mit älteren Browsern befassen möchten , die die integrierte Formularüberprüfung von HTML nicht unterstützen. Und wenn Sie nicht wissen, was JavaScript ist oder wie es funktioniert, woher es kommt. Dann schauen Sie sich bitte mein JavaScript komplette Oma Kreise an. Aber keine Sorge, es wird ganz einfach in diesem Vortrag sein. Selbst wenn Sie nicht wissen, wie JavaScript funktioniert, sollten Sie in der Lage sein, mitzuverfolgen, okay? Okay, also wie funktioniert das? Bei Formularen ist es üblich, JavaScript mit der Einschränkungs-Validierungs-API zu verwenden. Aber keine Sorge, dies wird zur Verfügung gestellt, um den Browser zu stören. Die meisten Browser unterstützen heute die Einschränkungsüberprüfungs-API. Sie können es als Sitz von Methoden und Eigenschaften betrachten , die uns automatisch vom Browser zur Verfügung gestellt werden. Und es gibt viele verschiedene Web-APIs, die uns vom Browser zur Verfügung stehen, wie die Fetch-API, wenn wir mit dem Alter zu tun haben. Was ist mit WebSockets API? Was ist mit dem DOM? Diese Einschränkungs-Validierungs-API ist also nur einer von vielen, oder IPO. Wie können wir diese Einschränkungsvalidierungs-API verwenden? Werden wir in seiner Verwendung auf einem Formelement Dom-Schnittstellen begrenzt. Was ich damit meine, ist, dass wir nur die Constraint-API auf den folgenden Schnittstellen verwenden können . Und jede Schnittstelle stellt ein anderes Element dar. Zum Beispiel stellt die HTML-Button-Element-Schnittstelle natürlich das Patentelement und so weiter und so weiter. Es ist ziemlich intuitiv. Also, was wirklich cool ist, meine lieben Studenten ist, dass wir, wenn wir mit diesen Elementen, zum Beispiel mit dem Eingabeelement, automatisch Zugriff auf die Integritätsvalidierung API haben. Wir müssen auch nichts tun. Okay, Gleiter-Fall, also haben wir Zugriff auf die Einschränkungs-Validierungs-API. Aber was bedeutet es im praktischen Sinne? Was gibt es uns? Nun, es gibt uns bestimmte Eigenschaften und Methoden automatisch. Zum Beispiel können wir auf die Validierungsnachrichteneigenschaft zugreifen. Was bedeutet das? Nun, es ist eine schreibgeschützte Eigenschaft, die eine Gültigkeit zurückgibt. Mit anderen Worten, es wird die Fehlermeldung zurückgegeben, die die Validierungseinschränkungen beschreibt , die das Steuerelement nicht erfüllt. Wenn der Wert des Elements alle seine Einschränkungen erfüllt, okay, er ist gültig, dann gibt dies nur eine leere Zeichenfolge zurück. Wir haben auch dieses Gültigkeitsobjekt. Dies ist ein wirklich nützliches. Und dies gibt ein Gültigkeitsstatusobjekt zurück, das mehrere Eigenschaften enthält , die den Gültigkeitsstatus des tatsächlichen Elements beschreiben. welche Art von Eigenschaften können wir zugreifen, wo wir auf die Mustermismatch Eigenschaft zugreifen können, die true zurückgibt, wenn der Wert nicht mit dem angegebenen Musterattribut übereinstimmt und falsch übereinstimmt, wenn es übereinstimmt. Und denken Sie daran, Rechte, da der Wert nicht mit dem Musterattribut übereinstimmt, werden wir auch die ungültige CSS-Pseudo-Klasse übereinstimmen. Viele davon werden zusammen arbeiten. Lassen Sie mich also sagen, dass diese Mustermismatch true zurückgibt, wenn der Wert nicht mit dem angegebenen Musterattribut übereinstimmt, wir werden diese Mustermismatch Ära erhalten und das Formular wird daran gehindert, an den Server gesendet. Aber zur gleichen Zeit, weil die Muster nicht übereinstimmen, wissen wir, dass die ungültige CSS-Pseudo-Klasse auch im Spiel ist. Es ist ziemlich interessant. Und andere Eigenschaft dieses Gültigkeitsobjekts ist zu lang. Eigenschaft, die true zurückgibt, wenn der Wert länger als die maximale Länge ist , die durch das Attribut max length angegeben wird. Auch wenn es wahr ist, werden die Elemente auch mit der ungültigen CSS-Pseudo-Klasse übereinstimmen. Sehr ähnlich wie zu kurz. Das wird true zurückgeben, wenn der Wert kürzer ist als die minimale Länge, die durch das männer-Längenattribut und Bereichsüberlauf, Bereichsunterlauftag angegeben wird. Sehr ähnlich. Sie werden true zurückgeben, wenn der Wert größer ist als der Maximalwert, der durch das Attribut max angegeben wird. Oder natürlich, wenn wir es mit Reichweite zu tun haben und die Flüssigkeit wird wahr zurückgeben, wenn der Wert kleiner als das Minimum ist , das durch das Attribut Männer angegeben wird. Aber was interessant ist und wie diese Bereichsüberlauf und Bereichsunterlauf-Fehlermeldungen sind, dass wir ein paar Pseudo-Klassen haben , die in Ihnen übereinstimmen, raten , welche die ungültigen Pseudo-Klassen verwenden, die angewendet werden. Aber jetzt haben wir auch die außerhalb des Bereichs liegende Pseudo-Klasse, die gelten wird. Ziemlich interessant, oder? Eine andere Eigenschaft für dieses Gültigkeitsobjekt ist diese Art nicht übereinstimmende Eigenschaft oder Fehlermeldung. Dies wird true zurückgeben, wenn der Wert nicht in der erforderlichen Syntax ist. Zum Beispiel, wenn wir eine Eingabe mit einem type-Attribut zu sitzen, zu E-Mail oder URL, und der Benutzer nicht im richtigen Format eingeben, wenn dies gültig ist, wenn es true zurückgibt, wissen wir, dass die ungültige CSS-Pseudo-Klasse auch gehen zu bewerben. Und dann haben wir diese gültige Eigenschaft, die true zurückgibt, wenn das Element alle seine Validierungseinschränkungen erfüllt und daher als gültig angesehen wird. Also, wenn diese gültig ist, wissen wir, dass die gültigen CSS-Pseudo-Klassen. Wir werden uns bewerben. Und last but not least, was passiert, wenn wir dieses erforderliche Attribut für ein Element haben, wird in diesem Fall haben wir diesen Wert fehlende Eigenschaft, und neck wird true zurückgeben, wenn das Element eine erforderliche -Attribut, das kein Wert angegeben wurde. Crew, ich kenne sie, ich weiß, das ist eine Tonne, richtig? Es ist sehr, sehr nützlich. Aber du kennst mich, Aktionen sprechen lauter als Worte. Warum gehe ich nicht schnell zur Konsole. Schauen wir uns ein kurzes Beispiel an. Lassen Sie mich auf dieses Gültigkeitsstatusobjekt zugreifen und Ihnen seine Eigenschaften anzeigen. Hoffentlich wird es dann intuitiver für Sie. Schauen wir uns mal an. Hier sind wir also ein sehr, sehr einfaches Beispiel. Ich habe gerade gewickelt und eingegebene Gewichte, Art der Stadt nimmt in einer Form an. Und natürlich haben wir ein Muster von MET-Typen, was übrigens der Standard ist. Also brauchen wir das nicht mal. Und natürlich kann der Benutzer jetzt alles eingeben und alles einreichen. Es gibt keine Validierungseinschränkungen. Aber ich möchte Ihnen zeigen, wie diese Einschränkungsvalidierungs-API funktioniert. Denken Sie daran, dass es nur für bestimmte Schnittstellen gilt. Und eine dieser Schnittstellen und gilt für war die HTML-Eingabeelementschnittstelle, die uns direkten Zugriff auf diese API auf dem Eingabeelement gibt. Also, wie funktioniert es? Nun, erinnern Sie sich an die beiden Arten der clientseitigen Validierung. Wir hatten die integrierte Validierung, die nur HTML5 ist. Aber wir haben auch den zweiten Typ und das ist mit JavaScript. Und um JavaScript zu verwenden, müssen wir alles schreiben, was Script-Tags. Von hier aus. Was machen wir? Nun, wir müssen das Eingabeelement greifen. möchte nicht, um auf die Integritätsüberprüfungs-API zuzugreifen. Also, wie greifen wir diese Eingabe? Wir definieren es einfach in einer Variablen, alle Texte. Und beginnen wir mit dem Zugriff auf unser Dokumentobjekt. Hier können wir Elemente nach Tag-Namen erhalten. Der Tag-Name, den wir bekommen wollen, ist wichtig, oder? Und das gibt eine Sammlung zurück, wenn Sie meinen DOM-Kern gemacht haben. So greifen wir auf das erste Element in der Sammlung zu, das ist das Eingabeelement selbst. Und was wirklich cool ist. Was wirklich cool ist, dass wir es so ziemlich getan haben. Sie wissen was, anstatt einen Text zu nennen, lassen Sie mich es Texteingabe nennen, weil es das ist, was es ist. Und was wir jetzt tun können, ist, dass wir direkt auf diese Einschränkungs-Validierungs-API zugreifen können. Wir müssen nichts anderes tun. Das ist wirklich, wirklich cool. So können wir unsere Texteingabe greifen. Und was sind einige der Eigenschaften, über die ich gesprochen habe? Nun, die eine, die uns sehr wichtig ist, ist, dass die Gültigkeitsobjekte uns wichtig sind. Und um es zu sehen, warum protokollieren wir nicht einfach den Bildschirm. Das ist alles, was wir tun müssen. Gehen Sie zur Browser-Spezifikation, dieses Dokument. Gehen wir zur Konsole. Und hier ist diese Gültigkeitszustandsobjekte. Wie genial sind diese Medea-Studenten? Ja, sehr coole Rechte. Und das sind einige der inneren Nachrichteneigenschaften, die innerhalb dieses Fähigkeitszustandsobjekts angezeigt werden, oder? Ich habe über einige dieser zu langen, zu kurzen Typenmismatch gesprochen. Die gültige Eigenschaft ist jetzt auf true gesetzt, da sie nicht die erforderlichen Attribute enthält. Warum haben wir das erforderliche Attribut darauf gesetzt? Lassen Sie uns in unsere Eingaben gehosteten erforderlichen Attribut auf hier. Jetzt haben wir dieses Multi-Status-Objekt wieder, aber jetzt ist es gültig. Die Eigenschaft ist auf false festgelegt. Es ist nicht mehr wahr. Und natürlich haben wir auch diese Wert fehlende Eigenschaft. Und denken Sie daran, dass true zurückgibt, wenn das Element ein erforderliches Attribut hat, dass kein Wert. So viel Spaß, nicht wahr? Und das ist alles, was ich dir vorerst zeigen möchte. Ich wollte dir nur zeigen, wie man diese Validities tatsächlich sieht. Objekte, zeichnen Sie es. Jetzt haben wir immer noch nur die Eigenschaften der Einschränkungen diskutiert. Darüber hinaus ist API nur eine andere, die ich Ihnen erwähnen möchte und Lina möchte auf einige wichtige Make it übergehen. Also dieser Sprung zurück in die Region. 7. JavaScript – Objekte: Ok. Ich sagte doch, es ist nicht so schwierig, oder? Und hoffe, es wird intuitiver. Lasst uns weitermachen. Weil dies nicht die einzigen Eigenschaften sind, die uns von der Einschränkungsvalidierungs-API zur Verfügung stehen . Wir haben andere. Zum Beispiel haben wir auch das, wir werden richtig validieren. Und dies wird die Eigenschaft validieren, sagt uns im Grunde nur, ob das betreffende Element, wenn das betreffende Formular-Steuerelement validiert wird, wenn das Formular eingereicht wird. Mit anderen Worten, es ist nur eine Eigenschaft, die uns sagt, ob eine Eingabe validiert werden kann oder nicht. Es ist wahr, wenn es validiert werden kann und falsch, wenn es nicht ist, Wann würde die Versorgung einmal, dass die Wolle Validatoren falsch sein, als ob das Eingabeelement deaktiviert ist. Denken Sie daran, dass wir uns diese vorher angesehen haben. Wenn es deaktiviert ist, wird es nicht validiert Wind an den Server gesendet werden , macht es Sinn? Also haben wir uns wirklich einige Eigenschaften in der Einschränkungsvalidierungs-API angesehen. Und ich will jetzt weitermachen. Ich möchte nicht die Eigenschaften betrachten, aber ich möchte einige Methoden betrachten, die uns zur Verfügung stehen. Methoden sind übrigens wie eine Funktion. Es ist etwas, das getan wird. Es ist ein Tun Wort. Es ist wie ein Verb, während Eigenschaften eher wie ein Arm sind. Die erste Methode, die ich diskutieren möchte, ist diese Chicken Gültigkeitsmethode gibt true zurück, wenn der Wert des Elements keine Gültigkeitsprobleme hat. Und natürlich wird es falsch zurückgeben. Andernfalls, wenn das Element ungültig ist, wird diese Methode auch ein ungültiges Ereignis für das Element selbst auslösen. Wir haben auch andere Methoden. Wir haben auch diese benutzerdefinierte Sit Gültigkeitsmethode. Und das Argument, das es braucht, ist nur die Botschaft. Es ermöglicht Ihnen, eine benutzerdefinierte Fehlermeldung für das Element anzugeben. Wie genial ist das? Und weil es so genial ist, möchte ich es nur ein bisschen mehr darüber diskutieren, warum hat es mehr diskutiert? Da bei Verwendung dieser Methode die sechste benutzerdefinierte Gültigkeitsmethode einer der häufigsten Anwendungsfälle der Integritätsüberprüfungs-API ist . Wie ich bereits erwähnt habe, können Sie nur JavaScript verwenden, um einen Validierungsfehler und eine benutzerdefinierte Fehlermeldung zu definieren . Weil wir ehrlich sind, haben automatisierte Browser-Fehlermeldungen ihre Nachteile. Sie sind nicht sehr leicht zu verstehen. Manchmal sagen sie dir nicht genug Informationen. Es ist viel schöner, unsere eigenen zu sitzen. Und ja, du hast es erraten. Lassen Sie uns in den Texteditor springen und schauen wir uns ein Beispiel die Verwendung der benutzerdefinierten Gültigkeitsmethode SETT. Ich kann es kaum erwarten, es jetzt zu sehen. 8. setCustomValidity: In Ordnung. In Ordnung. In Ordnung. Jetzt möchte ich über diese sit-benutzerdefinierte Gültigkeitsmethode sprechen. Es ist eine so wichtige Methode. Dann möchte ich mir ein paar Beispiele ansehen. Und das war das Beispiel, das wir uns vorher angesehen haben. Wir hatten gerade eine Textart von Eingabe. Es ist alles, was wir hatten. Und was haben wir gerade gesehen, wie diese Sit-benutzerdefinierte Gültigkeit darauf funktioniert. Also jetzt lassen Sie uns entfernen erforderlich. Es gibt also keine Einschränkung oder integrierte Validierung. Und jetzt möchte ich auf diese Methode zugreifen. So greifen wir hier auf unsere Texteingabe zu. Wir können die Einschränkungs-Validierungs-API direkt beenden. Wir müssen nichts Besonderes machen. Aber dieses Mal möchte ich Zugang zugegeben. Die Methode wird Sit-benutzerdefinierte Gültigkeit genannt. Und ich möchte, dass Sie etwas bemerken, wenn ich damit anfange, richtig, ich werde unseren Fehler eingeben und sagen, dass dies eine Ära ist, die nie aufhört. Und wenn wir das speichern und unser Formular erhalten haben, wenn der Benutzer jetzt versucht, zu senden, werden wir einen Fehler erhalten. Weil dies dem Browser im Grunde mitteilt , dass dieses Eingabefeld jetzt im Fehlerzustand und im Netz ist. Wir wollen eine Fehlermeldung zeigen und natürlich hört sie nie auf, oder? Der Benutzer ist nicht in der Lage, dieses Formular jemals zu senden. Dies ist also ein wichtiger Aspekt bei der Verwendung dieser Methode. Wenn Sie es verwenden, wird es diese Eingabe oder das Element, das Sie verwenden oder aufsetzen, es wird es ungültig machen. Und ich kann es dir hier beweisen. Warum stylen wir nicht die ungültige Pseudo-Klasse? Lasst uns unsere Input schnappen. Stylen Sie den ungültigen Zustand und wir können ihm einfach einen roten Rahmen, Rand, ein Pixel, solides Rot geben. Und jetzt können Sie sehen, dass der Standardstatus ungültig ist , weil wir diese benutzerdefinierte Gültigkeitsfehlermeldung festgelegt haben. Wir sagen dem Browser grundsätzlich, dass dies jetzt ungültig ist. Also der Kunde, wie machen wir es nicht ungültig? Wird, wenn Sie den Wert setzen, um eine leere Zeichenfolge zu beenden, ist es wieder gültig. Wenn wir nun wieder auf unsere Texteingabe-Variable zugreifen, die das Eingabe-Element selbst ist, können wir wieder auf die benutzerdefinierte Gültigkeitsmethode der Stadt zugreifen, aber dieses Mal setzen Sie es einfach auf eine leere Zeichenfolge. Wenn wir dies tun, speichern, ist es jetzt gültig. Wir haben diesen Fehler nicht mehr. Der Benutzer kann nicht eingeben und weiterleiten. Okay, Clyde, ich verstehe es, ich verstehe es. Aber wie nutzen wir das eigentlich in einem praktischen Sinne? Nun, warum haben wir uns gerade ein Beispiel angesehen, wir werden diese Eingabe vom Typ ändern, nimmt eine Eingabe vom Typ E-Mail. Und wenn es eine Ära im Format dieser E-Mail gibt, warum zeigen wir nicht unsere eigene benutzerdefinierte Fehlermeldung an? Wie toll das wird so viel Spaß machen. Cp kann es mal gehen. Also pausieren Sie das Video, sehen Sie, ob Sie es ausprobieren können, und schneiden Sie es dann zusammen. Hast du es mal gefahren? Ich hoffe es. Aber wenn nicht, mach dir keine Sorgen, lass es uns jetzt zusammen machen. Das erste, was ich tun möchte, ist, dass ich diese Eingabe vom Typ Text entfernen möchte, okay? Und wir wollen diese Eingaben durch Eingabe vom Typ E-Mail ersetzen. Das wollen wir tun. Wir können ihm einen Namen „männlich“ geben. Wir können ihm einen Ausweis des Männchens geben. Und weil wir ihm eine ID des männlichen während geben, und wir spezifizieren das Etikett hier von männlich. Und wir können sagen, bitte geben Sie mir eine gültige E-Mail-Adresse, oder? Sehr, sehr einfach. Also jetzt haben wir eine E-Mail, aber wenn der Benutzer versucht, nur zufälligen Text zu senden, erhalten wir diese Fehlermeldung vom Browser, aber vielleicht wollen wir unsere eigene benutzerdefinierte Fehlermeldung. Wir mögen den Browser nicht. Wie machen wir es? Nun, lassen Sie uns jetzt etwas JavaScript programmieren. Es ist keine Texteingabe mehr, es ist nur die endgültige Variable als E-Mail-Eingabe. Lassen Sie uns einfach alles andere löschen, Entfernen von Lärm. Also hier sind wir. Wir haben unser E-Mail-Eingabe-Element. Was wir jetzt tun können, ist, dass wir einen Ereignis-Listener hinzufügen können. Wir können uns unsere E-Mail-Eingaben holen. Existieren Sie die Methode „add event listener“. Das Ereignis, auf das wir hören möchten, ist ein Eingabeereignis. Also, jedes Mal, wenn der Benutzer Charaktertypen, wenn das passiert, was wollen wir tun? Nun, wir wollen eine Callback-Funktion ausführen. Tut mir leid, ich habe eine zu viele Klammern. Sie brauchen hier draußen eine Klammer. Da gehen wir. Und was wollen wir in unserer Callback-Funktion passieren? Nun, wir wollen sagen, wenn richtig, bei dieser E-Mail-Eingabe, die Typ-Diskrepanz auf true gesetzt ist, dann wissen wir, dass es ein Problem gibt, richtig? Denn im Hintergrund, wenn wir die Art der E-Mail angeben, wissen wir, dass es in diesem Fall einen regulären Ausdruck gibt, der vom Browser erstellt wird. Und wir wissen, im Netz nicht erfüllen, dass der Typ nicht übereinstimmt Eigenschaft. Und denken Sie daran, mit ihren Eigenschaften befindet, Das ist richtig. Es befindet sich auf dem Gültigkeitsstatusobjekt. Wir sagen nie „wahr“. Wir wissen, dass es einen Fehler gibt. Und deshalb möchten wir unsere eigene benutzerdefinierte Fehlermeldung anzeigen. Wenn es falsch ist, können wir diese benutzerdefinierte Gültigkeitsmethodeeinfach in eine leere Zeichenfolge setzen diese benutzerdefinierte Gültigkeitsmethode und daher wird der Browser sie an den Server senden lassen. Wenn wir also auf diese E-Mail-Eingabe zugreifen, greifen wir auf sein Gültigkeitsstatusobjekt dort zu. Denken Sie daran, dass es eine Typ-Unübereinstimmung Eigenschaft gab. Wenn Schulden auf wahr gesetzt ist, dann wollen wir, was sie verfolgen, wir wollen, dass sitzen benutzerdefinierte Gültigkeitsmethode zugreifen. Mach dir keine Sorgen. Lasst uns verlassen. Wir greifen auf unsere E-Mail-Eingaben zu. Und hier haben wir die Gültigkeit des CID-Kunden. Und wir können einfach sagen, ich erwarte eine echte E-Mail-Adresse, bitte. Okay, also gehen wir. Wir haben es buchstäblich getan. Und wenn Sie JavaScript kennen, einmal, wenn MIT, haben wir einmal, wenn MIT,auch eine else-Anweisung, richtig, denn wenn die E-Mail-Gültigkeitstyp nicht übereinstimmt auf false gesetzt ist, dann wollen wir, dass dies sonst ausgeführt wird. Und was wollen wir hier passieren? Will natürlich, wir wollen diese Menge benutzerdefinierte Gültigkeitsnachricht auf eine Branche setzen. Und deshalb habe ich dir das vorangegangene Beispiel gezeigt, richtig? Wo wir Silizium in String mussten, damit es gültig ist. Also jetzt, wenn der Benutzer zufälligen Text eingibt, klicken wir auf Senden, es gibt unsere eigene benutzerdefinierte Fehlermeldung. Wie genial. Aber natürlich, wenn die Benutzer Arten von gültigen E-Mail-Adresse und ich werde auf Senden klicken, wir sind alle gut zu gehen. Macht das Sinn? Ich will nicht, dass du dich im Detail verirrst. Alles, was wir taten, war, dass wir unseren eigenen Ereignis-Listener zu dieser E-Mail-Eingabe hinzugefügt haben. Das Ereignis, auf das wir hören, ist ein Eingabeereignis jedes Mal, wenn das feuert, wir führen diese if else Anweisung aus, ich kann Ihnen tatsächlich beweisen, was passiert. Vielleicht wird das helfen, wenn Sie unklar machen. Aber was wir tun können, ist jedes Mal, wenn das Eingabeereignis ausgelöst wird, was haben wir Konsolen an der Konsole protokolliert? Diese E-Mail-Eingabe Gültigkeit, Zustandsobjekt. Alles klar, lassen Sie uns die Konsole ausloggen. Gehen wir zum Browser. Öffnen Sie die Konsole. Richtig, Geben wir einfach den Buchstaben a ein. Wir haben den Gültigkeitsstatus. Wenn wir das öffnen, haben wir diese Art Unübereinstimmung Eigenschaft. Und eine Typ-Diskrepanz ist derzeit auf true gesetzt. Und es ist auf true gesetzt, weil wir diesen Eingabetyp von E-Mail gegeben haben und weil es sich um eine Art von E-Mail handelt, gibt es eine Regex, die im richtigen Format vorliegen muss. Sobald es nicht das richtige Format a at a ist. Wenn wir dies jetzt öffnen, wird diese Typ-Diskrepanz auf false gesetzt und weil es auf false ist, möchten wir, dass der Benutzer in der Lage sein, das Formular zu senden. Da gehen wir. Der Benutzer kann es tun, Sir, wie genial. Ich hoffe, es ergibt Sinn. Ich hoffe, Sie haben darauf geachtet, denn in der nächsten Vorlesung möchte ich Ihnen eine Herausforderung geben und ich möchte sehen, ob Sie herausfinden können, wie es geht. Super-aufgeregt und wir sehen uns in der nächsten Vorlesung. 9. Intro herausfordern – intro: Willkommen zu dieser sehr coolen Herausforderung, bei der ich möchte, dass Sie versuchen, diese Einschränkungsvalidierungs-API oder von ISAF zu verwenden. Und ich werde ehrlich zu dir sein, ich erwarte nicht, dass du das richtig machst, aber gib es einfach mal, versuche, so weit du kannst. Was soll ich von dir machen? Was ist die Herausforderung? Nun, lassen Sie mich einfach leicht hineinzoomen. Ich möchte nur ein Texteingabefeld erstellen, wobei ein Benutzer den Benutzernamen eingeben muss, aber der Benutzername muss mindestens einen Klein- und Großbuchstaben haben. Wenn der Benutzer nur versucht, es so zu senden, ohne etwas zu tippen, möchte ich eine benutzerdefinierte Fehlermeldung, albern, glaube nicht an irgendetwas gebunden. Wenn der Benutzer anfängt, nur Kleinbuchstaben einzugeben und versucht zu senden, erhalten wir eine weitere benutzerdefinierte Fehlermeldung sind genial. Aber natürlich, wenn der Benutzer jetzt einen Großbuchstaben hat und auf Senden klickt, erlaubt uns der Browser, ein sehr einfaches Beispiel zu durchlaufen. Weißt du was? Lassen Sie mich Ihnen nur einen Hinweis geben. Und dann wird ein Hinweis der reguläre Ausdruck sein, der verwendet wird, bekannt als der Wert des Patentattributs. Lassen Sie mich Ihnen zeigen, wie es aussieht. Also, da gehst du hin. Ich möchte, dass Sie diesen Wert in den Musterattributen verwenden. Lassen Sie mich es Ihnen kurz erklären. Erstens haben wir die Klammern, die beiden Klammern, die zwei Gruppen sind. Okay, wir beginnen jede Gruppe mit einem Fragezeichen, Gleichheitszeichen. Dies ist nur bekannt und RegEx als positiver Lookahead. Alles, was ich hier erreichen möchte, wie ich versuche zu sagen, können wir entweder Klein- und Großbuchstaben eingeben oder Groß- und Kleinbuchstaben eingeben, die Reihenfolge spielt keine Rolle. Das nächste, was Sie bemerken werden, ist, dass wir diesen vollen Halt haben. vollständige Stopp passt zu jedem einzelnen Zeichen. Dann setzst du einen Asterix ein. Die Sternchen stimmen mit dem vorhergehenden Zeichen 0 oder mehrmals überein. Und dann haben wir die eckigen Klammern, die wir in diesem Kurs schon viele Male gesehen haben, mit den Zeichen a2. Grundsätzlich ist es nur erlaubt, einen Bereich von Kleinbuchstaben zwischen ein. und sagte. Ich versuche zu sagen, in dieser ersten Gruppe ist, dass der Benutzer so viele Zeichen eingeben kann , wie sie zwischen a und z gingen und jetzt dieses gesamte Muster beenden kann. Durch einen Quantifizierer. Ich habe diese geschweiften Klammern, was der RegEx im Grunde sagt, dass sie mindestens ein Mal und höchstens 50 Mal mit den vorhergehenden Gruppen übereinstimmen sollen . Das ist alles, was das bedeutet. Das ist also meine RegEx, die offensichtlich ist. Ich benutzte mich frei, um das einfach zu kopieren, es einzufügen und dann herauszufinden, wie ich diese Lösung gemacht habe. Ich werde Ihnen einen Hinweis auf diesen Eingabetyp geben. Ich werde auf das ungültige Ereignis hören. Denken Sie daran, dass ich erwähnt habe, dass diese Art von Mismatch Eigenschaft ein ungültiges Ereignis auslöst, wenn alles, was inter ist, nicht mit dem Musterfeld übereinstimmt. Deshalb höre ich auf ein ungültiges Ereignis. Wenn ein gültiges Ereignis ausgelöst wird, möchte ich natürlich überprüfen, ob der Wert nichts ist. Denn wenn es nichts ist, möchte ich nur diese Fehlermeldung albern, aber Sie haben nichts getippt. Marimba, versuchen Sie es jetzt einzureichen, ich möchte diese Fehlermeldung. Also müssen wir überprüfen, ob der tatsächliche Wert eine leere Zeichenfolge ist. Wenn es keine leere Zeichenfolge ist, aber wir sind immer noch dorthin dann gültige Ära. Wir wissen dann, dass es nicht mindestens einen Groß- und einen Kleinbuchstaben angegeben hat. Zum Beispiel wissen wir, dass dies passieren wird, und wir müssen ihnen sagen, dass sie einen Großbuchstaben brauchen und einen, der auf viel zu nehmen, es zu gehen, zu sehen, wie weit Sie gehen können, und ich werde Sie im Lösungsvideo sehen. 10. Challenge – setCustomValidity: Hast du es mal ausprobiert? Ich hoffe es. Ich hoffe es, aber keine Sorge, er konnte es nicht ganz herausfinden. Es ist ein bisschen schwierig und es gibt eine sehr knifflige Nuance bei der Arbeit mit der Einschränkungsvalidierung API. Also werde ich Ihnen zeigen, wie wir es lösen. Bevor wir das tun, hat er unser HTML. Wir haben ein Label, das nur nach dem Benutzernamen fragt. Und natürlich haben wir unseren Eingabetyp von Text. Wir haben unser erworbenes Attribut am Tag. Und sie sind das Muster, die Regex, über die wir im Einführungsvideo gesprochen haben. Sehr, sehr einfach. Und wenn wir zum Browser gehen, sieht es so aus. Aber im Moment kann der Benutzer, offensichtlich werden die USA daran gehindert, das Formular zu senden. Wir haben eine Standard-Fehlermeldung, die wir ändern möchten und die Verwendung und geben Sie einfach alles ein. Oh, natürlich schätzt er die Takelage. Kleinere Großbuchstaben, Großbuchstaben, dann kann der Benutzer einreichen. Aber wir wollen unsere eigenen benutzerdefinierten Fehlermeldungen. Wie funktioniert es? Nun, wie Sie wissen, müssen wir alles in Skript-Tags umschließen. Das erste, was wir tun wollen, ist, dass wir auf diese Einschränkungs-Validierungs-API zugreifen möchten. Um das zu tun, müssen wir mit einer Schnittstelle arbeiten. Der, mit dem wir hier arbeiten werden, ist dieses Eingabeelement. Also lasst es uns schnappen. Lassen Sie uns eine Variable namens Namenseingaben definieren. Und wir können unsere Dokumente Abfrage Selektor zugreifen, und wir wollen Abfrage wählen Sie unsere Eingabeelemente. Das ist wirklich so einfach. Das ist der erste Schritt abgeschlossen. Nun, was ich tun möchte, ist, dass ich auf diese Variable zugreifen möchte, aka das Element der Eingabe. Und wir wollen unseren eigenen Event-Listener hinzufügen. Und ich gab dir einen Hinweis auf neun. Ich möchte auf den Invaliden hören. Und das ungültige Ereignis wird jedes Mal ausgelöst, wenn der Wert der Eingabe diesen Patentrechten nicht entspricht. Außerdem werden wir dieses ungültige Ereignis erhalten, wenn sie erforderlich Wert angegeben ist. Aber natürlich gibt es keinen Wert, der mit dieser Eingabe verbunden ist. Also, wenn dieses Ereignis gefeuert wird, was wollen wir dann passieren? Nun, wir wollen ausführen, ich werde Callback-Funktion. Lassen Sie uns das erste Problem anpacken. Und das erste Problem ist, wenn nichts in das Eingabefeld eingegeben wird, na ja , in diesem Fall wissen wir, dass ich die Eingabe einen Wert haben werde. Und dieser Wert wird eine leere Zeichenfolge sein, richtig? Es wird nichts sein. Und wenn das passiert, wenn dies wahr ist, dann wollen wir unsere eigene benutzerdefinierte Fehlermeldung definieren. Wir wissen bereits, wie das geht. Wir können auf alle Elemente zugreifen. Und jetzt verwenden wir die Einschränkungsvalidierung API, da wir direkt auf die benutzerdefinierte Validitätsnachricht des Sitzes zugreifen können. Wir können einfach das dumme Bali sagen. Sie haben nichts gelehrt. Ratten und wir können das retten. Lassen Sie uns zum Browser gehen und schmeckte den Browser übertragen. Und da gehen wir, wir haben unsere eigene benutzerdefinierte Fehlermeldung. Aber Sie werden feststellen, wenn der Benutzer jetzt Zeichen eingibt und versucht, zu senden, erhalten wir diese Fehlermeldung. Da denken Sie daran, dass ich sagte, sobald wir die benutzerdefinierte Gültigkeitsmethode sig verwenden, sagen wir dem Browser, dass dieses Element ungültig ist , unabhängig davon, ob es tatsächlich nicht mehr ungültig ist. Und das ist die kleine Nuance, von der ich dir vorhin erzählt habe. Aber wie auch immer, wir werden das in Kürze lösen. Wir haben uns mit der ersten Ausgabe befasst. Wir erhalten ein ungültiges Ereignis und die Namenseingabe hat keinen Wert. Also haben wir uns mit diesem Szenario beschäftigt. Jetzt beschäftigen wir uns mit dem Knicks-Szenario. Also, wenn wir diesen anderen Block erreichen, wissen wir, dass ein, wir haben ein ungültiges Ereignis, und B, wir wissen, dass der Benutzer einige Zeichen eingegeben hat. Also wieder, lassen Sie uns unsere eigene benutzerdefinierte Fehlermeldung Sitz Kundengültigkeit Methode setzen. Und hier können wir sagen, dass Benutzernamen mindestens einen Groß- und einen Kleinbuchstaben enthalten müssen . Versuchen Sie es noch einmal. Also lasst uns das retten. Gehen wir zum Browser und testen Sie dies verrottet. Der Benutzer fängt an, Klicks einzugeben, wir erhalten unsere eigenen benutzerdefinierten Zwischenprodukte. Sehr, sehr cool. Aber Sie werden feststellen, jetzt haben wir ein Problem, denn wenn der Benutzer einen Großbuchstaben eingibt, so haben wir einen Groß- und Kleinbuchstaben. Wenn der Benutzer einreicht, werden wir in diesem ewigen Zustand Weg sein. Wir haben immer eine Ära. Denken Sie daran, dass wir die benutzerdefinierte Gültigkeitsmethode SEC verwendet haben, die dem Browser mitteilt, dass dieses Eingabefeld immer ungültig ist. Wie halten wir es auf? Wir erinnern uns, dass wir die benutzerdefinierte Gültigkeit Miss setzen müssen. Eine Nachricht an eine leere Zeichenfolge, und wenn es sich um eine leere Zeichenfolge handelt, ist sie gültig. Erinnerst du dich daran? Aber wir können es nicht sehen. Wissen Sie, wenn wir uns unseren Code ansehen, können wir die festgelegte benutzerdefinierte Gültigkeitsnachricht hier nicht auf eine leere Zeichenfolge setzen, da dies der Fall ist, wenn wir es mit einer inneren gültigen Ära zu tun haben. Also, was wir eigentlich tun müssen, und das ist die leichte Nuance oder Stillzeit, richtig? Wir müssen auf unsere Namenseingabe zugreifen, einen weiteren Ereignis-Listener hinzufügen. Und diese Ereignis-Listener werden nur auf die Eingabe hören, richtig? Jedes Mal, wenn ein Zeichen eingegeben wird, möchte ich den Lebenslauf hören und wir wollen auf unsere Namenseingabe zugreifen. Und dieses Mal möchte ich an der benutzerdefinierten Gültigkeit zu einer leeren Zeichenfolge sitzen. Alles, was ich tun möchte und um zu beweisen, dass das funktioniert, gehen wir zum Browser. Der Benutzer gibt nichts ein. Es ist eine Fehlermeldung, fängt an zu tippen. Lassen Sie uns einen wichtigen D Treuhändergipfel machen. Wir dürfen dies tun, wenn der Benutzer nur Kleinbuchstaben eingibt und auf Senden klickt, erhalten wir eine benutzerdefinierte Fehlermeldung. Aber hast du bemerkt, dass es eine Problemidee gibt, Studenten? Hast du es bemerkt? Es war sehr, sehr leicht, aber Sie haben es vielleicht abgeholt und wir wissen, dass der erste Schritt funktioniert. Also Lee glaubte, nichts eingegeben, aber wenn jetzt die Benutzertypen von Charakter, ein Blick auf, dass wir die Fehlermeldung vom Browser angezeigt bekommen. Wir erhalten nicht unsere benutzerdefinierte Fehlermeldung. In der Tat werden wir nur unsere Kundennachricht erhalten, wenn der Benutzer auf Absenden klickt. Denn nur wenn Absender ausgegeben werden, wird diese ungültige Fehlermeldung ausgegeben und nur dann gelten unsere benutzerdefinierten Fehlermeldungen. Wir wollen nicht, dass das passiert. Also jedes Mal, wenn ein Charakter gedrückt wird, richtig? Mit anderen Worten, jedes Mal, wenn ein Eingabe-Ereignis ausgelöst wird, möchten wir eine andere Methode, unsere Einschränkungs-Validierungs-API, auslösen , in der Sie die Gültigkeitsminute für Küken ausführen möchten, denn wenn das falsch ist, das ungültige Ereignis ausgelöst wird und unser Code wird ausgeführt. Wenn wir das bei jeder einzelnen Iteration tun, sollte das unser Problem lösen. Lassen Sie uns den Browser aktualisieren. Okay, Wir können dumme glauben, nicht an nichts gebunden, aber wenn jetzt die Benutzertypen von Charakter, ein Buch, wie genial ist, dass wir unsere eigene benutzerdefinierte Fehlermeldung bekommen. Und natürlich wird das passieren, bis wir erneut auf „Absenden“ klicken können. Es wird passieren, bis wir ein Kapital haben. Da gehen wir. Und wenn wir uns jetzt unterwerfen, haben wir es erlaubt. Der Benutzer kann einfach ein Großbuchstabe D. Lassen Sie uns einfach Großbuchstaben machen. Es funktioniert nicht, es funktioniert nicht. Aber sobald der Benutzer dann in Kleinbuchstaben geht, können wir jetzt einreichen. Ich weiß, ich weiß, dass das ziemlich verwirrend sein kann, aber lassen Sie uns einfach zu dem Code springen ist wirklich ziemlich intuitiv, wenn Sie verstehen, was los ist. Wenn wir die benutzerdefinierte Gültigkeitsmethode SETT verwenden und wir schreiben unsere eigene benutzerdefinierte Nachricht, wir im Grunde in einem ewigen Zustand einer Ära, wir sagen dem Browser, dass die Eingabe ungültig ist und unsere benutzerdefinierte Fehlermeldung angezeigt werden sollte. Deshalb konnten wir uns hier nicht nur auf unseren einen Codeblock verlassen , indem wir auf das ungültige Ereignis warteten, wir mussten eine andere Art von Ereignis erstellen, auf die wir im Netz hören , ist jedes Mal, wenn die Benutzertypen von Zeichen. Fangen wir dort an. Wir wissen, dass wir zwei Dinge tun, wenn dieses Eingabe-Ereignis ausgelöst wird. Lassen Sie mich es anders sagen. Jedes Mal, wenn die Benutzertypen von Charakter, wir tun zwei Dinge. Erstens, wir beginnen damit, dass wir sagen, Hey, suchen wir den Wert der benutzerdefinierten Gültigkeitsmethoden in eine leere Zeichenfolge. Mit anderen Worten, lassen Sie uns beginnen, indem wir sagen, dass wir in einem gültigen Zustand sind. Ich weiß, es klingt seltsam, aber hören Sie mich an. Das nächste, was wir tun, ist, dass wir diese Methode für die Gültigkeit der Küken abfeuern. Und denken Sie daran, in der Vorlesung besprechen wir das. Wenn bei dieser Eingabe alles in Ordnung ist, wird true zurückgegeben und nichts anderes passiert. Daher wird der Browser das Formular absenden. Aber wenn es einen Fehler gibt, dann wissen wir, dass diese Prüfgültigkeitsmethode ein in gültigem Ereignis ausgelöst wird. Und in diesem Fall wird unser nächster Block des gesamten Codes den gesamten Prozess erfassen. Und deshalb zeigt es dem Benutzer entweder die Fehlermeldung albern an, glaube, nichts getippt, wenn es eine leere Zeichenfolge ist. Alternativ, in der else-Anweisung, wenn der Benutzer Zeichen eingegeben hat, aber wir erhalten immer noch diese ungültige Ära. Wir haben noch eine Nachricht. Benutzernamen müssen mindestens einen Groß- und einen Kleinbuchstaben enthalten. Versuchen Sie es erneut, und dann fangen wir wieder an. Sagen wir, der Benutzer gibt einen Klein- und Großbuchstaben ein. In diesem Fall setzen wir Benutzertypen ein, dass Großbuchstaben, dieser erste Codeblock wird angewendet, weil es ein Eingabeereignis ist, Sie werden es auf gültig setzen. Und dann wird die Prüfgültigkeitsmethode true zurückgeben. Und deshalb dürfen wir das Formular einreichen. Ich weiß, dass es ziemlich komplex sein kann, aber gehen Sie wirklich wieder durch, gehen Sie durch diese Vorlesung ein paar Mal, stellen Sie sicher, dass Sie verstehen, dass es Ihnen wirklich helfen wird auf der Strecke. Und wenn man es wirklich erreicht, ist es wirklich nicht wahr. Also, ich hoffe, du hattest viel Spaß in diesem Vortrag. Ich weiß, dass ich es getan habe, aber lass uns weitermachen. Wir sehen uns in der nächsten Vorlesung. 11. Kurs Outro: Das war ein lustiger Kurs, nicht wahr. Wir haben gerade etwas über die clientseitige Validierung erfahren. Die beiden Typen sind integrierte Validierung und JavaScript-Validierung. Wir haben eine benutzerdefinierte Sit-Validitätsmethode verwendet, um unsere eigenen Fehlermeldungen zu schreiben. Wie lustig. Und Sie können beginnen zu sehen, wie wichtig Validierung ist, oder? Und es ist nicht so schwer zu implementieren. Wir müssen es nur etwas überlegen und Sie müssen nur ein bisschen HTML und JavaScript kennen und vielleicht ein bisschen RIG schmerzen, wenn Sie ein bisschen mehr kochen wollen. Aber jedenfalls haben wir einen langen Weg zurückgelegt. Und denken Sie daran, ich sage immer, dass clientseitige Validierungen nur ein Stück zum Puzzle. Sie müssen auch serverseitige Validierung durchführen. Und das bringt mich auf ein anderes ganzes Thema. Und so richten Sie einen Server ein? Perseus Form Tochter. Also in der nächsten Klasse möchte ich anfangen, über Service zu sprechen, einen Anruf. Warten Sie, und ich hoffe, Sie bald zu sehen. Adios.