Implementierungscode der CSS-Formularvalidierungsfunktion

Rendern

Prinzip

Im Formularelement gibt es ein Musterattribut, mit dem reguläre Ausdrücke (wie Handynummer, E-Mail-Adresse, Personalausweis usw.) angepasst werden können. Die gültige Pseudoklasse kann mit Elementen übereinstimmen, die die Musterüberprüfung bestehen. Die ungültige Pseudoklasse hingegen kann mit Elementen übereinstimmen, die die Musterüberprüfung nicht bestehen. Sie können also tun, was Sie wollen. Das obige Effektdiagramm zeigt nur einige einfache Effekte. Für weitere Effekte und Einschränkungen können Sie Ihrer Fantasie freien Lauf lassen.

html

Das Layout ist sehr einfach. Input und Button sind Geschwisterknoten. Das erforderliche Attribut bedeutet, dass der Input-Inhalt überprüft werden muss.

<Abschnitt Klasse="Container">
  <input type="text" name="tel" placeholder="Bitte geben Sie Ihre Handynummer ein" pattern="^1[3456789]\d{9}$" erforderlich><br>
  <input type="text" name="tel" placeholder="Bitte geben Sie den Bestätigungscode ein" pattern="\d{4}" erforderlich><br>
  <button type="senden"></button>

CSS

Hier kommt der SCSS-Präprozessor zum Einsatz

Eingabe {
  //Button-Stil, wenn die Validierung erfolgreich ist&:valid {
    &~Schaltfläche {
      Zeigerereignisse: alle;
      Cursor: Zeiger;
      &::nach {
        Inhalt: „Senden: +1:“
      }
    }
  }
  //Button-Stil, wenn die Validierung fehlschlägt&:invalid {
    &~Schaltfläche {
      pointer-events: none; // Klickereignisse entfernen, um die Schaltfläche nicht mehr anklickbar zu machen&::after {
        Inhalt: „Nicht verifiziert:unamused:“
      }
    }
  }
}

Zusammenfassen

Oben sehen Sie den Implementierungscode der vom Editor eingeführten CSS-Formularvalidierungsfunktion. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!