Implementation of form verification _javascript techniques based on bootstrap+jquery.validate

This is probably a convention, learning the front desk backstage the first contact business is the user registration and login. Now the community adhere to the concept of people-oriented, the same is true in the Web development process. User is our face more objects, but also the core object. The beginning of the user registration and landing this piece, is particularly important.

User registration and login are often more difficult than we think. For example, the form check, which covers a lot of content in fact, in the foreground, you need to understand:

1. Basic understanding of regular expressions

In fact, it is not difficult, and after learning can bring you a great sense of achievement, enjoy the effect of the multiplier.

2.ajax Asynchronous request

Give a prompt when verifying that the username exists, when the user logs in, or when the password is incorrect.

3. Some convenient verification library, such as Jquery.validate

Because of this pervasive demand and a certain amount of complexity, some excellent class libraries such as bootstrap forms and jquery.validate form checksums are designed to solve the UI and form checksum problems for people.

Here's what I do with the Bootstrap+jquery.validate interface:

First, BOOTSTRAP3 basic form and horizontal form

1. Basic form

The basic form structure is Bootstrap, and the following is a list of steps to create a basic form:

Add the role= "form" to the parent element <form>.
Put the labels and controls in a <div> with class. Form-group. This is necessary to obtain optimal spacing.
Add Class. Form-control to all text elements <input>, <textarea> and <select>.

<form role= "Form" >
 <div class= "Form-group" >
  <label for= "name" > name </label>
  < Input type= "text" class= "Form-control" id= "name"
   placeholder= "Please enter names" >
 </div>
</form>

The effect is as follows:

2. Horizontal form

In understanding the horizontal form, we should have an understanding of the bootstrap grid system.

The Bootstrap contains a responsive, mobile device-First, unfixed grid system that scales appropriately to 12 columns as the device or viewport size increases. It contains predefined classes for simple layout options, as well as powerful hybrid classes for generating more semantic layouts.

The response grid system is automatically divided into up to 12 columns as the size of the screen or viewport (viewport) increases, meaning that it is defined as a percentage width.

A horizontal form differs from the number of other forms that are not labeled, and forms are rendered differently. To create a form that is horizontally laid out, follow these steps:

Step 1: Add Class. Form-horizontal to the parent <form> element.
Step 2: put the labels and controls in a <div> with class. Form-group.
Step 3: Add Class. Control-label to the label.

<form class= "form-horizontal" role= "form" >
 <div class= "Form-group" >
  <label for= "FirstName" class= "Col-sm-2 Control-label" > name </label>
  <div class= "col-sm-10" >
   <input type= "text" class= "Form-control" id= "FirstName"
   placeholder= "Please enter name" >
  </div>
 </div>
</ Form>

The effect is as follows:

Two, Jquery.validate Custom School verification method

1. Custom Calibration method

Mobile phone number verification
jQuery.validator.addMethod ("Isphone", function (value, Element) {
 var length = value.length;
 return this.optional (Element) | | (length = &&/^ ((13[0-9]{1}) | ( 15[0-9]{1}) | (18[0-9]{1})) +\D{8}) $/.test (value);
}, "Please fill in your phone number correctly." ");

2. Calling Custom Checksum

Rules: {
 phone: {
   required:true,
   isphone:true
  }
}

3, custom error display

Third, register.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  

Four, form.js

$ (document). Ready (function () {//Mobile number verification JQuery.validator.addMethod ("Isphone", function (value, Element) {var length
  = Value.length; return this.optional (Element) | | (length = &&/^ ((13[0-9]{1}) | ( 15[0-9]{1}) | (18[0-9]{1}))
 +\D{8}) $/.test (value)); "Please fill in your phone number correctly."
 
 "); Phone number verification JQuery.validator.addMethod ("Istel", function (value, Element) {var Tel =/^ (\d{3,4}-)? \d{7,8}$/g;//Area code-3, 4 bits Number-7, 8-bit return this.optional (element) | |
 (Tel.test (value)); "Please fill in your phone number correctly."
 ");
 Match the password, beginning with a letter, length between 6-12 and must contain numbers and special characters.
  JQuery.validator.addMethod ("Ispwd", function (value, Element) {var str = value;
  if (Str.length < 6 | | | str.length >) 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); "begins with a letter, length between 6-12, and must contain numbers and special characters."
 
 "); $ ("#register-form"). Validate ({errorelement: ' span ', Errorclass: ' Help-block ', rules: {firstname: "Require D ", EMail: {required:true, email:true}, Password: {required:true, ispwd:true}, Confir
    M_password: {required:true, ispwd:true, Equalto: "#password"}, Phone: {required:true, Isphone:true}, Tel: {istel:true}, Address: {minlength:10}}, messages: {Fir  Stname: "Please enter your name", email: {Required: "Please enter your email address", Email: "Please enter the correct email address"}, Password: {required : "Please enter password", Minlength:jQuery.format ("Password cannot be less than {0} characters")}, Confirm_password: {required: "Please enter confirmation password", min Length: "Confirm password can not be less than 5 characters", Equalto: "Two input passwords inconsistent inconsistent"}, Phone: {required: "Please enter your mobile number"}, Tel: {req 
  uired: "Please enter the landline number"}, Address: {required: "Please enter home addresses", Minlength:jQuery.format ("Home address cannot be less than {0} characters")}}, Where do you put the custom error messages Errorplacement:function (error, Element) {Element.next (). Remove ()//delete Display icon Element.after (' <s Pan class= "Glyphicon glyPhicon-remove form-control-feedback "aria-hidden=" true "></span>"); Element.closest ('. Form-group '). Append (Error)://Display error message Prompt},//To process an element that is not validated highlight:function (element) {$ (elem
  ENT). Closest ('. Form-group '). addclass (' Has-error has-feedback ');
   },//Validate processed success:function (label) {var el=label.closest ('. Form-group '). Find ("input"); El.next (). Remove ()//errorplacement similar el.after (' <span class= ' Glyphicon glyphicon-ok ' form-control-feedback ')
   Aria-hidden= "true" ></span> ");
   Label.closest ('. Form-group '). Removeclass (' Has-error '). addclass ("Has-feedback has-success");
  Label.remove ();
},
 
 });
 });

SOURCE Download: Bootstrap+jquery.validate implementation form Verification

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is Bootstrap+jquery.validate realization form verification related knowledge introduction, hope everybody can master, design own form verification.