Vergleichen Sie den Wert der Zeichenfolge mit der Eingabe von Benutzer

Question

Können Sie mir sagen, wie ich einen Benutzer ihre Daten in einem Formular (E-Mail und Passwort) eingeben können und wenn sie sich registrieren ("Registar"), werden die Daten auf Variablen gespeichert das kann direkt danach verwendet werden, wenn der Benutzer sich entscheidet, auf "Entrar" zu klicken, damit er eingeben kann, ohne die Standardinformationen zu verwenden.

Dies ist eine Arbeit für die Schule, und ich kann keine Datenbanken verwenden, nur Javascript und JQuery.

Dies ist, was ich bis jetzt (es ist eine Teilkopie der Website, die ich mache) habe.

BTW: die ID auf der Schaltfläche wird für CSS verwendet und zusätzliche Sachen, die es nicht gibt, gibt es auch zum Stylen der Seite.

<script type="text/javascript"> 
 
     var newuser; 
 
     var newpassword; 
 

 
     function registoTXT() { 
 
      newuser = document.getElementById('inputUser').value; 
 
      newpassword = document.getElementById('inputPassword').value; 
 
      alert("Utilizador Registado!"); 
 
     } 
 

 
     function check(form) { 
 
      if ((form.usermail.value == "sparedes@isec.pt" && form.password.value == "12345678") || (form.username.value == newuser.value && form.password.value == newpassword.value)) { 
 
       window.open('VIPZone.html', "_self") 
 
      } else { 
 
       alert("E-mail ou Password Inválido(s)!") 
 
      } 
 
     } 
 
    </script>

<div class="contents"> 
 
     <h2>Login</h2> 
 
     <blockquote> 
 
      <form name="login"> 
 
       <div class="divTableBody"> 
 
        <div class="divTable"> 
 
         <div class="conteudoLogin"> 
 
          <div class="divTableRow"> 
 
           <div class="divTableCell"> 
 
            <label><b>E-mail</b></label> 
 
           </div> 
 
           <div class="divTableCell"> 
 
            <input id="inputUser" type="email" name="usermail" placeholder="Endereço@email.com" required> 
 
           </div> 
 
          </div> 
 
          <div class="divTableRow"> 
 
           <div class="divTableCell"> 
 
            <label><b>Password</b></label> 
 
           </div> 
 
           <div class="divTableCell"> 
 
            <input id="inputPassword" type="password" name="password" placeholder="Password" required> 
 
           </div> 
 
          </div> 
 
          <br> 
 
          <div class="divTableRow"> 
 
           <div class="divTableCell"> 
 
            <button id="botaologin" onclick="check(this.form)" type="button">Entrar</button> &nbsp; 
 
            <button id="botaologin" onclick="registoTXT()" type="button">Registar</button> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </blockquote> 
 
    </div>

Answer 1

Es gibt mehrere Probleme in Ihrem gemeinsamen Code-Schnipsel:

1. botaologin ID für mehrere DOM-Elemente verwendet wird.
2. Die if-Bedingung in check(form) hat mehrere Probleme. Hier ist eine feste Version:

   if ((form.elements.usermail.value === "sparedes@isec.pt" & & form.elements.password.value === "12345678") || (form.elements.usermail.value === newuser & & form.elements.password.value === newpassword))

Answer 2

Sie können es mit local/global variable, javascript cookies oder local storage. Ich benutze nur die letzte, also wird deine js so aussehen.

var newuser; 
    var newpassword; 

    function registoTXT() { 
      newuser = document.getElementById('inputUser').value; 
      newpassword = document.getElementById('inputPassword').value; 
      localStorage.setItem('usermail', newuser); 
      localStorage.setItem('userpassword',newpassword); 
      alert("Utilizador Registado!"); 
     } 

function check(form) { 
      var userName = localStorage.getItem("usermail"); 
      var passWord = localStorage.getItem("userpassword"); 
      console.log(userName,passWord,form.usermail.value,form.password.value) 
      if ((form.usermail.value === userName && form.password.value === passWord) || (form.username.value === newuser.value && form.password.value === newpassword.value)) { 
       alert("Open new window goes here"); 

      } else { 
       alert("E-mail ou Password Inválido(s)!") 
      } 
     } 

Answer 3

Hier sind ein paar Dinge los.

Zuerst, ID nicht mehr als einmal verwenden. Wenn ein Element wiederholt wird und Sie es stylen möchten, verwenden Sie eine Klasse. Es gibt nichts, was Sie davon abhalten könnte, eine ID zu verwenden, um es auch zu identifizieren, wenn Sie möchten. mochte immer diese Erklärung von CSS Star Wars CSS Specificity

Zum Beispiel:

<p class="my-class" id="my-id">Only one ID!</p> 

Zweite, nicht Onclick es sei denn, aus irgendeinem seltsamen Grund verwenden Sie müssen. Sie können Ereignis-Listener-Elemente mit Vanille js oder mit jQuery

Vanilla befestigen:

document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById('botaologin').addEventListener('click',function(){ 
     // do stuff here 
    }); 
}); 

jQuery

$(document).ready(function(){ 
    $('#botaologin').click(function(){ 
     // do stuff here 
    }); 
}); 

Dritte, Entschuldigungen für dritte Ihre eigentliche Frage Adressierung.

Sie haben hier ein paar Optionen.

1. Sie können speichern als globale
2. Sie in lokalen Bereich speichern
3. Sie in localstorage speichern
4. Sie in einem Cookie gespeichert werden können

1) Dies ist eine Art von schlechte Praxis, und Sie sollten diese Art von Sachen wahrscheinlich in ein Objekt wickeln, aber hier ist die die schnelle und schmutzige Version

2) Fast die gleichen, aber der Variable außerhalb der Funktion nicht verfügbar

  document.addEventListener('DOMContentLoaded', function(){ 

       document.getElementById('set-global').addEventListener('click', function(){ 
        var myLocal = "I'm a local!"; 
        alert(myLocal); 
       }); 
      }); 

3) ist nützlich, wenn Sie die Daten müssen bestehen bleiben, aber dies nicht missbrauchen - es ist kein Ersatz für eine Datenbank.

Set Lagergut

localStorage.setItem("nameyourdata", "yourdata"); 

Get Lagergut

localStorage.getItem("nameyourdata"); 

4) Sehr ähnlich localstorage, außer mit ein paar verschiedene Optionen. Sie können einstellen, wenn es abgelaufen ist und ob es nur über https etc Set and Get Cookie

Für beide 3 und 4, wenn Sie ein Objekt zu speichern, verwenden Sie JSON.stringify (Daten) zu speichern und JSON.parse (Daten) beim jeweiligen Einstellen und Abrufen.