Examples of bootstrap and jquery.validate form checksums

Talk about form verification

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:



 
BOOTSTRAP3 basic forms and horizontal forms
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 name" >
</div>
</form>
The effect is as follows:

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:

Adds class. Form-horizontal to the parent <form> element.

Put the labels and controls in a <div> with class. Form-group.

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 first name" >
</div>
</div>
</form>
The effect is as follows:

Jquery.validate Custom Calibration method

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." ");

Invoke Custom Checksum


Rules: {
Phone: {
Required:true,
Isphone:true
}
}

Custom error Display



Register.html


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title> Registration </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>
<body>

<form id= "Register-form" role= "form" class= "Form-horizontal" method= "Get" >
<div class= "Form-group" >
<label class= "col-sm-2 control-label" for= "FirstName" > Username:</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" > 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" > 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" > Mobile phone number:</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" > Fixed telephone:</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" > Home addresses:</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" > Registration </button>
<button type= "reset" class= "btn btn-primary btn-sm" > Reset </button>
</div>
</div>
</form>
</body>


Form.js


$ (document). Ready (function () {
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." ");
Phone number Verification
JQuery.validator.addMethod ("Istel", function (value, Element) {
var tel =/^ (\d{3,4}-)? \d{7,8}$/g; Area code-3, 4-digit 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 > 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);
"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: "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: "Please enter your name",
Email: {
Required: "Please enter your email address",
Email: "Please enter the correct email address"
},
Password: {
Required: "Please enter the password",
Minlength:jQuery.format ("Password cannot be less than {0} characters")
},
Confirm_password: {
Required: "Please enter confirmation password",
MinLength: "Confirm password cannot be less than 5 characters",
Equalto: "Two input passwords inconsistent inconsistent"
},
Phone: {
Required: "Please enter your mobile phone number"
},
Tel: {
Required: "Please enter the landline number"
},
Address: {
Required: "Please enter your home address",
Minlength:jQuery.format ("Home address cannot be less than {0} characters")
}
},
Where do I put the custom error messages
Errorplacement:function (Error, Element) {
Element.next (). Remove ()//delete Display icon
Element.after (' <span 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) {
$ (Element). Closest ('. Form-group '). addclass (' Has-error has-feedback ');
},
Validation of processed through
Success:function (label) {
var el=label.closest ('. Form-group '). Find ("input");
El.next (). remove ();//similar to Errorplacement
El.after (' <span class= ' Glyphicon glyphicon-ok form-control-feedback ' true ' ></span> ');
Label.closest ('. Form-group '). Removeclass (' Has-error '). addclass ("Has-feedback has-success");
Label.remove ();
},
});
});