Eine kurze Diskussion über das Bootstrap-Formularvalidierungs-Plug-in BootstrapValidator

In diesem Artikel wird ein von Twitter erstellter Bootstrap-Validator empfohlen. Bootstrap selbst wird von Twitter erstellt, sodass die Verwendung des Original-Validators vertrauenswürdiger ist. Bei der Suche nach BootstrapValidator auf Baidu werden viele Modelle angezeigt, aber ich empfehle nur dieses (plötzlich fühle ich mich ein bisschen „cool [Steve Curry]“).

Empfohlene verwandte Tutorials: „Bootstrap-Tutorial“

### 1. Werfen Sie einen kurzen Blick

Für eine einfache Einführung ist hier nur ein leerer Scheck.

Offizielle Download-Adresse von BootstrapValidator

### 2. Ressourcenreferenz

Nach dem Herunterladen des Ressourcenpakets können Sie das folgende Verzeichnis sehen.

Fügen Sie dann die folgenden drei Dateien in Ihr Projekt ein.

<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" />
<script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"></script>

###3. Mitgliedsname ist keine leere Projektkonfiguration

<form class="form-signin required-validate" action="${ctx}/login" method="post" οnsubmit="return validateCallback(this)">
	<div class="form-group">
		<div class="row">
			<label>账户</label>
			<input class="form-control" type="text" autofocus name="username" placeholder="请输入会员编号" autocomplete="off"
				data-bv-notempty />
		</div>
	</div>
</form>

• data-bv-notempty bedeutet, dass die Mitgliedsnummer leer sein muss.

• p in form-group ist erforderlich, andernfalls wird ein Fehler „zu viel Rekursion“ gemeldet.

• Beim Absenden des Formulars wird die Methode „validateCallback“ ausgeführt. Diese Methode wird im fünften Schritt ausführlich vorgestellt.

###4. Aktivieren Sie nach dem Laden der Seite den Bootstrap-Validator

$(function() {
	// validate form
	$("form.required-validate").each(function() {
		var $form = $(this);
		$form.bootstrapValidator();
		
		// 修复bootstrap validator重复向服务端提交bug
		$form.on('success.form.bv', function(e) {
			// Prevent form submission
			e.preventDefault();
		});
		
		
	});
});

• Fügen Sie das Attribut „class="required-validate"“ zum Formular hinzu, rufen Sie dann das entsprechende Formular über jquery ab und führen Sie es aus Standard Der BootstrapValidator wird geladen.

• Achten Sie unbedingt auf den kommentierten Teil des Codes oben. Eine ausführliche Einführung finden Sie unter Beheben von Fehlern bei der doppelten Übermittlung von Bootstrap Validator. ??

Wenn die Formularüberprüfung erfolgreich ist, wird das Formular über Ajax an den Server übermittelt.

• Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

  Einführung in die Programmierung
! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über das Bootstrap-Formularvalidierungs-Plug-in BootstrapValidator. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!