Implémenter la validation du formulaire basée sur Bootstrap jQuery.validate

C'est probablement une pratique courante. La première entreprise avec laquelle vous entrez en contact lors de l'apprentissage du front-end et du back-end est l'enregistrement et la connexion des utilisateurs. De nos jours, la société adhère au concept axé sur les personnes, et il en va de même dans le processus de développement de sites Web. L'utilisateur est l'objet auquel nous sommes le plus confrontés, et c'est aussi l'objet le plus central. L’enregistrement et la connexion initiale de l’utilisateur sont particulièrement importants.

L'enregistrement et la connexion des utilisateurs sont souvent plus difficiles qu'on ne le pense. Par exemple, la vérification des formulaires couvre en fait beaucoup de contenu. En ce qui concerne la réception, vous devez savoir :

1 Compréhension de base des expressions régulières

En fait, les expressions régulières. ne sont pas difficiles, et cela vous donnera un grand sentiment d'accomplissement après l'avoir appris, et profiterez de l'effet d'obtenir deux fois le résultat avec la moitié de l'effort.

2. Requête asynchrone Ajax

Donner les invites correspondantes lors de la vérification si le nom d'utilisateur existe ou lorsque l'utilisateur se connecte avec un compte ou un mot de passe incorrect.

3. Certaines bibliothèques de validation pratiques, telles que jQuery.validate

En raison de ces besoins courants et d'une certaine complexité, certaines excellentes classes telles que le formulaire bootstrap et la vérification du formulaire jQuery.validate La bibliothèque est conçue pour résoudre les problèmes d’interface utilisateur et de validation de formulaires pour les personnes.

Voici l'interface que j'ai créée en utilisant bootstrap jQuery.validate :

1. form

1. Formulaire de base

La structure de base du formulaire est fournie avec Bootstrap. Les étapes pour créer un formulaire de base sont répertoriées ci-dessous :

Ajouter à l'élément parent

Placez les étiquettes et les contrôles dans un

avec la classe .form-group. Ceci est nécessaire pour obtenir un espacement optimal.
Ajoutez la classe .form-control à tous les éléments de texte , et <select>. <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div><p>L'effet est le suivant :</p><p><img src="https://img.php.cn//upload/image/410/411/830/1483436029277469.png" title="1483436029277469.png" alt="Implémenter la validation du formulaire basée sur Bootstrap jQuery.validate"/></p><p>2.Forme horizontale</p><p>Avant de comprendre la forme horizontale, nous devons comprendre la forme horizontale. réseau bootstrap Comprendre le système de grille. </p><p>Bootstrap comprend un système de grille fluide, réactif et axé sur les mobiles, qui s'adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille de l'appareil ou de la fenêtre d'affichage augmente. Il contient des classes prédéfinies pour des options de mise en page simples, ainsi que de puissantes classes mixin pour générer des mises en page plus sémantiques. </p><p>Système de grille réactif À mesure que la taille de l'écran ou de la fenêtre d'affichage augmente, le système sera automatiquement divisé en 12 colonnes maximum, ce qui signifie qu'il définit la largeur en pourcentage. </p><p><img src="https://img.php.cn//upload/image/801/770/144/1483436043189734.png" title="基于Bootstrap jQuery.validate实现表单验证" alt="基于Bootstrap jQuery.validate实现表单验证" style="max-width:90%" style="max-width:90%"/></p><p>Les formes horizontales diffèrent des autres formes non seulement par le nombre de marques, mais aussi par la présentation des formes. Pour créer un formulaire disposé horizontalement, suivez ces étapes : </p><p>Étape 1 : ajoutez la classe .form-horizontal à l'élément parent <form> <br/>Étape 2 : placez les étiquettes et les contrôles dans un <div> avec la classe .form-group. <br/>Étape 3 : Ajoutez la classe .control-label à l'étiquette. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div><p>L'effet est le suivant : </p><p><img src="https://img.php.cn//upload/image/162/439/534/1483436073388976.png" title="基于Bootstrap jQuery.validate实现表单验证" alt="基于Bootstrap jQuery.validate实现表单验证" style="max-width:90%" style="max-width:90%"/></p><p>2. Méthode de vérification personnalisée jQuery.validate </p><p>1. 🎜></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div> <p></p><p></p>2. Appelez la vérification personnalisée <p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">rules : { phone : { required : true, isPhone : true } }</pre><div class="contentsignin">Copier après la connexion</div></div> <p></p><p></p>3, Erreur personnalisée display<p></p><p><img src="https://img.php.cn//upload/image/785/207/696/1483436089832451.jpg" title="基于Bootstrap jQuery.validate实现表单验证" alt="基于Bootstrap jQuery.validate实现表单验证" style="max-width:90%" style="max-width:90%"/></p>3. register.html<p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div>4 form.js<p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div>C'est ça Bootstrap jQuery.validate. implémente les connaissances liées à la validation de formulaire. J'espère que vous pourrez les maîtriser et concevoir votre propre validation de formulaire. <p></p>Pour plus d'articles liés à la validation de formulaire basée sur Bootstrap jQuery.validate, veuillez faire attention au site Web PHP chinois ! <p></p></select>