This article recommends a BootstrapValidator made by Twitter. Bootstrap itself is made by Twitter, so it is more trustworthy to use the original validator. Search BootstrapValidator from Baidu, there will be many models, but I only recommend this one (suddenly I feel a little "library [Steve Curry] blowing" feeling).
Related tutorial recommendation: "bootstrap tutorial"
###1. A quick glance
For a simple introduction, here is just an empty check.
BootstrapValidator official download address
### 2. Resource reference After
downloading the resource package, you can see the following directory.
Then import the following three files into your project.
1
2
3
###三. The member name is not empty. Project configuration
1
2
3
4
5
6
7
8
9
Account
<input class="form-control" type="text" autofocus="" name="username" placeholder="Please enter the membership number" autocomplete="off"
data-bv-notempty />
data-bv-notempty means that the membership number should be checked as empty.
The p of form-group is required, otherwise the error "too much recursion" will be reported.
The validateCallback method will be executed when the form is submitted. This method is specifically introduced in the fifth step.
###Four. After the page is loaded, enable the bootstrap validator
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() { // validate form $("form.required-validate").each( function() { var $form = $(this); $form.bootstrapValidator(); // Fix the bootstrap validator to repeatedly submit bugs to the server $form.on('success.form.bv', function(e) { / / Prevent form submission
e.preventDefault();
});
});
}); Add the'class
="required-validate"' attribute to the form form, and then obtain the corresponding form form through jquery, and load it with the default bootstrapValidator.
Be sure to pay attention to the commented part of the code above. For details, please refer to Fixing the repeated bugs submitted by BootstrapValidator.
###五. Validation items when the form is submitted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function validateCallback(form, callback, confirmMsg) { YUNM.debug ("Enter to form validation and submission");
var $form = $(form);
var data = $form.data('bootstrapValidator');
if (data) { // Repair memory components do not validate data.validate(); if (!data.isValid()) { return false; } } $.ajax({ type: form.method ||'POST', url: $form.attr("action"), data: $form.serializeArray(), dataType: "json", cache : false, success: callback || YUNM.ajaxDone, error: YUNM.ajaxError }); return false;} After obtaining the form form in validateCallback, the isValid method can return whether the form verification passed. After the form is validated, the form is submitted to the server through ajax.