2013 jquery Validation Engine Form Validation

Directory (?) [-] Options parameter Description Optional Use method load CSS file load JavaScript file add ID to form plus ID to control and set validation type set validation validation type API method validationengine Chinese version jquery Powerful form verification plug-in a simple description of the use of the tutorial to introduce jquery and Plug-ins JSCSS initialization plug-in You can also click the Submit button before triggering validation the default is to start validation after the mouse loses focus, which is bound to the Blur event. See the following configuration to change the location of the hint layer Ajax validation Mode

http://blog.csdn.net/andyliulin/

Precautions:

1. Demo version is v2.2.4;

2.v2.0 The following version parameters are not fully generic;

Modify the validationEngine.jquery.css file as follows:

1. Prompts the content font to change the song body;

2. Remove the private properties of each browser (each browser already supports rounded corners and shadows and no longer need to add private properties).

Modify the jquery.validationEngine.js file as follows:

1. Field.focus () of 312 lines; Comment out, when there is an input control inside the Table, validation causes the phenomenon to return to the top;

Modify the jquery.validationengine-zh_cn.js file as follows:

1. Modify some of the hint text;

2. Increase the validation rules for the two pairs of Chinese characters: MINSIZECN and MAXSIZECN;

3. Remove "Validate2fields": {"Alerttext": "* Please enter HELLO"},

Merge the above two JS files

View Demo

Modified version: JQuery Validation Engine v2.2.4 Chinese version

Original: JQuery Validation Engine v2.2.4 "Options parameter description" (optional)

name	Default Value	Description
Validationeventtrigger	"Blur"	Events that trigger validation, and support events refer to the description of the JQuery event. PS: You can set to NULL if you want to validate only when the form is submitted.
Scroll	True	The screen scrolls automatically to where the first validation is not passed
Focusfirstfield	True	Whether to get focus on the first failed control when validation fails
Promptposition	"TopRight"	Verify the location of the hint information, can be set to: "TopRight", "Bottomleft", "Centerright", "BottomRight"
Autopositionupdate	False	Whether to automatically adjust the position of the hint layer
Bindmethod	"Bind"	Verify how the event is bound, and can be set to: Bind, Live PS: Set Live It seems that the binding event is invalid, but the form submission can be validated and recommended not modified. [Demo]
binded	False	Whether other events have been bound, set to true will not be validated.
Inlineajax	False
Ajaxformvalidation	False	Validating forms with Ajax
Ajaxformvalidationurl	False	Set the URL for Ajax validation by default using the Action property of form
Ajaxvalidcache	{}
Onajaxformcomplete	$.noop	form submission, Ajax validation completed behavior (Function) [Demo]
Onbeforeajaxformvalidation	$.noop	After the form submission validation rule is passed, Ajax validates the behavior (Function) [Demo]
Onvalidationcomplete	False	Behavior of form submission validation when completed (Function) Two parameters can be obtained: form element and validation result (ture or false) [Demo]
Onsuccess	False	Real-time validation of what happens when all projects are passed (Function) [Demo]
OnFailure	False	Real-time validation of the behavior (Function) that occurs when there are failed projects [Demo] Ps:onsuccess and onfailure are not valid when real-time authentication is disabled. For example, Validationeventtrigger is set to NULL, or Bindmethod is set to live
Isoverflown	False	Whether the form is inside an overflow-scrolling element (that is, the external element is set Overflow:scroll) PS: When set to ture, the insertion position of the prompt content is changed to insert before the validated control; At this point, you need to set an element in the outer layer of the control, setting the class= "Inputcontainer"
Overflowndiv	""	An overflow-scrolling element is set, in the form of a jQuery selector.
Showarrow	True
IsError	False
Invalidfields	[]

"Use Method" Load CSS file

<link rel= "stylesheet" href= "Css/validationengine.jquery.css" >

Loading JavaScript files

<script src= "Js/jquery.validationengine.js" ></script> 
<script src= "js/" Jquery.validationengine-zh_cn.js "></script> 
<!-- 
Jquery.validationengine-zh_cn.js The file is a hint text and a custom validation rule, and the 
modified version has merged the two files, just load the jquery.validationEngine.js; in 
addition, the jquery plugin will certainly need to be loaded into the jquery library, with the version in jquery 1.4.4 above. 
-->

add an ID to a form

<form id= "form_id" ...> 
... 
</form> 
<!--ID must be set in the form label, otherwise invalid-->

adding IDs to controls and setting validation types

<input id= "test_1" name= "test_1" type= "text" class= "validate[required" "> 
<input id=" test_2 "name=" test _2 "type=" checkbox "class=" validate[required] "> <textarea id=" test_3 "name=" Test_3 "class=" validate[ 
Required] "><textarea> 
<!-- 
validate[required] means that the control must be filled out 
with an ID, but it does not require the same Name 
-- > 

Setting up Validation

Call 
$ ("#form_id") directly. Validationengine (); 
 
The custom parameter calls 
$ ("#form_id"). Validationengine ("Attach", { 
    promptposition: "Centerright", 
    scroll:false 
}); 

"Authentication type"

<!-- 
Note: The validation rules are written in validate[], and if there are more than one rule, split them in English commas (,). 
example: Validate[required,minsize[6],custom[onlyletternumber]] 
--> 

name	Sample	Description
Required	Validate[required]	Indicates required fields
Optional	Validate[optional]	Represents an option. If you do not enter, do not require required, if there is input, then verify that it meets the requirements.
Daterange[name]	VALIDATE[DATERANGE[GRP1]]	Verify Date Range
Datetimerange[name]	VALIDATE[DATETIMERANGE[GRP1]]	Validation date and time range
Minsize[int]	VALIDATE[MINSIZE[6]]	Minimum number of characters entered
Maxsize[int]	VALIDATE[MAXSIZE[20]]	Maximum number of characters entered
Grouprequired[name]	VALIDATE[GROUPREQUIRED[GRP2]]	Enter at least one item in the group
Min[int]	VALIDATE[MIN[1]]	Minimum value (this is the minimum value of the number, note the distinction between the minsize)
Max[int]	VALIDATE[MAX[9999]]	Maximum value (This is the maximum value of the number, note the distinction with maxSize)
Past[date]	VALIDATE[PAST[2012/12/20]]	Dates must be in the future of date or date. Date format can be written yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d, or now
Future[date]	Validate[future[now]]	Date must be in the past of data or date. Date format can be written yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d, or now
Maxcheckbox[int]	VALIDATE[MAXCHECKBOX[2]]	The maximum number of items selected (for a checkbox)
Mincheckbox	VALIDATE[MINCHECKBOX[2]]	Minimum number of items selected (for checkbox)
equals	Validate[equals[id]]	The current control value needs to be the same as the value of the ID control
Phone	Validate[custom[phone]]	Verifying phone numbers
Email	Validate[custom[email]]	Verify Email Address
Integer	Validate[custom[integer]]	validating integers
Number	Validate[custom[number]]	Verifying numbers
Date	Validate[custom[date]]	Validation date, in the form of Yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d
DateFormat	Validate[custom[dateformat]]	Verify date format in Yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d
DateTimeFormat	Validate[custom[datetimeformat]]	Validation date and time format: Yyyy/mm/dd hh:mm:ss am| Pm
IPv4	Validate[custom[ipv4]]	Verify IPv4 Address
Url	Validate[custom[url]]	Verify URL address, starting with http://, https://, or ftp://
Onlynumbersp	VALIDATE[CUSTOM[ONLYNUMBERSP]]	Only fill in numbers and spaces
Onlylettersp	VALIDATE[CUSTOM[ONLYLETTERSP]]	Only accept the written letter (case) and single quotation mark (')
Onlyletternumber	Validate[custom[onlyletternumber]]	Only accept numbers and English letters
Ajax	Validate[ajax[ajaxusercallphp]]	customizing in validation rules "ajaxusercallphp": { "url": "Phpajax/ajaxvalidatefielduser.php", "Extradata": "Name=eric", "Alerttextok": "* This account name can be used", "Alerttext": "* This name has been used by others", "Alerttextload": "* is confirming that the account name is used by other people, please wait a moment. " }
Funccall	Validate[funccall[functionname]]	Calling external functions

"API Methods"

name	Sample	Description
Attach	$ ("#form_id"). Validationengine ("Attach");	Registration Form Validation Events
Detach	$ ("#form_id"). Validationengine ("detach");	Canceling the Registration form verification event
Validate	Alert ($ ("#form_id"). Validationengine ("Validate");	Validating the form, returning the result to TRUE or false
Validatefield	Alert ($ ("#form_id"). Validationengine ("Validatefield", "#element_id"));	Validates a single control, returns the result true or false
Showprompt	$ ("#element_id"). Validationengine ("Showprompt", "Hint content", "load");	Create a hint on this element, 3 states: "Pass", "error", "Load"
Hideprompt	$ ("#element_id"). Validationengine ("Hideprompt");	Hide the contents of the hint for this element
Hide	$ ("#form_id"). Validationengine ("Hide");	Close hints in a form
Hideall	$ ("#form_id"). Validationengine ("Hideall");	Close all tips on the page
Updatepromptsposition	$ ("#form_id"). Validationengine ("Updatepromptsposition")	Update the location of the hint layer

validationengine Chinese version-jquery powerful form verification plug-in Chinese version, the official only English. At the same time, some validation rules have been modified according to Chinese conditions.

This plugin supports most browsers, but due to the use of the CSS3 Shadow and fillet style, in IE browser can not see the rounded corners and shadow effects (evil IE).

Official Download Address: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Examples of common validation: http://www.position-relative.net/creation/formValidator/

Examples of AJAX validation: http://www.position-relative.net/creation/formValidator/demoSubmit.html

A: A brief description of the use of the tutorial: introduction of jquery and Plug-ins js, css <linkrel= "stylesheet" href= "Css/validationengine.jquery.css" type= "Text/css" Screen "charset=" Utf-8 "/> <script src=" js/jquery.js "type=" Text/javascript "></script> <script src= "Js/jquery.validationengine-en.js" type= "Text/javascript" ></script> <script src= "js/" Jquery.validationEngine.js "type=" Text/javascript "></script>

Jquery.validationengine-en.js is a language file, all the prompts are found in this file, can be easily translated into other languages, and you can also customize their own validation rules in this file. Initialize the plug-in $ (document). Ready (function () {$ (#formID). Validationengine ()})

Validation rules are written in the class attribute of the form element. For example: <inputvalue= "" class= "Validate[required,custom[nospecialcaracters],length[0,20],ajax[ajaxuser]" "Type=" Text "name=" user "id=" user "/>

The validation rules are very diverse and basically contain all of the data type validation.
All validation rules are written in validate[], there are multiple validations, separated by commas, here is a brief description of the common validation rules. Required: value cannot be empty length[0,100]: text allows length Confirm[fieldid]: matches the value of another form element, FieldID is the ID of another form element, which is used primarily to confirm the password again telephone : Data format requirements in line with the telephone format email: Data format requirements in accordance with the email format onlynumber: Only allow the input of digital nospecialcaracters: special characters are not allowed Onlyletter: only the letter date: must conform to dates format YYYY-MM-DD You can also click the Submit button before triggering validation. $ ("#formID"). Validationengine ({inlinevalidation:false, Success:false, Failure:function () {callfailfunction () The default is to start validation after the mouse loses focus, that is, the Blur event is bound, and how does that change? Look at the configuration below.  $ ("#formID"). Validationengine ({validationeventtriggers: "KeyUp blur",//will validate on KeyUp and blur success: False, Failure:function () {callfailfunction ()}})

The Validationeventtriggers property is to modify the binding event, which adds a keyup, which means that the keyboard keys trigger the validation. Modify the location of the hint layer $ ("#formID"). Validationengine