Foreword: For those of us who are doing web development, form validation is a very common requirement. Friendly error prompts can enhance the user experience. Bloggers search for bootstrap form validation, and most of the results found are the subject of the text: bootstrapvalidator. Let's see how it works today.
1. Source code and API address
Before introducing it, let's give its source code and API address.
bootstrapvalidator source code: https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api：http://bv.doc.javake.cn/api/
Second, code and effect display
1. Primary usage
See the description of bootstrapvalidator: A jQuery form validator for Bootstrap 3. From the description, we can know that it needs at least the support of jQuery and bootstrap. We first introduce the required js components
<script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Content/bootstrap/js/bootstrap.min.js"></script> <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script> <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />
We know that since it is form validation, then we must have a Form on the cshtml page, and we know that the elements in the Form are obtained through the name attribute, so the elements in the form must have a name attribute. value.
<form> <div class="form-group"> <label>Username</label> <input type="text" class="form-control" name="username" /> </div> <div class="form-group"> <label>Email address</label> <input type="text" class="form-control" name="email" /> </div> <div class="form-group"> <button type="submit" name="submit" class="btn btn-primary">Submit</button> </div> </form>
After we have the form element, our js is initialized.
$(function () { $('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: { username: { message: 'Username verification failed', validators: { notEmpty: { message: 'Username cannot be empty' } } }, email: { validators: { notEmpty: { message: 'Email address cannot be null' } } } } }); });
The content should be easy to understand. To see the effect:
The verification fails, the submit button is grayed out and cannot be clicked
The verification is passed, and the submit button is restored
Take a look at the effect and feel it first, the biggest advantage: easy to use and friendly interface. Now let's look at overlapping validation.
2. Intermediate usage
Above we know how to write non-empty verification, and there must be other verification methods. Don't worry, we'll take it slow. The cshtml part of the above code does not change, and the js part is slightly modified:
$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: ' glyphicon glyphicon-refresh' }, fields: { username: { message: 'Username validation failed', validators: { notEmpty: { message: 'Username cannot be empty' }, stringLength: { min: 6, max: 18, message: 'Username length must be between 6 and 18 characters' }, regexp: { regexp:/^[a-zA-Z0-9_]+$/, message: 'The username can only contain uppercase, lowercase, numbers and underscores' } } }, email: { validators: { notEmpty: { message: 'The email address cannot be Empty' }, emailAddress: { message: 'The email address format is incorrect' } } } } }); });{ message: 'The email address format is incorrect' } } } } }); });{ message: 'The email address format is incorrect' } } } } }); });
With overlapping verification, let's see the effect:
It can be seen from the above code that the validators property corresponds to a Json object, which can contain multiple validation types:
notEmpty: not empty validation;
stringLength: string length verification;
regexp: regular expression validation;
emailAddress: Email address verification (no need for us to write the regularity of the email~~)
In addition, in the document we see that it has a total of 46 verification types, let's take a few common ones to see:
base64 : 64-bit encoding verification;
between : Verify that the input value must be within a certain range, such as greater than 10 and less than 100;
creditCard : ID verification;
date : date validation;
ip : IP address verification;
numeric : numeric validation;
phone : phone number verification;
uri : url verification;
For more validation types, see: http://bv.doc.javake.cn/validators/ . Of course, there may be some small problems involving the verification of Chinese. Gardeners can go down and test with the code if necessary.
Another common one is the submitHandler attribute, which corresponds to the event method of the submit button. Use as follows:
$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: ' glyphicon glyphicon-refresh' }, fields: { username: { message: 'Username validation failed', validators: { notEmpty: { message: 'Username cannot be empty' }, stringLength: { min: 6, max: 18, message: 'Username length must be between 6 and 18 characters' }, regexp: { regexp:/^[a-zA-Z0-9_]+$/, message: 'The username can only contain uppercase, lowercase, numbers and underscores' } } }, email: { validators: { notEmpty: { message: 'The email address cannot be Empty' }, emailAddress: { message: 'The email address format is incorrect' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });{ notEmpty: { message: 'The email address cannot be empty' }, emailAddress: { message: 'The email address format is incorrect' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });{ notEmpty: { message: 'The email address cannot be empty' }, emailAddress: { message: 'The email address format is incorrect' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });
In its Demo, there are many examples of verification. Let's take a brief look at its effect. As for the implementation code, it is actually very simple. If you are interested, you can directly look at the api.
color verification
Tab page form validation
button validation
Reprinted: http://www.cnblogs.com/landeanfen/p/5035608.html
Foreword: For those of us who are doing web development, form validation is a very common requirement. Friendly error prompts can enhance the user experience. Bloggers search for bootstrap form validation, and most of the results found are the subject of the text: bootstrapvalidator. Let's see how it works today.
1. Source code and API address
Before introducing it, let's give its source code and API address.
bootstrapvalidator source code: https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api：http://bv.doc.javake.cn/api/
Second, code and effect display
1. Primary usage
See the description of bootstrapvalidator: A jQuery form validator for Bootstrap 3. From the description, we can know that it needs at least the support of jQuery and bootstrap. We first introduce the required js components
<script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Content/bootstrap/js/bootstrap.min.js"></script> <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script> <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />
We know that since it is form validation, then we must have a Form on the cshtml page, and we know that the elements in the Form are obtained through the name attribute, so the elements in the form must have a name attribute. value.
<form> <div class="form-group"> <label>Username</label> <input type="text" class="form-control" name="username" /> </div> <div class="form-group"> <label>Email address</label> <input type="text" class="form-control" name="email" /> </div> <div class="form-group"> <button type="submit" name="submit" class="btn btn-primary">Submit</button> </div> </form>
After we have the form element, our js is initialized.
$(function () { $('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: { username: { message: 'Username verification failed', validators: { notEmpty: { message: 'Username cannot be empty' } } }, email: { validators: { notEmpty: { message: 'Email address cannot be null' } } } } }); });
The content should be easy to understand. To see the effect:
The verification fails, the submit button is grayed out and cannot be clicked
The verification is passed, and the submit button is restored
Take a look at the effect and feel it first, the biggest advantage: easy to use and friendly interface. Now let's look at overlapping validation.
2. Intermediate usage
Above we know how to write non-empty verification, and there must be other verification methods. Don't worry, we'll take it slow. The cshtml part of the above code does not change, and the js part is slightly modified:
$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: ' glyphicon glyphicon-refresh' }, fields: { username: { message: 'Username validation failed', validators: { notEmpty: { message: 'Username cannot be empty' }, stringLength: { min: 6, max: 18, message: 'Username length must be between 6 and 18 characters' }, regexp: { regexp:/^[a-zA-Z0-9_]+$/, message: 'The username can only contain uppercase, lowercase, numbers and underscores' } } }, email: { validators: { notEmpty: { message: 'The email address cannot be Empty' }, emailAddress: { message: 'The email address format is incorrect' } } } } }); });{ message: 'The email address format is incorrect' } } } } }); });{ message: 'The email address format is incorrect' } } } } }); });
With overlapping verification, let's see the effect:
It can be seen from the above code that the validators property corresponds to a Json object, which can contain multiple validation types:
notEmpty: not empty validation;
stringLength: string length verification;
regexp: regular expression validation;
emailAddress: Email address verification (no need for us to write the regularity of the email~~)
In addition, in the document we see that it has a total of 46 verification types, let's take a few common ones to see:
base64 : 64-bit encoding verification;
between : Verify that the input value must be within a certain range, such as greater than 10 and less than 100;
creditCard : ID verification;
date : date validation;
ip : IP address verification;
numeric : numeric validation;
phone : phone number verification;
uri : url verification;
For more validation types, see: http://bv.doc.javake.cn/validators/ . Of course, there may be some small problems involving the verification of Chinese. Gardeners can go down and test with the code if necessary.
Another common one is the submitHandler attribute, which corresponds to the event method of the submit button. Use as follows:
$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: ' glyphicon glyphicon-refresh' }, fields: { username: { message: 'Username validation failed', validators: { notEmpty: { message: 'Username cannot be empty' }, stringLength: { min: 6, max: 18, message: 'Username length must be between 6 and 18 characters' }, regexp: { regexp:/^[a-zA-Z0-9_]+$/, message: 'The username can only contain uppercase, lowercase, numbers and underscores' } } }, email: { validators: { notEmpty: { message: 'The email address cannot be Empty' }, emailAddress: { message: 'The email address format is incorrect' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });{ notEmpty: { message: 'The email address cannot be empty' }, emailAddress: { message: 'The email address format is incorrect' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });{ notEmpty: { message: 'The email address cannot be empty' }, emailAddress: { message: 'The email address format is incorrect' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });
In its Demo, there are many examples of verification. Let's take a brief look at its effect. As for the implementation code, it is actually very simple. If you are interested, you can directly look at the api.
color verification
Tab page form validation
button validation
Reprinted: http://www.cnblogs.com/landeanfen/p/5035608.html