Verwenden Sie BootStrapValidator, um die Front-End-Eingabevalidierung abzuschließen

Dieser Artikel stellt hauptsächlich die Verwendung von BootStrapValidator zur Vervollständigung der Front-End-Eingabeüberprüfung vor. Er hat einen gewissen Referenzwert.

Wie wäre es?

, es ist harmonischer. Natürlich können Sie auch den Standardstil ändern, um die Darstellung schöner zu gestalten.

So verwenden Sie es:

1. Laden Sie BootStrapValidator herunter

Sie können auf die offizielle Download-Adresse von BootStrapValidator klicken, um es herunterzuladen.

2. Verzeichnisstruktur nach dem Herunterladen

Nachdem der Download abgeschlossen ist und alle Dateien konvertiert sind, sieht die Verzeichnisstruktur wie folgt aus:

'

Die Dateien, die direkt im Projekt verwendet werden können, werden im Dist-Ordner abgelegt, die verwendeten Beispiele werden in der Demo abgelegt und die BootStrap- und Jquery-Dateien, von denen es abhängt, werden im Vendor-Ordner abgelegt. Wenn die BootStrap-Version Ihres Projekts nicht mit der verwendeten Version übereinstimmt, wird empfohlen, die BootStrap-Datei zu verwenden. Andernfalls kann es zu Anzeigeproblemen kommen (die mich mehrere Tage lang beunruhigt und schließlich gelöst haben). Sehen wir uns an, wie man sie verwendet :

3. Verwendung

Nichts zu sagen, gehen Sie einfach zum Code:

(1) Bibliotheksreferenz

<link rel="stylesheet" href="../public/static/vendor/bootstrap/css/bootstrap.min.css"/>
<script src="../public/static/js/jquery.min.js"></script>
<script src="../public/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../public/static/vendor/bootstrapvalidator/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="../public/static/vendor/bootstrapvalidator/js/bootstrapValidator.min.js"></script>

Bezieht sich hauptsächlich auf BootStraps js- und CSS-Dateien sowie die js- und CSS-Dateien von BootStrapValidator. Das Obige basiert auf meiner Projektstruktur. Natürlich können Sie das Verzeichnis nach Ihren eigenen Vorstellungen erstellen.

(2)HTML-Teil

<div class="row">
<form action="dologin" method="post" id="loginform">
 <div class="form-group">
 <div class="input-group input-group-md">
 <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
 <input type="text" class="form-control" name="username" placeholder="用户名" />
 </div>
 </div>
 <div class="form-group">
 <div class="input-group input-group-md">
 <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
 <input type="password" class="form-control" name="pwd" placeholder="密码" />
 </div>
 </div>
 <div class="well well-sm" style="text-align:center;">
  
 <input type="radio" name="kind" value="tea"> 老师
 <input type="radio" name="kind" value="stu"> 学生
 </div>
 <button type="submit" class="btn btn-success btn-block">
      登录
 </button>
 </form> 
 </div>

(3)Jquery-Verifizierungsteilcode

$(document).ready(function(){
 // 在这里写你的代码...
 $('#loginform').bootstrapValidator({
 message:"您的输入值不合法",
 feedbackIcons:{
 valid: 'glyphicon glyphicon-ok',
  invalid: 'glyphicon glyphicon-remove',
  validating: 'glyphicon glyphicon-refresh'
 },
 fields:{
 username:{
 validators:{
 notEmpty:{
 message:'用户名不能为空'
 }
 }
 },
 pwd:{
 validators:{
 notEmpty:{
 message:'请输入密码'
 }
 }
 }
 },
 });
 });

Okay, das ist natürlich alles, hier sind nur einige Grundlagen zur Verwendung Es verfügt auch über andere leistungsfähigere Funktionen, z. B. die asynchrone Überprüfung (und die Überprüfung der serverseitigen Kommunikation). Auf dieser Website gibt es viele Tutorials, daher werde ich hier nicht auf Details eingehen. Ich hoffe, dieser Artikel hilft Ihnen!

Weitere Artikel zur Verwendung von BootStrapValidator zur Vervollständigung der Front-End-Eingabeüberprüfung finden Sie auf der chinesischen PHP-Website!