JS, CSS und HTML zur Implementierung der Registrierungsseite
|
Eine mit HTML und CSS implementierte Registrierungsseitenvorlage. Ohne weitere Umschweife hier der Code! Update: Verwenden Sie JavaScript, um die Validierung von Benutzernamen- und Kennwortformularen zu implementieren. Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Registrierungsseite</title>
<Stil>
*{
Rand: 0px;
Polsterung: 0px;
Box-Größe: Rahmenbox;
}
Körper{
Hintergrund: URL("img/register_bg.png") No-Repeat-Center;
Polsterung oben: 25px;
}
.rg_layout{
Breite: 900px;
Höhe: 500px;
Rand: 8px durchgezogen #EEEEEE;
Hintergrundfarbe: weiß;
/* Div horizontal zentrieren */
Rand: automatisch;
}
.rg_left{
/*Rand: 1px durchgehend rot;*/
schweben: links;
Rand: 15px;
}
.rg_left > p:erstes-Kind{
Farbe: #FFD026;
Schriftgröße: 20px;
}
.rg_left > p:letztes-Kind{
Farbe: #A6A6A6;
Schriftgröße: 20px;
}
.rg_center{
schweben: links;
/* Rand: 1px durchgehend rot;*/
}
.rg_right{
/*Rand: 1px durchgehend rot;*/
schweben: rechts;
Rand: 15px;
}
.rg_right > p:erstes-Kind{
Schriftgröße: 15px;
}
.rg_right pa {
Farbe: rosa;
}
.td_left{
Breite: 100px;
Textausrichtung: rechts;
Höhe: 45px;
}
.td_right{
Polsterung links: 50px;
}
#Benutzername,#Passwort,#E-Mail,#Name,#Tel.,#Geburtstag,#Prüfcode{
Breite: 251px;
Höhe: 32px;
Rand: 1px durchgezogen #A6A6A6;
/*Randradius festlegen*/
Rahmenradius: 5px;
Polsterung links: 10px;
}
#Prüfcode{
Breite: 110px;
}
#img_check{
Höhe: 32px;
vertikale Ausrichtung: Mitte;
}
#btn_sub{
Breite: 150px;
Höhe: 40px;
Hintergrundfarbe: #FFD026;
Rand: 1px durchgezogen #FFD026;
}
.Fehler {
Farbe: rot;
}
#td_sub {
Polsterung links: 150px;
}
</Stil>
<Skript>
//Implementierung der Überprüfung des Kontokennwortformulars window.onload = function () {
//Binde das Onsubmit-Ereignis an das Formular //Das heißt, durch Klicken auf die Schaltfläche „Registrieren“ wird überprüft, ob Benutzername und Kennwort korrekt sind. document.getElementById("form").onsubmit = function () {
//Rufen Sie die Benutzerverifizierungsmethode auf checkUsername();
//Rufen Sie die Methode zur Kennwortüberprüfung auf checkPassword();
returniere checkUsername() und checkPassword();
}
//Binden Sie das Defokussierungsereignis jeweils an den Benutzernamen und das Passwort //Wenn der Fokus ausgeschaltet ist, wird geprüft, ob Benutzername und Passwort korrekt sind //Beachten Sie, dass die Methode hier keine Klammern enthält document.getElementById("username").onblur = checkUsername;
document.getElementById("Passwort").onblur = checkPassword;
}
//Benutzernamen prüfen Funktion checkUsername() {
//1. Holen Sie sich den Wert des Benutzernamens var username = document.getElementById("username").value;
//2. Definieren Sie den regulären Ausdruck var reg_username = /^\w{6,12}$/;
//3. Bestimmen Sie, ob der Wert der regulären Regel entspricht var flag = reg_username.test(username);
//4. Informationen zur Eingabeaufforderung var s_username = document.getElementById("s_username");
wenn (Flagge) {
//Eingabeaufforderung mit grünem Häkchen s_username.innerHTML = "<img width='35' height='25' src='img/gou.png' />";
} anders {
//Hinweis, dass der rote Benutzername falsch ist s_username.innerHTML = "Das Benutzernamenformat ist falsch";
}
Flagge zurückgeben;
}
//Passwort prüfen Funktion checkPassword() {
//1. Holen Sie sich den Wert des Benutzernamens var password = document.getElementById("password").value;
//2. Definieren Sie den regulären Ausdruck var reg_password = /^\w{6,12}$/;
// 3. Bestimmen Sie, ob der Wert der regulären Regel entspricht var flag = reg_password.test(password);
//4. Informationen zur Eingabeaufforderung var s_password = document.getElementById("s_password");
wenn (Flagge) {
//Eingabeaufforderung mit grünem Häkchen s_password.innerHTML = "<img width='35' height='25' src='img/gou.png' />";
} anders {
//Meldung, dass der rote Benutzername falsch ist s_password.innerHTML = "Das Passwortformat ist falsch";
}
Flagge zurückgeben;
}
</Skript>
</Kopf>
<Text>
<div Klasse="rg_layout">
<div Klasse="rg_left">
<p>Neue Benutzerregistrierung</p>
<p>BENUTZERREGISTRIERUNG</p>
</div>
<div Klasse="rg_center">
<div Klasse="rg_form">
<!--Definieren Sie das Formular-->
<form action="#" id="form" method="get">
<Tabelle>
<tr>
<td class="td_left"><label for="username">Benutzername</label></td>
<td Klasse="td_right">
<input type="text" name="username" id="username" placeholder="Bitte geben Sie Ihren Benutzernamen ein">
<span id="s_benutzername" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">Passwort</label></td>
<td Klasse="td_right">
<input type="password" name="password" id="password" placeholder="Bitte geben Sie Ihr Passwort ein">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">E-Mail</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein"></td>
</tr>
<tr>
<td class="td_left"><label für="name">Name</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="Bitte geben Sie Ihren Namen ein"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">Mobiltelefonnummer</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="Bitte geben Sie Ihre Telefonnummer ein"></td>
</tr>
<tr>
<td class="td_left"><label>Geschlecht</label></td>
<td Klasse="td_right">
<input type="radio" name="gender" value="male"> Männlich<input type="radio" name="gender" value="female"> Weiblich</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">Geburtsdatum</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="Bitte geben Sie Ihr Geburtsdatum ein"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >Bestätigungscode</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="Bitte geben Sie den Bestätigungscode ein">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="Registrieren"></td>
</tr>
</Tabelle>
</form>
</div>
</div>
<div Klasse="rg_right">
<p>Sie haben bereits ein Konto?<a href="#" >Jetzt anmelden</a></p>
</div>
</div>
</body>
</html>Wirkung der Operation:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detailliertes Tutorial zur Installation von Centos8 auf VMware
>>: Tutorial zur Installation von htop unter CentOS 8
Artikel empfehlen
Vue implementiert ein Suchfeld mit einer Lupe
In diesem Artikel erfahren Sie, wie Sie mit Vue e...
Reines CSS zum Implementieren der Funktion zum Öffnen und Schließen von Auswahlfeldern im iOS-Stil
1 Wirkung Demo-Adresse: https://www.albertyy.com/...
HTML+CSS-Div-Lösung bei Konflikten zwischen relativer und absoluter Breite
Div-Lösung bei Konflikten zwischen relativer und ...
MySql-Wissenspunkte: Transaktion, Index, Sperrprinzip und Nutzungsanalyse
Dieser Artikel erläutert anhand von Beispielen di...
Virtueller vsftpd-Benutzer basierend auf MySql-Authentifizierung
Inhaltsverzeichnis 1. MySQL-Installation 1.2 Tabe...
Remotedesktopverbindung zwischen Windows und Linux
Wenn es um eine Remotedesktopverbindung zu Linux ...
Lösung für den Fehler beim Starten von MySQL aufgrund unzureichenden Speicherplatzes in Ubuntu
Vorwort Kürzlich habe ich einer Tabelle in der Da...
React verwendet Routing, um zur Anmeldeoberfläche umzuleiten
Im vorherigen Artikel haben wir nach der Konfigur...
Detaillierte Erläuterung von 2 Methoden zum Synchronisieren der Netzwerkzeit im Linux/CentOS-System
Aus Hardwaregründen kann es vorkommen, dass die M...
Beispielcode für die programmgesteuerte Verarbeitung von CSS-Stilen
Vorteile eines programmatischen Ansatzes 1. Globa...
Beispiele für Dateneinschränkungen basierend auf einer MySQL-Datenbank und Einführung in fünf Integritätseinschränkungen
Um zu verhindern, dass nicht konforme Daten in di...
Detaillierte Erläuterung des Linux-Einzeilenbefehls zur Verarbeitung von Batchdateien
Vorwort Die beste Methode ist möglicherweise nich...
Detailliertes Tutorial zur Bereitstellung einer OpenStack-Umgebung basierend auf CentOS (OpenStack-Installation)
Effektanzeige: Controllerknoten zur Umgebungsvorb...
So führen Sie in MySQL eine Abfrage-Zwischenspeicherung durch und beheben Fehler
Wir alle wissen, dass wir die Eigenschaften der P...
Eine einfache Methode zum Zusammenführen und Entfernen doppelter MySQL-Tabellen
Szenario: Die gecrawlten Daten erzeugen eine Date...