Jquery.validationengine Form Verification Plug-in (recommended) _jquery

I. Description

Jquery.validationengine form validation controls are powerful and have a style display mode:

1. Character type: Non-null verification, maximum length, minimum length, equality judgment, numbers and spaces, numbers, and English letters

2. Number type: Number, integer, Maximum, minimum value

3. Date Type: Date (yyyy-mm-dd/yyyy/mm/dd etc.), date + time, minimum date, maximum date, date time period

4. Business fields: URL, email, phone, ipv4;ciaoca version Extended support: QQ, ZIP code, ID card, Chinese characters.

5.Ajax Background validation: Supports global extension definition, background can define message content, but no callback processing extension.

6. Other custom extensions.

Second, related documents

1.Git Source code Address: Https://github.com/posabsolute/jQuery-Validation-Engine

2. Chinese Document API Reference: http://code.ciaoca.com/jquery/validation-engine/

3. Chinese optimized version Ciaoca download

4.asp.net Demo Instance source code address: Https://git.oschina.net/tiama3798/BootstrapBack_Demo/tree/JQuery.validationEngine

Third, other Forms label verification

1. Reference:

<link href= "~/scripts/validation/validationengine.jquery.css" rel= "stylesheet"/> <script src= 
"~/" Scripts/validation/jquery.validationengine.js "></script> 
<script src=" ~/scripts/validation/ Jquery.validationengine-zh_cn.js "></script> 

2.HTMl:

<div class= "Panel Panel-default" > <div class= "panel-heading" > <div class= "panel-title" > Common Business Field Validation ;/div> </div> <div class= "Panel-body" > <form role= "Form" id= "Form1" class= "Demoform" action= "#" &G 
   T 
     <div class= "Form-group" > <label class= "control-label" > Classification:</label> <div class= "select" > <select class= "Form-control validate[required]" name= "type" > <option value= "" >== Please select ==&LT;/OPTION&G 
      T <option value= "1" > One star </option> <option value= "2" > Two-star </option> <option value= "3" &G t; three star </option> </select> </div> </div> <div class= "Form-group" > < Label class= "Control-label" > Multi-selection box:</label> <div> <label class= "Checkbox-inline" > < Input class= "validate[mincheckbox[2]" "Type=" checkbox "Name=" CHB1 "/> One star </label> <label class=" ch eckbox-inline "> <input class=" validate[mincheckbox[2]] "type=" checkbox "Name=" CHB1 "/> Two-star </label> <label class= "Checkbox-inline" > <input class= "validate[mincheckbox[2]]" type= "checkbox" Name= "CHB1"/& GT three star </label> </div> </div> <div class= "Form-group" > <label class= " Control-label "> Radio box:</label> <div> <label class=" Radio-inline "> <input class=" val Idate[required] "type=" Radio "name=" Rad1 "/> Male </label> <label class=" Radio-inline "> < Input class= "validate[required]" type= "Radio" name= "Rad1"/> Women </label> <label class= "Radio-inline" 
   > <input class= "validate[required]" type= "Radio" name= "Rad1"/> Other </label> </div> </div> <div class= "Form-group" > <label class= "Control-label" > Profile:</label> <te Xtarea class= "Form-contrOL validate[required] "></textarea> </div> <div class=" Form-group "> <label class=" cont Rol-label "> Upload Picture: </label> <div > <input type=" file "class=" Form-control validate[ Required] "/> </div> </div> <div> <br/><br/> <input typ  E= "Submit" class= "btn btn-success" value= "Submit"/> </div> </form> </div> </div>

3.Js:

$ (function () {/* 
 * Special NOTE: 
 * 1. For the Select label, you must specify the Value property, and no empty string * 2 can be specified 
 . For checkbox and radio validation failure messages, Display near the first button 
 ////Custom error display location 
 $ ('. Demoform '). Validationengine ({ 
  promptposition: ' BottomRight ', 
  addpromptclass: ' Formerror-white ' 
 }); 

Show Results:

Third, the AJAX background verification example:

1. Background definition:

Public Jsonresult Exists (String FieldID, String fieldvalue) 
{ 
 if (Fieldvalue.length > 3) return 
  Json (new Object[] {FieldID, true}); 
 Return Json (new object[] {fieldid,false}); 
Public Jsonresult Getinfobycode (String FieldID, String fieldvalue) 
{ 
 if (Fieldvalue.length > 3) 
  return Json (new object[] {FieldID, true, "Zhang San Feng"}); 
 Return Json (new object[] {FieldID, False, verify failed}); 
Public Jsonresult Getbyname (String FieldID, String fieldvalue) 
{ 
 if (Fieldvalue.length > 3) 
  return Json (new object[] {FieldID, true, "background validation successful", new { 
   name= "Zhang San Feng", 
   age=20 
  }); 
 Return Json (new object[] {FieldID, False, "validation failed, message from background"}); 

2.ajax authentication Method Extension:

3.HTML definition:

<div class= "Panel Panel-default" > <div class= "panel-heading" > <div class= "panel-title" >ajax background verification ;/div> </div> <div class= "Panel-body" > <form role= "Form" id= "Form1" class= "Demoform" action= "#" &G 
   T <div class= "Form-group" > <label class= "Control-label" > Nickname:</label> <input "class=" L Validate[required,ajax[ajaxnickname]] "name=" nickname "/> </div> <div class=" Form-group "> &L T;label class= "Control-label" > Number:</label> <input class= "Form-control Validate[required,ajax[ajaxcode]] "Name=" code "value=" "/> </div> <div class=" Form-group "> <label class=" Control-label " 
   Number:</label> <input class= "Form-control validate[required,ajax[ajaxname]" "Name=" Code "value=" "/>" </div> <div> <input type= "Submit" class= "btn btn-success" value= "submitted"/> </div> ;/form> </diV> </div>  

4.JS

* 
* Special NOTE: 
* 1.ajax validation rules or other extended validation rules, can be extended in the jquery.validationengine-zh_cn.js 
* 2.ajax backend return JSON object format: 
* Return data content: [String,boolean] 
* The first value type is String, is the value received FieldID; 
* The second value type is Boolean, and validation returns true without returning False 
* 3. If there is a third value that can be displayed as ' message content ', 
* 4. For a single AJAX validation commit, no callback handling events such as 
///Custom error display location 
$ ('. Demoform '). Validationengine ({ 
 promptposition: ' bottomright ', 
 //This property, specify how 
 Ajax submits tables and field AJAX validation Ajaxformvalidationmethod: ' Post ', 
 //Specify to use Ajax mode to submit form processing 
 ajaxformvalidation:true, 
 onajaxformcomplete : Function (status, form, JSON, options) { 
  console.info (status); 
  Console.info (form); 
 }, 
 onbeforeajaxformvalidation:function (form, options) { 
  console.info (form); 
 } 

Show Results:

The above is a small set to introduce the Jquery.validationengine form verification plug-in (recommended), I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone!