JS Component Form form verification Artifact Bootstrapvalidator_javascript tips

This article for everyone to share the JS component form verification Artifact Bootstrapvalidator for your reference, the specific content as follows

1. Primary usage
See bootstrapvalidator Description: A jQuery form Validator for Bootstrap 3. From the description we can know that it requires at least jquery, bootstrap support. 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's form validation, we have to have a form on the cshtml page, and we know that the element in the form takes a value from the Name property, so the elements in the form have to have a property value of name.

<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>

With the form element, it is our JS initialization.

 $ (function () {
 $ (' form '). Bootstrapvalidator ({message
: ' This value isn't valid ',
  feedbackicons: {
    valid: ' Glyphicon glyphicon-ok ',
  invalid: ' Glyphicon glyphicon-remove ',
  validating: ' GL Yphicon Glyphicon-refresh '
  },
  fields: {
  username: {message
   : ' User name validation failed ',
   validators: {
   Notempty: {message
    : ' User name cannot be empty '}}
  ,
  email: {
   validators: {
   notempty:
    { Message: ' Mailbox address cannot be empty '}}}}
 ;

Content should be easy to read. To see the effect:

Verify pass, the Submit button is grayed out and cannot be clicked

Verify through, submit button to restore

See the effect first feel, the biggest advantage: simple, user-friendly interface. Now let's look at overlapping validation.

2. Intermediate usage
Above we know the non-null validation of the writing, in addition there must be other verification methods ah. Don't worry, we'll take a look at it slowly. The above code cshtml part does not move, JS part we modify slightly:

$ (function () {
 $ (' form '). Bootstrapvalidator ({message
  : ' This value isn't valid ',
  feedbackicons: {
  Valid: ' Glyphicon glyphicon-ok ',
  invalid: ' Glyphicon glyphicon-remove ',
  validating: ' Glyphicon Glyphicon-refresh '
  },
  fields: {
  username: {message
   : ' User name validation failed ',
   validators: {
   notempty: {Message
    : ' User name cannot be empty '
   },
   stringlength: {
    min:6,
    max:18, message
    : ' username must be between 6 and 18 bits in length '
   regexp: {
    regexp:/^[a-za-z0-9_]+$/, message
    : ' User name can only contain uppercase, lowercase, digits, and underscores '
  }}},
  Email: {
   validators: {
   notempty: {message
    : ' Mailbox cannot be empty '
   },
   emailaddress: {
    message : ' Mailbox address format is wrong '}}}}
 ;

Plus the overlap verification we see the effect:

It can be seen from the above code that the validators attribute corresponds to a JSON object that can contain multiple types of validation:

• Notempty: Non-null verification;
• Stringlength: string length verification;
• RegExp: Regular expression validation;
• EmailAddress: Email Address verification (we do not have to write the mailbox of the regular ~ ~)

In addition, in the document we see that there are 46 types of validation, we smoke a few common come out to see:

• Base64:64 bit code verification;
• Between: Verify that the input value must be within a range of values, such as greater than 10 or less than 100;
• CreditCard: ID card verification;
• Date: validation of dates;
• IP:IP address verification;
• Numeric: numerical verification;
• Phone: telephone number verification;
• Uri:url verification;

Another common one is the Submithandler attribute, which corresponds to the event method of the Submit button. Use the following:

$ (function () {
 $ (' form '). Bootstrapvalidator ({message
  : ' This value isn't valid ',
  feedbackicons: {
  Valid: ' Glyphicon glyphicon-ok ',
  invalid: ' Glyphicon glyphicon-remove ',
  validating: ' Glyphicon Glyphicon-refresh '
  },
  fields: {
  username: {message
   : ' User name validation failed ',
   validators: {
   notempty: {Message
    : ' User name cannot be empty '
   },
   stringlength: {
    min:6,
    max:18, message
    : ' username must be between 6 and 18 bits in length '
   regexp: {
    regexp:/^[a-za-z0-9_]+$/, message
    : ' User name can only contain uppercase, lowercase, digits, and underscores '
  }}},
  Email: {
   validators: {
   notempty: {message
    : ' Mailbox cannot be empty '
   },
   emailaddress: {
    message : ' Mailbox address format is incorrect '}}
  ,
  submithandler:function (validator, form, Submitbutton) {
  alert ( "Submit");});
 

In its demo, there are many examples of validation. We simply look at its effect, as to the implementation of the Code, in fact, is very simple, interested can directly look at the API.

Color validation

tab Form Validation

Button validation

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is about the entire content of this article, I hope to help you learn.