Implement form validation based on Bootstrap+jQuery.validate

This is probably a common practice. The first business you come into contact with when learning the front and backends is user registration and login. Nowadays, society adheres to the people-oriented concept, and the same is true in the website development process. User is the object we face most, and it is also the most core object. The initial user registration and login are particularly important.

User registration and login are often more difficult than we think. For example, form verification actually covers a lot of content. As far as the front desk is concerned, you need to understand:

1. Basic understanding of regular expressions

In fact, regular expressions are not difficult, and It will give you a great sense of accomplishment after learning it, and enjoy the effect of getting twice the result with half the effort.

2.ajax asynchronous request

Provides corresponding prompts when verifying whether the user name exists or when the user logs in with an incorrect account or password.

3. Some convenient validation libraries, such as jQuery.validate

Because of such common needs and certain complexity, some excellent classes such as bootstrap form and jQuery.validate form verification The library is designed to solve UI and form validation problems for people.

The following is the interface I made using bootstrap+jQuery.validate:

##1. Bootstrap3 basic forms and levels Form

1. Basic form

The basic form structure comes with Bootstrap. The steps to create a basic form are listed below:

To the parent element

Add role="form".

Put labels and controls in a

with class .form-group. This is necessary to obtain optimal spacing.
Add class .form-control to all text elements , and <select>. <br><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>The effect is as follows:<p></p> <p><img src="https://img.php.cn//upload/image/410/411/830/1483436029277469.png" title="1483436029277469.png" alt="Implement form validation based on Bootstrap+jQuery.validate"></p>2. Horizontal form<p></p>Before understanding the horizontal form, we should understand the grid system of bootstrap Have some understanding. <p></p>Bootstrap includes a responsive, mobile-first, fluid grid system that scales appropriately up to 12 columns as the device or viewport size increases. It contains predefined classes for simple layout options, as well as powerful mixin classes for generating more semantic layouts. <p></p>Responsive grid system As the screen or viewport size increases, the system will automatically be divided into up to 12 columns, which means it defines the width in percentages. <p></p> <p><img src="https://img.php.cn//upload/image/801/770/144/1483436043189734.png" title="Implement form validation based on Bootstrap+jQuery.validate" alt="Implement form validation based on Bootstrap+jQuery.validate" style="max-width:90%" style="max-width:90%"></p> Horizontal forms differ from other forms not only in the number of marks, but also in the form presentation. To create a horizontally laid out form, follow these steps: <p></p>Step 1: Add class .form-horizontal to the parent <form> element. <p>Step 2: Place the label and control in a </p> <div> with class .form-group. <br>Step 3: Add class .control-label to the label. <br><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>The effect is as follows:<p></p> <p><img src="https://img.php.cn//upload/image/162/439/534/1483436073388976.png" title="Implement form validation based on Bootstrap+jQuery.validate" alt="Implement form validation based on Bootstrap+jQuery.validate" style="max-width:90%" style="max-width:90%">##2.jQuery.validate Custom verification method</p> <p>1. Custom verification method</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> <p>2. Call custom verification</p><pre class="brush:js;toolbar:false">rules : { phone : { required : true, isPhone : true } }</pre><p> </p> <p></p> <p>3. Customize error display</p> <p></p> <p>##3.register.html<img src="https://img.php.cn//upload/image/785/207/696/1483436089832451.jpg" title="Implement form validation based on Bootstrap+jQuery.validate" alt="Implement form validation based on Bootstrap+jQuery.validate" style="max-width:90%" style="max-width:90%"><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></p>4.form.js<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></p>The above is the knowledge related to Bootstrap+jQuery.validate to implement form verification Introduction, I hope you can master it and design your own form validation. <p></p>For more articles related to form validation based on Bootstrap+jQuery.validate, please pay attention to the PHP Chinese website! <p></p> </div> </form></select>