So verwenden Sie JavaScript zur Formularvalidierung

1. Datengültigkeit und Sicherheitsüberprüfung. 3 Ebenen der Verifizierung.

• 1. Client-JS-Skriptüberprüfung

• 2. Server-Java-Servlet-Server-Sprachüberprüfung

• 3. Datenbankeinschränkungen

2. Durch Klicken auf den Submit-Button wird das entsprechende Event des Formularelements ausgelöst. (type="submit")

• onsubmit erhält einen wahren oder falschen Rückgabewert.

• gibt „true“ zurück, um das aktuelle Formular abzusenden,

• gibt „false“ zurück und sendet das Formular nicht ab

3. String-Objekt.

• Methoden von String-Objekten: string object.Methodenname();

• Gemeinsame Methoden:
  toLowerCase( ) Convert die Zeichenfolge in Kleinbuchstaben
  toUpperCase() Konvertieren Sie die Zeichenfolge in Großbuchstaben
  charAt(index) Geben Sie das Zeichen an der angegebenen Position zurück
  indexOf(string, index) Suchen Sie das erste Zeichen in einer angegebenen Zeichenfolge Darstellungsposition
  substring(zindex1.index2) Gibt die Zeichenfolge zurück, die sich zwischen dem angegebenen Index index1 und index2 befindet, und enthält die Zeichen, die dem Index index1 entsprechen, mit Ausnahme der Zeichen, die dem Index index2 entsprechen

• Überprüfung des E-Mail-Formats:

• 1. Verwenden Sie getElementById(), um den Wert von Email abzurufen.
  Verwenden Sie die String-Methode indexOf(), um zu bestimmen, ob der Wert von Email „Contains“ ist „@“- und „.“-Symbole.
  Entscheiden Sie, ob das Formular gesendet werden soll, basierend darauf, ob der Rückgabewert der Funktion wahr oder falsch ist.

  var mail=document.getElementById("email").value;
  if(mail.indexOf("@")==-1){
    alert("Email格式不正确\n必须包含@");
     return false;   
  }

• 2. Verwenden Sie das Längenattribut des String-Objekts, um die Länge von zu überprüfen das Passwort

  var pwd=document.getElementById("pwd").value;
  if(pwd.length<6){
        alert("密码必须等于或大于6个字符");
        return false; 
  }

• 3. Überprüfen Sie, ob das zweimal eingegebene Passwort konsistent ist

  var repwd=document.getElementById("repwd").value;
  if(pwd!=repwd){
       alert("两次输入的密码不一致");
       return false;   
  }

• 4 die Textlänge und verwenden Sie nacheinander die for-Schleife und die Methode substring(). Schneiden Sie ein einzelnes Zeichen ab und bestimmen Sie, ob jedes Zeichen eine Zahl ist

  var user=document.getElementById("user").value;
      for(var i=0;i<user.length;i++){
      var j=user.substring(i,i+1)
      if(isNaN(j)==false){
         alert("姓名中不能包含数字");
         return false;   
      }
  }

5, Eigenschaften, Methoden und Ereignisse des Textfeldobjekts

• Ereignis:
  onblur verliert den Fokus und wird ausgelöst, wenn der Cursor ein Textfeld verlässt
  onfocus erhält den Fokus und wird ausgelöst, wenn der Cursor in ein Textfeld
  eintritt onkeypress Eine Tastaturtaste wird gedrückt und losgelassen

• Methode:
  blur() Entfernt den Fokus aus dem Textfeld
  focus() Setzt den Fokus im Textfeld, d. h. Holen Sie sich den Mauszeiger
  select() Wählen Sie den Inhalt im Textfeld aus

• Attribute:

  1 Löschen Sie den ursprünglichen Inhalt im Textfeld und legen Sie fest Rand zu Rot:

  function clearText(){
      var mail=document.getElementById("email");
      if(mail.value=="请输入正确的电子邮箱"){
      mail.value="";
      mail.style.borderColor="#ff0000";
      }
  }
  ……
      <td>Email：<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
    </tr>

  2. Wenn der Benutzer eine ungültige E-Mail-Adresse eingibt, wird der Inhalt im E-Mail-Textfeld automatisch ausgewählt und hervorgehoben, wodurch der Benutzer zur erneuten Eingabe aufgefordert wird

  if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
      alert("Email格式不正确\n必须包含符号@和.");
      document.getElementById("email").select();
      return false;
  }

  3. Eingabeaufforderungs-E-Mail darf nicht leer sein

  function checkEmail(){
      var mail= document.getElementById ("email");
      var pID= document.getElementById ("pEmail");
      pID.innerHTML="";
      if(mail.value==""){
           pID.innerHTML="Email不能为空";
           return false;
      }
  }
  ……
  <input id="email" type="text" class="inputs"  onblur="checkEmail()"/>
  <p class="red" id="pEmail"></p>

• id Legen Sie die ID des Textfelds fest oder geben Sie sie zurück

• value Legt den Text fest oder gibt ihn zurück. Der Wert des Wertattributs der Domain

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript zur Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!