Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate

Dies ist wahrscheinlich eine gängige Praxis, mit der Sie beim Erlernen des Front-Ends und Back-Ends in Kontakt kommen. Heutzutage hält die Gesellschaft an dem menschenorientierten Konzept fest, und das Gleiche gilt auch für den Website-Entwicklungsprozess. Der Benutzer ist das Objekt, mit dem wir am meisten konfrontiert sind, und er ist auch das zentralste Objekt. Besonders wichtig ist die Erstregistrierung und Anmeldung des Benutzers.

Benutzerregistrierung und Login sind oft schwieriger als wir denken. Beispielsweise deckt die Formularüberprüfung tatsächlich viele Inhalte ab. Was die Rezeption betrifft, müssen Sie Folgendes wissen:

Grundlegendes Verständnis von regulären Ausdrücken

Eigentlich reguläre Ausdrücke sind nicht schwierig, und Sie werden nach dem Erlernen ein großartiges Erfolgserlebnis haben und den Effekt genießen, mit halbem Aufwand das Doppelte des Ergebnisses zu erzielen.

2. Ajax-Asynchronanforderung

Geben Sie entsprechende Eingabeaufforderungen ein, wenn Sie überprüfen, ob der Benutzername vorhanden ist oder wenn sich der Benutzer mit einem falschen Konto oder Passwort anmeldet.

3. Einige praktische Validierungsbibliotheken wie jQuery.validate

Aufgrund dieser allgemeinen Anforderungen und einer gewissen Komplexität wurden einige hervorragende Klassen wie Bootstrap-Formular und jQuery.validate-Formularüberprüfung entwickelt um UI- und Formularvalidierungsprobleme für Menschen zu lösen.

Das Folgende ist die Schnittstelle, die ich mit Bootstrap+jQuery.validate erstellt habe:

1. Bootstrap3-Grundformen und Ebenen Formular

1. Grundformular

Die Grundformularstruktur wird mit Bootstrap geliefert. Die Schritte zum Erstellen eines Grundformulars sind unten aufgeführt:

Zum übergeordneten Element

Platzieren Sie Beschriftungen und Steuerelemente in einem

mit der Klasse .form-group. Dies ist notwendig, um einen optimalen Abstand zu erreichen.
Klasse .form-control zu allen Textelementen , hinzufügen. <pre class="brush:js;toolbar:false"><form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> </form></pre><p>Der Effekt ist wie folgt:</p> <p><img src="https://img.php.cn//upload/image/410/411/830/1483436029277469.png" title="1483436029277469.png" alt="Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate"></p> <p>2. Horizontale Form</p> <p>Bevor wir die horizontale Form verstehen, sollten wir die verstehen Bootstrap-Netzwerk Verstehen Sie das Grid-System. </p> <p>Bootstrap umfasst ein reaktionsfähiges, auf Mobilgeräte ausgerichtetes, flüssiges Rastersystem, das bei zunehmender Geräte- oder Ansichtsfenstergröße entsprechend auf bis zu 12 Spalten skaliert. Es enthält vordefinierte Klassen für einfache Layoutoptionen sowie leistungsstarke Mixin-Klassen zum Generieren semantischerer Layouts. </p> <p>Responsives Rastersystem Mit zunehmender Bildschirm- oder Ansichtsfenstergröße wird das System automatisch in bis zu 12 Spalten unterteilt, was bedeutet, dass es die Breite in Prozent definiert. </p> <p><img src="https://img.php.cn//upload/image/801/770/144/1483436043189734.png" title="Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate" alt="Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate" style="max-width:90%" style="max-width:90%"></p> <p>Horizontale Formulare unterscheiden sich von anderen Formularen nicht nur in der Anzahl der Markierungen, sondern auch in der Darstellung der Formulare. Um ein horizontal angeordnetes Formular zu erstellen, befolgen Sie diese Schritte: </p> <p>Schritt 1: Fügen Sie die Klasse .form-horizontal zum übergeordneten </p> <form> hinzu. <br>Schritt 2: Platzieren Sie die Beschriftungen und Steuerelemente in einem <div> mit der Klasse .form-group. <br>Schritt 3: Fügen Sie der Beschriftung die Klasse .control-label hinzu. <pre class="brush:js;toolbar:false"><form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> </form></pre><p>Der Effekt ist wie folgt: </p> <p><img src="https://img.php.cn//upload/image/162/439/534/1483436073388976.png" title="Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate" alt="Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate" style="max-width:90%" style="max-width:90%"></p> <p>2. Benutzerdefinierte jQuery.validate-Verifizierungsmethode </p> <p>1 🎜></p><pre class="brush:js;toolbar:false">// 手机号码验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码。");</pre> <p></p> <p></p>2. Benutzerdefinierte Verifizierung aufrufen <p></p><pre class="brush:js;toolbar:false">rules : { phone : { required : true, isPhone : true } }</pre> <p></p> <p></p>3 , Benutzerdefinierter Fehler display<p></p> <p><img src="https://img.php.cn//upload/image/785/207/696/1483436089832451.jpg" title="Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate" alt="Implementieren Sie die Formularvalidierung basierend auf Bootstrap+jQuery.validate" style="max-width:90%" style="max-width:90%"></p>3. register.html<p></p><pre class="brush:html;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>注册</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="jslib/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="scripts/form.js" type="text/javascript"></script> <script src="jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script> <script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script> <style type="text/css"> #register-form{ border: 1px solid rgb(197, 197, 197); width: 1000px; margin: auto; border-image: none; padding: 30px; border-radius: 3px; } </style> </head> <body> <h1 class="text-center text-danger">用户注册</h1><br> <form id="register-form" role="form" class="form-horizontal" method="get"> <div class="form-group"> <label class="col-sm-2 control-label" for="firstname">用户名：</label> <div class="col-sm-5"> <input class="form-control" id="firstname" name="firstname" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="password">密码：</label> <div class="col-sm-5"> <input class="form-control" id="password" name="password" type="password" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label> <div class="col-sm-5"> <input class="form-control" id="confirm_password" name="confirm_password" type="password" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="email">E-Mail：</label> <div class="col-sm-5"> <input class="form-control" id="email" name="email" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="phone">手机号码：</label> <div class="col-sm-5"> <input class="form-control" id="phone" name="phone" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="tel">固定电话：</label> <div class="col-sm-5"> <input class="form-control" id="tel" name="tel" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="address">家庭住址：</label> <div class="col-sm-5"> <input class="form-control" id="address" name="address" /> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-primary btn-sm">注册</button> <button type="reset" class="btn btn-primary btn-sm">重置</button> </div> </div> </form> </body> </html></pre>4. form.js<p></p><pre class="brush:js;toolbar:false">$(document).ready(function() { // 手机号码验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码。"); // 电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号－3、4位 号码－7、8位 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码。"); // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。 jQuery.validator.addMethod("isPwd", function(value, element) { var str = value; if (str.length < 6 || str.length > 18) return false; if (!/^[a-zA-Z]/.test(str)) return false; if (!/[0-9]/.test(str)) return fasle; return this.optional(element) || /[^A-Za-z0-9]/.test(str); }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。"); $("#register-form").validate({ errorElement : &#39;span&#39;, errorClass : &#39;help-block&#39;, rules : { firstname : "required", email : { required : true, email : true }, password : { required : true, isPwd : true }, confirm_password : { required : true, isPwd : true, equalTo : "#password" }, phone : { required : true, isPhone : true }, tel : { isTel : true }, address : { minlength : 10 } }, messages : { firstname : "请输入姓名", email : { required : "请输入Email地址", email : "请输入正确的email地址" }, password : { required : "请输入密码", minlength : jQuery.format("密码不能小于{0}个字 符") }, confirm_password : { required : "请输入确认密码", minlength : "确认密码不能小于5个字符", equalTo : "两次输入密码不一致不一致" }, phone : { required : "请输入手机号码" }, tel : { required : "请输入座机号码" }, address : { required : "请输入家庭地址", minlength : jQuery.format("家庭地址不能少于{0}个字符") } }, //自定义错误消息放到哪里 errorPlacement : function(error, element) { element.next().remove();//删除显示图标 element.after(&#39;<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>&#39;); element.closest(&#39;.form-group&#39;).append(error);//显示错误消息提示 }, //给未通过验证的元素进行处理 highlight : function(element) { $(element).closest(&#39;.form-group&#39;).addClass(&#39;has-error has-feedback&#39;); }, //验证通过的处理 success : function(label) { var el=label.closest(&#39;.form-group&#39;).find("input"); el.next().remove();//与errorPlacement相似 el.after(&#39;<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>&#39;); label.closest(&#39;.form-group&#39;).removeClass(&#39;has-error&#39;).addClass("has-feedback has-success"); label.remove(); }, }); });</pre>Das ist es Bootstrap+jQuery. Validieren implementiert Formularvalidierungswissen. Ich hoffe, Sie können es beherrschen und Ihre eigene Formularvalidierung entwerfen. <p></p>Weitere Artikel zur Formularvalidierung basierend auf Bootstrap+jQuery.validate finden Sie auf der chinesischen PHP-Website! <p></p> </div> </form>