jQuery implementiert Formularvalidierungsfunktion

<Skripttyp="text/javascript">
 $(Dokument).bereit(Funktion(){
  var tip1 = "<span class='span1'>Benutzername darf nicht leer sein!</span>"; //Span wird nach dem Eingabefeld hinzugefügt, wenn ein Fehler auftritt
  var tip2 = "<span class='span2'>Das E-Mail-Format ist falsch oder darf nicht leer sein!</span>";
  var tip3 = "<span class='span3'>Adresse darf nicht leer sein!</span>";
  var tip4 = "<span class='span4'>Die Passwortlänge darf nicht weniger als fünf und höchstens zehn Zeichen betragen!</span>";
  var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; //Deklariere die Bedingung zur Bestimmung des E-Mail-Formats $(".id").blur(function(){
   if(!$(".id").val()){//Beurteilen, ob der Benutzername nicht leer ist$(".span1").remove();
    $(".id").nach(tip1);
   }
   anders{
    $(".span1").entfernen();
   }
  });
  $(".email").unschärfe(Funktion(){
   
   if(!condition.test($(".email").val())){//E-Mail-Format bestimmen$(".span2").remove();
    $(".email").nach(tip2);
   }
   anders{
    $(".span2").entfernen();
   }

  });
  $(".adress").unschärfe(Funktion(){
   if(!$(".adress").val()){//Beurteilen, ob die Adresse nicht leer ist$(".span3").remove();
    $(".adress").nach(tip3);
   }
   anders{
    $(".span3").entfernen();
   }
  });
  $(".pwd").unschärfe(Funktion(){
   
   if($(".pwd").val().length < 5||$(".pwd").val().length >10){//Bestimmen Sie, dass die Kennwortlänge nicht weniger als 5 Ziffern und nicht mehr als 10 Ziffern betragen darf$(".span4").remove();
    $(".pwd").nach(tip4);
   }
   anders{
    $(".span4").entfernen();
   }
  });
  $(".button").click(function(){//Wenn alle Bedingungen erfüllt sind, wird ein Popup-Fenster angezeigt, um zu bestätigen, dass das Formular erfolgreich war. Wenn nicht, wird ein Popup-Fenster angezeigt, um den Benutzer daran zu erinnern, if(!$(".id").val()||!condition.test($(".email").val())||!$(".adress").val()||$(".pwd").val().length < 5||$(".pwd").val().length >10){ zu ändern.
    alert("Die Registrierungsdaten sind falsch, bitte ändern Sie Ihre persönlichen Daten");
   }
   anders{
    alert("Registrierung erfolgreich");
   }
  })
 })
</Skript>

<div Klasse="Hauptbox">
  <div Klasse="Titel">
   Willkommen bei der Registrierung von Yuanmo</div>
  <div Klasse="Box">
  <img alt="Abbildung" src="./img/Kelipai Meng.png" class="img">
   <form>
    Benutzername:<input class="id" type="text" ><br>
    E-Mail:<input class="email" type="text"><br>
    Adresse:<input class="adress" type="text"><br>
    Passwort:<input class="pwd" type="password"><br>
    <button type = "button" class="button">Registrieren</button>
   </form>
  </div>
 </div>

Spanne{
  Farbe: weiß;
 }
 Körper{
  Schriftfamilie: serifenlos;
 }
 .Hauptbox{
  Breite: 100 %;
  Höhe: 910px;
  Hintergrundfarbe: rot;
  Hintergrundbild: linearer Farbverlauf (#e66465, #000000);
 }
 .Titel{
  Schriftgröße: 5em;
  Farbe: weiß;
  Breite: 100 %;
  Höhe: 100px;
  Textausrichtung: zentriert;
 }
 .Kasten{
  Breite: 1050px;
  Höhe: 310px;
  Rand: 150px automatisch 50px automatisch;
  Polsterung links: 360px;
 }
 Eingang{
  Höhe: 40px;
  Breite: 200px;
  Rahmenradius: 20px;
  Rand: durchgezogen 1px #B5B5B5;
  Rand: 10px;
  Schriftgröße: 1,2em;
 }
 bilden{
  Farbe: weiß;
  Schriftgröße: 1,2em;
  schweben: links;
  Rand links: 50px;
 }
 
 .Taste{
  Breite: 280px;
  Höhe: 40px;
  Hintergrundfarbe: #9781FD;
  Rahmenradius: 25px;
  Farbe: weiß;
  Schriftgröße: 1,3em;
  Schriftstärke: 700;
  Rand oben: 10px;
  
 }
 .img{
  Breite: 310px;
  Höhe: 310px;
  schweben: links;
 }