Die Überprüfung des jquery-Formulars besteht. Das Klassenüberprüfungsformular ist nicht leer

Heim

Web-Frontend

js-Tutorial

Die Überprüfung des jquery-Formulars besteht. Das Klassenüberprüfungsformular ist nicht leer_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

Bei der Entwicklung eines Systems sind häufig bestimmte Formulardaten erforderlich. Wenn jQuery zur Überprüfung durch ID verwendet wird, beeinträchtigt dies nicht nur die Effizienz, sondern führt auch zu Auslassungen, was die spätere Wartung erschwert.

In diesem Kapitel wird erläutert, wie Sie mit jQuery eine einheitliche Überprüfung durchführen, indem Sie Klassen für Formulare konfigurieren. (ID kann nur einmal auf einer Seite verwendet werden; Klasse kann mehrfach referenziert werden)

1: Fügen Sie der Eingabe eine Klasse hinzu. Der Name kann nach Belieben festgelegt werden, aber jede Eingabe muss konsistent sein. In diesem Kapitel wird calss auf noNull gesetzt. (Wenn die Eingabe bereits ein Klassenattribut hat, kann es direkt danach hinzugefügt werden)

2: Fügen Sie der Eingabe ein Attribut hinzu, um das Feld später über jquery abzurufen und es als Eingabeaufforderung zu verwenden. Das Case-Prompt-Attribut in diesem Kapitel ist notNull.

3: Verwenden Sie jQuery, um alle Formulare mit calss noNull auf der Seite zu durchlaufen und zu überprüfen, ob es leer ist. Rufen Sie das Feld notNull ab und geben Sie eine leere Eingabeaufforderung ein.

Weitere Informationen zur Einrichtung finden Sie im folgenden Fall. In diesem Kapitel werden Eingabe-, Radio-, Auswahl-, Kontrollkästchen- und andere Typen erläutert.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
        姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
       性别:
       男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
       女<input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
        年龄：
        <select name="age" class="noNull" notNull="年龄">
          <option value ="">请选择</option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
        兴趣：
        打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
        唱歌<input type="checkbox" name="hobby" value="2">
        跳舞<input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()">保存</button>
  </form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
  $(".noNull").each(function(){
    var name = $(this).attr("name");
    if($(this).val()==""){
    alert($(this).attr('notNull')+"不能为空");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='"+name+"']:checked").size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="'+name+'"]:checked').size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>

Im Folgenden wird Ihnen das Verifizierungs-Plug-in jquery.validate.js vorgestellt

jquery.validate.js ist ein Verifizierungs-Plug-in unter jquery. Mit den Vorteilen von jquery können wir einige gängige Eingaben schnell überprüfen und unsere eigenen Verifizierungsmethoden erweitern.

Zum Beispiel gibt es so ein Formular:

<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

In diesem Formular gibt es Vorname, Nachname, Benutzername, Passwort, Passwort bestätigen und E-Mail. Sie dürfen alle nicht leer sein und die E-Mail muss eine korrekt formatierte Adresse, das Bestätigungskennwort und das Kennwort konsistent sein. Der einfachste Weg, die jQuery-Validierung zu verwenden, besteht darin, zwei js-Dateien einzuführen, jquery.js und jquery validation.js. Fügen Sie dann jeweils eine Klasse zur Eingabe hinzu:

<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>

Im Folgenden sind die Standardüberprüfungen aufgeführt, die mit „Validate“ geliefert werden

erforderlich: „Pflichtfeld“,
remote: „Bitte korrigieren Sie dieses Feld“,
E-Mail: „Bitte geben Sie das korrekte Format Ihrer E-Mail ein“,
URL: „Bitte geben Sie eine legale URL ein“,
Datum: „Bitte geben Sie ein gültiges Datum ein“,
dateISO: „Bitte geben Sie ein gültiges Datum (ISO) ein“,
Nummer: „Bitte geben Sie eine gültige Nummer ein“,
Ziffern: „Es können nur Ganzzahlen eingegeben werden“,
Kreditkarte: „Bitte geben Sie eine gültige Kreditkartennummer ein“,
equalTo: „Bitte geben Sie den gleichen Wert noch einmal ein“,
akzeptieren: „Bitte geben Sie eine Zeichenfolge mit einem zulässigen Suffix ein“,
maxlength: jQuery.format("Bitte geben Sie eine Zeichenfolge mit einer Länge von höchstens {0} ein"),
minlength: jQuery.format("Bitte geben Sie eine Zeichenfolge mit einer Länge von mindestens {0} ein"),
rangelength: jQuery.format("Bitte geben Sie eine Zeichenfolge mit einer Länge zwischen {0} und {1} ein"),
Bereich: jQuery.format("Bitte geben Sie einen Wert zwischen {0} und {1} ein"),
max: jQuery.format("Bitte geben Sie einen Wert bis zu {0} ein"),
min: jQuery.format("Bitte geben Sie einen Mindestwert von {0} ein")

Fügen Sie dann im Leseereignis des Dokuments die folgende Methode hinzu:

   <script>
    $(document).ready(function(){
        $("#signupForm").validate();
    }
   </script>

Auf diese Weise wird das Formular beim Absenden anhand der durch die Eingabe angegebenen Klasse überprüft. Schlägt dies fehl, wird die Übermittlung des Formulars blockiert. Und die Eingabeaufforderungsinformationen werden hinter der Eingabe angezeigt.

Das fühlt sich jedoch schlecht an, weil die Validierungsregeln in unseren HTML-Code eindringen. Eine andere Möglichkeit besteht darin, „Regeln“ zu verwenden. Wir löschen die Verifizierungsklassen für die Eingabe. Ändern Sie dann den Antwortcode für das Dokument „Ready“:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})

Auf diese Weise kann der gleiche Effekt erzielt werden.

Dann ist die nächste Frage, ob die angezeigte Fehlermeldung die Standardeinstellung ist. Wir müssen eine benutzerdefinierte Eingabeaufforderung verwenden:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

Wenn Sie in der Fehlermeldung auch einen speziellen Stil anzeigen möchten (z. B. die Schriftart ist rot), können Sie Folgendes hinzufügen:

<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>

Weitere Validierungsregeln für die eingegebene Passwortlänge hinzufügen:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

Fernbedienung verwenden

Sie können die auslösende Effektmethode durch ein Ereignis angeben (zu den optionalen Werten gehören Keyup (jedes Mal, wenn eine Taste gedrückt wird) und Unschärfe (wenn das Steuerelement den Fokus verliert). Wenn nicht angegeben, wird es nur ausgelöst, wenn die Schaltfläche „Senden“ gedrückt wird gedrückt)

$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})

Wenn Sie debug als true angeben, wird das Formular nicht gesendet und kann nur zur Überprüfung (Standard ist Übermittlung) und zum Debuggen verwendet werden

$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})

Wenn Sie vor dem Absenden eine benutzerdefinierte Verarbeitung durchführen müssen, verwenden Sie den SubmitHandler-Parameter

$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Verständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Python gegen JavaScript: Community, Bibliotheken und RessourcenApr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Von C/C nach JavaScript: Wie alles funktioniertApr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

JavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

See all articles