海伊，
我是一个用java脚本写作的初学者，我正在尝试复制Instagram，所以我需要表单和验证方面的帮助，我还想用本地存储保存它。
我在代码中找不到问题，也不知道如何编写本地存储代码。
scripts.js
const VornameInput = document.getElementById("Vorname-input");
const NachnameInput = document.getElementById("Nachname-input");
const GeburtstagInput = document.getElementById("Geburtstag-input");
const ueberMichInput = document.getElementById("ueber-mich");
const SpeicherButton = document.getElementById("enter-button");
const EmailInput =document.getElementById("email-input");
const EingabeInput = document.getElementById("Eingabe");
SpeicherButton.addEventListener("click", enterEvent);
const Vorname = VornameInput.value;
const Nachname = NachnameInput.value;
const Geburtstag = GeburtstagInput.value;
const ueberMich = ueberMichInput.value;
const Email = EmailInput.value;
function felderInKonsoleAusgeben () {
console.log("Vorname:", Vorname);
console.log("Nachname:", Nachname);
console.log("Geburtstag:", Geburtstag);
console.log("UeberMich:", ueberMich);
console.log("Email:", EmailInput);
}
function validierung(Vorname,Nachname,Geburtstag) {
if (VornameInput.value == "" || NachnameInput.value == "" || isNaN(Number(GeburtstagInput.valueAsNumber))){
alert ("Bitte fülle alle Felder aus! ");
return false;
}
else
alert ("Eingaben wurden gespeichert");
return true; }
function validierungEmail (EmailInput){
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (input.value.match(validRegex)) {
alert("Gültige Email Adresse!");
return true;
} else {
alert("Ungültige Email Adresse!");
return false; }
function enterEvent(evt) {
evt.preventDefault();
felderInKonsoleAusgeben();
validierung(Vorname, Nachname, Geburtstag);
validierungEmail(EmailInput);
}
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Das wird einmal ein Instagram Clone" />
<meta name="keywords" content="Instagram, Instagram 2.0, Clone" />
<meta name="author" content="Emily Schlachter" />
<link rel="stylesheet" href="css/style.css" />
<script src="scripts.js" defer></script>
<title>Instagram 2.0</title>
</head>
<body>
<header>
<div > <a href="instagram-clone_schlachter.html"> <h1>Gramml</h1> </a ></div>
</header>
<ul id="navibereich">
<li id="navi01"> <a href="profil.html"> <h2>Mein Profil </h2> </a> </li>
<li id="navi02"> <a href="instagram-clone_schlachter.html"> <h2>Entdecken</h2></a> </li>
<li id="navi01"> <a href="upload.html"><h2>Upload Picture</h2></a> </li>
</ul>
<div class="label">
<label>Suche:</label>
<input type="text"/>
</div>
<main>
<!-- Eingabefeld -->
<div class="Eingabe" id="Eingabe">
<div class="field">
<input id="Vorname-input" type="text" name="vorname-input" placeholder="Vorname" />
</div>
<div class="field">
<input id="Nachname-input" type="text" name="Nachname-input " placeholder="Nachname" />
</div>
<div class="field">
<input id="email-input" type="text" name="email-input" placeholder="Email-Adresse" />
</div>
<div class="field">
<input id="Geburtstag-input" type="date" name="Geburtstag-input" placeholder="Geburtsdatum" />
</div>
<label>Über mich: <br> </label>
<textarea name="ueber-mich" id="ueber-mich" cols="40" rows="5" maxcols="35" placeholder="Über mich:" > </textarea>
</div>
<div class="Formelles">
<p> <input type="checkbox" name="AGB" value="News"> Datenschutzerklärung und AGB akzeptieren. </p>
</div>
<button id="enter-button" class=" button" type="submit">
Speichern
</button>
</main>
</body>
</html>
我只想获得一个验证共振峰，并将输入保存在本地存储中。
谢谢你的帮助！
您可以将所有需要的信息添加到类似obejct的中
const personInfo = {
"vorname": VornameInput.value,
"nachname": ...,
"geburtstag": ...,
"uebermich": ...,
"email": ...
}
然后你可以用将这个带有密钥的对象存储在本地存储器中
localStorage.setItem('personInfo',JSON.stringify(personInfo));
要取回，请使用
const pInfo = localStorage.getItem('personInfo');
看看这里https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage了解有关本地存储的更多信息