JQuery Validate Verification Plug-in usage _jquery

Validate verification plug-ins, built-in rich validation rules, as well as flexible custom rule interface, HTML, CSS and JS between the low coupling allows you to free layout and rich style, support Input,select,textarea validation.

Description

Browser support: ie7+, Chrome, Firefox, Safari, Mobile Browser

jquery version: 1.7.0+

Usage
Load jquery, validate

<script type= "Text/javascript" src= "Jquery-1.11.1.js" ></script>
<script type= "Text/javascript" src= "Jquery-validate.js" ></script>

Dom Tag validation rules fill in

<div class= "Form_control" > <input class= "required" value= "315359131@qq.com"
 type= "text" name= "email" data-tip= "Please enter your mailbox" data-valid= "isnonempty| | Isemail "data-error=" email can not be empty | | Incorrect mailbox format ">
</div>
<div class=" Form_control ">
 <select class=" required "data-valid=" Isnonempty "data-error=" provinces must fill in ">
  <option value=" > Please select Province </option>
  <option value= "001" > 001</option>
  <option value= "002" >002</option>
 </select>
</div>

Fill in the required for the class of the form element that needs to be validated (do not recommend other styles on this class).
It is recommended that input be wrapped with a separate div, because the validated message is append from the parent element of the current input.
Data-tip: The prompt that appears when the focus is not validated.
Data-valid: validation rules, if there is a combination of validation, to | | Symbol segmentation.
data-error: validation error prompts, corresponding to Data-valid, to | | Symbol segmentation.
The Radio/check is special, you need to add the element package selection/Check collection, and add validation rules to the package elements.

<div class= "Form_control" > <span class= "Required" "data-valid=" ischecked "data-error="
 sex must be selected "Data-type=" Radio ">
   <label><input type=" Radio "name=" Sex "> Male </label>
   <label><input type= "Radio" name= "Sex" > </label>
   <label><input type= "Radio" name= "Sex" > Unknown </label>
 </span>
</div>
<div class= "Form_control" >
 <span class= "required" data-valid= " ischecked "data-error=" tab select at least one item "data-type= checkbox" >
   <label><input type= "checkbox" name= "label" > Red </label>
   <label><input type= "checkbox" name= "label" > Green </label>
   <label ><input type= "checkbox" name= "label" > Blue </label>
 </span>
</div>

JS Call

* * Note: validate** $ (' form ') must be called with the form element
 . Validate ({
  type:{
   ischecked:function (value, ErrorMsg, el) {
    var i = 0;
    var $collection = $ (EL). Find (' input:checked ');
    if (! $collection. Length) {return
     errormsg}}}
  ,
  onfocus:function () {
   this.parent (). AddClass (' active ');
   return false;
  },
  onblur:function () {
   var $parent = this.parent ();
   var _status = parseint (this.attr (' data-status '));
   $parent. Removeclass (' active ');
   if (!_status) {
    $parent. addclass (' error ');
   return false;
  }
 });

Validation of forms before submission

 $ (' form '). On (' Submit ', function (event) {
  event.preventdefault ();
  $ (this). Validate (' submitvalidate '); return True or false;
 };

Validate built-in validation rules

Required:true Required Fields
Remote: "Check.php" uses Ajax methods to invoke check.php validate input values
Email:true must enter an e-mail message in the correct format
Url:true must enter the URL in the correct format
Date:true must enter a date in the correct format
Dateiso:true must enter the correct format of the date (ISO), for example: 2009-06-23, 1998/01/22 only verify the format, does not verify the validity
Number:true must enter a valid number (negative, decimal)
Digits:true must enter an integer
CreditCard: You must enter a legal credit card number
Equalto: "#field" input value must be the same as #field
Accept: Enter a string with the legal suffix name (the suffix of the uploaded file)
Maxlength:5 enter a string with a maximum length of 5 (Chinese characters are counted as one character)
Minlength:10 enter a string with a minimum length of 10 (Chinese characters are counted as one character)
RANGELENGTH:[5,10] Enter a string that must be between 5 and 10 (Chinese characters are counted as one character)
RANGE:[5,10] Input value must be between 5 and 10
Max:5 input value cannot be greater than 5
Min:10 input value cannot be less than 10

Example:
Verify username, password, confirm password, homepage, birthday, email , etc.
First, we introduce jquery, introduce jquery.validate.js, introduce messages_cn.js and define an ID for the form, define the Name property for the control that needs to be validated, and assign a value that uses the Name property of the control. Rather than an ID.

<%@ Page language= "C #" autoeventwireup= "true" codebehind= jquery mailbox authentication. Aspx.cs "inherits=" practice. JQuery Mailbox Verification "%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Achieve the following effects:

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