jquery Plugin validation quick way to complete form validation _jquery

jquery's validation plugin can be downloaded to http://plugins.jquery.com/. Today to share, about the use of this plugin.

Easy to use

This first way is a fool-like use, we just need to follow the validation definition of the rules can be.
• First introduce jquery libraries and validation plug-ins:
<script type= "Text/javascript" src= "Jquery-2.2.4.min.js" ></script>
<script type= "Text/javascript" src= "Jquery.validate.min.js" ></script>
• Then open the verification switch:

$ (function () {
 $ ("#form_id"). Validate ();
or
$ (document). Ready (function () {
 $ ("#form_id"). Validate ();

The build_in validation rules for validation are:
◦class = "Required": indicates that the field in the form must be selected
◦class = "required Email" indicates that the field must exist in the form and is in accordance with the canonical format of the email
◦class = "url" indicates that the field in the form needs to meet the matching pattern of the URL
◦minlength = "6" indicates that the field in the form has a minimum length of 6 bits

• Case show:

 <! DOCTYPE html>  

Validation rules are all written to class

Unlike simple use, this approach uses the pure class for control. But we need to introduce a new plugin jquery.metadate.js. The function of the implementation is to help users write all the information related to the validation data into the class attribute, easy to manage.

There are several steps we can take to achieve this requirement.
• Introduction of a new plugin jquery.metadata.js
<script src= "Jquery.metadata.js" ></script>
• Change the switch that invokes the validation form:

$ (function () {
 $ ("#form_id"). Validate ()//remove this line of code and modify it to the following
 $ ("#form_id"). Validate ({meta: "validate"});

• Write validation information into the class attribute. See the code below for details.

 <div align= "center" class= "container" > <form id= "vform" method= "Post" action= "#" > <fieldset>
     <legend> use jquery plugin validation to implement form validation </legend> <p> <label for= "username" > name:</label> <input id= "username" name= "username" class= "{validate: {required:true, Minlength:2}}" > <em>*</e  m> </p> <p> <label for= "email" > Mail:</label> <input id= "email" name= "email"  Class= ' {validate: {required:true,email:true}} ' > <em>*</em> </p> <p> <label for= "url" > URL:</label> <input id= "url" name= "url" class= "{validate: {url:true}}" ></p> < p> <label for= "comment" > Comments:</label> <textarea id= "comment" name= "comment" {class=: {R Equired:true}} "></textarea> <em>*</em> </p> <p><input type=" Submit "name
= "Submit" ></p>   </fieldset> </form> </div>

 

Note: Validate write the class attribute, remember to separate the validation rule with a space . Otherwise the code will not run normally!

And there is $ ("#vform"). Validate ({meta: "validate"}); Validate this word cannot be changed arbitrarily , otherwise it will not take effect.

To build a validation rule from the Name property

The following describes one that is not directly associated with an attribute of an HTML element, but rather the validation of the field and validation rules associated with the Name property.

Advantages: can realize the separation of behavior and structure, and debugging and maintenance code;
• Form code that removes all class validation. This is not to say that we can't add a style to a field.

<div align= "center" class= "container" >
  <form id= "Vform" method= "Post" action= "#" >
   <fieldset >
    <legend> using the jquery plugin validation to implement form validation </legend>
    <p>
     <label for= "username" > Name:</label>
     <input id= "username" name= "username" > <em>*</em>

    </p>
    <p>
     <label for= "email" > Mail:</label>
     <input id= "email" name= "email" > <em>* </em>
    </p>
    <p>
     <label for= "url" > URL:</label>
     <input id= "url" Name= "url" ></p>
    <p>
     <label for= "comment" > Comment:</label> <textarea-id=
     " Comment "name=" comment "></textarea>
     <em>*</em>
    </p>
    <p>< Input type= "Submit" name= "Submit" ></p>
   </fieldset>
  </form>
 </div>

The jquery code is as follows:

<script>
 //$ (function () {
 //$ (' #vform '). validation ();
 // });

 $ (function () {
  $ ("#vform"). Validate ({
   rules:{
    username: {
     required:true,
     minlength:6
    },
    Email: {
     required:true,
     email:true
    },
    url: "url",
    Comment: "Required"
   }
  });
 });

</script>

• Note: use space to separate validation fields

The above is about the jquery plug-in validation based on the use of.

Culture in the midst of internationalization
• First of all, introduce a Chinese information validation library, which we can find under the Lib package of the downloaded validation.
<script src= "Messages_zh.js" ></script>
• The second step is to add the message field to the validation rules and enter the customized Chinese information. As follows:

 <script>
 //$ (function () {
 //$ (' #vform '). validation ();
 // });

 $ (function () {
  $ ("#vform"). Validate ({
   rules:{
    username: {
     required:true,
     minlength:6,
     Messages: {
      required: ' Please enter name ',
      minlength: ' Please input at least 6 characters '
     }
    },
    email: {
     required:true,
     email:true,
     messages: {
      required: ' Please enter the mailbox ',
      email: ' Please check your email format! '
     }
    },
    URL: {
     url:true,
     messages: {
      URL: ' Please check the format of the URL! '
     }
    },
    comment: {
     required:true,
     messages: {
      required: ' Please enter comment! ',
     }
    }
   }
  });
 });

</script>

I do not know how the code, I did not show the Chinese hint, we found the error where it?

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.