jquery Form Verification Plugin summary detailed

Vanadium.js

How to use it?

The first step, of course, is the same as using other jquery plug-ins, the introduction of plug-in file Vanadium.js;

The second step is to add the corresponding validation hooks to your form based on the validation method you want to use in your form. For example, you want to make the following form mandatory: <input id= "Checkempty"/>

Then, add class= ": Required" >: <input id= "Checkempty" class= ": Required"/>

Others, like: Required verification hooks, can be found in the static page, such as the number is: The maximum value is: max_length;4, of course, you can also customize or modify the name you know.

If you have a form that satisfies multiple conditions, such as a required entry, and the number of characters entered between 4-8, you can write:

The code is as follows	Copy Code
<label for= "checkmaxmin" > Input 4 to 8 characters: </label></td><td><input id= "Checkmaxmin": Required:min_length;4:max_length;8 "/>

Do you understand? Separate the conditions by a space;

The third step, modify pop-up information, such as the item can not be empty, you feel that the personality, you can find this field in the judgment statement to change into what you feel personality.

The fourth step is to remove the criteria you cannot use. It is a virtue to keep the code clean and concise. The demo page lists all the methods of judgment that are almost impossible to use in the same form in real-world applications. So, delete those judgments you don't need. OK, that only proves that you are lazy and nothing else.

The fifth step, several parameter description:
Valid_class: ' Rightformcss ',//form style when validation is correct
Invalid_class: ' Failformcss ',//the form style when validation fails
Message_value_class: ' Msgvaluecss ',//This style is the style of the call value in the pop-up message
Advice_class: ' failmsg ',//The style of text information when validation fails
。

Single-Validation plugin Easyvalidator

Easyvalidator Implementation Features:

1. Hint function (add tip= "text to hint" in form or other tag)

Such as:

<input name= "name" tip= "Please enter your name yo ~" >

Or

<a href= "g/769021" tip= "to Easyvalidator official homepage" target= "_blank" > have doubts can come here to ask </a>

2. Common form verification (add reg= "regular expression" to the form)
such as: <input name= "username" reg= "regular"/>
Common form Verification demo:http://easyvalidator.googlecode.com/svn/trunk/index.html

3. Ajax form verification (add Url= "Verify system Address" to the form)
such as: <input name= "username" url= "Address"/>
Ajax Verification Demo: No online demo, please run ajax_demo.html in the local, request remote PHP file, of course, for JSP or ASP, I am here in the program preset some existing data, users can refer to themselves.

4. Common form verification + Ajax form verification (after normal validation through, then Ajax validation)
such as: <input name= "username" reg= "regular" url= "address"/>

5. Extended function Form validation (certain business-specific requirements):
These special needs are based on business, and here's a list of things like this:
1.checkbox selection box number validation, such as restricting the selection of at least 1 people, select up to 5 checkboxes.
2. Comparisons between multiple forms, such as "Start Timesheet form" must be less than or equal to "end Timesheet list" or two password forms to register, etc.
Latest Download Address: http://code.google.com/p/easyvalidator/downloads/list

Form Validation Plug-in Jquery.form.js

The Form plug-in API provides several ways for you to easily manage form data and make form submissions.

Ajaxform

Add all the event listeners you need to prepare your form for AJAX submission. Ajaxform cannot submit a form. In the ready function of document, use Ajaxform to prepare the form for AJAX submission. Ajaxform accepts 0 or 1 parameters. This single parameter can be either a callback function or a options object.
can link (chainable): OK.

Instance:

$ (' #myFormId '). Ajaxform ();

Ajaxsubmit

Immediately submit the form by Ajax. In most cases, you call Ajaxsubmit to respond to a user submitting a form. Ajaxsubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or a options object.
can link (chainable): OK.

Instance:

The code is as follows	Copy Code
Bind form Submit event handler $ (' #myFormId '). Submit (function () { Submitting a form $ (this). Ajaxsubmit (); To prevent form submission and page navigation from normal browsers (Prevent page refreshes?) ) returns false return false; });

Formserialize

Serialize (or serialize) the form into a single query string. This method returns a string in the following format: Name1=value1&name2=value2.
can link (chainable): No, this method returns a string.

Instance:

The code is as follows	Copy Code
var querystring = $ (' #myFormId '). Formserialize (); You can now submit data using $.get, $.post, $.ajax, etc. $.post (' myscript.php ', querystring);

Fieldserialize

Serialize (or serialize) the field elements of the form into a single query string. This is handy when only a subset of the form fields need to be serialized (or serializable). This method returns a string in the following format: Name1=value1&name2=value2.
can link (chainable): No, this method returns a string.

Instance:

The code is as follows	Copy Code
var querystring = $ (' #myFormId. Specialfields '). Fieldserialize ();

Fieldvalue

Returns the form element values that match the inserted array. From version 0.91, the method will always return data as an array. If the element value is determined to be invalid, the array is empty, otherwise it will contain one or more element values.
can link (chainable): cannot, this method returns an array.

Instance:

The code is as follows	Copy Code
Get Password Input value var value = $ (' #myFormId:p assword '). Fieldvalue (); Alert (' The password is: ' + value[0]);

Resetform

Restores the form to its original state by invoking the original Dom method of the form element.
can link (chainable): OK.

Instance:

The code is as follows	Copy Code
$ (' #myFormId '). Resetform ();

ClearForm

Clears the form element. The method password all text input fields, password () input fields, and text area (textarea) fields, clearing the selection in any SELECT element. and resets all radio (radio) and multiple-selection (checkbox) buttons to an unselected state.
can link (chainable): OK.

The code is as follows	Copy Code
$ (' #myFormId '). ClearForm ();

Clearfields

Clears the field element. It is only convenient to use if some form elements need to be cleared.
can link (chainable): OK.

The code is as follows	Copy Code
$ (' #myFormId. Specialfields '). Clearfields ();

Options Object

Both Ajaxform and Ajaxsubmit support a wide range of option parameters that can be provided using a options object. The options is just a JavaScript object that contains a collection of properties and values as follows:

Target

Indicates the element in the page that is updated by the server response. The value of an element may be specified as a jquery selector string, a jquery object, or a DOM element.
Default value: null.

Url

Specifies the URL that submits the form data.
Default value: Form's Action property value

Type

Specifies the method that submits the form data: "Get" or "POST."
Default value: The form's Method property value (if the default is "get" is not found).

Beforesubmit

The callback function that was invoked before the form was submitted. The "Beforesubmit" callback function is provided as a hook (hook) to run the pre-submit logic or validate the form data. If the "Beforesubmit" callback function returns false, then the form will not be submitted. The "Beforesubmit" callback function takes three call parameters: Form data in array form, jquery Form object, and the options object in the incoming ajaxform/ajaxsubmit. The form singular group accepts data in the following ways:

[{name: ' username ', value: ' Jresig '}, {name: ' Password ', value: ' Secret '}]

Default value: null

Success

callback function that is invoked after a form has been successfully submitted. If a "success" callback function is provided, it is invoked when the response is returned from the server. The datatype option value is then determined to return the value of ResponseText or Responsexml.
Default value: null

DataType

The data type expected to be returned. NULL, "XML", "script", or "JSON" one of them. DataType provides a method that provides a way to handle the response of a server. This is directly reflected in the Jquery.httpdata method. The following values are supported:

' XML ': if datatype = = ' xml ', the server response will be treated as XML. Also, if the "success" callback method is specified, the Responsexml value is returned.

' JSON ': if datatype = = ' json ', the server response is evaluated and passed to the "success" callback method if it is specified.

' Script ': if datatype = = ' script ', the server response will be evaluated as plain text.

Default value: null (server returns RESPONSETEXT value)

Semantic

The Boolean flag indicating whether data must is submitted in strict the order (semantic). The "normal" form serialization is the semantic order with the exception of input elements of type= "image". Should only set the semantic option to TRUE if your server has strict semantic requirements and your form contains INPUT element of type= "image".
Boolean flags that indicate whether data must be strictly in semantic order (slower?). ) for submission. Note: In general, the form has been serialized (or serialized) in a semantic order, except for the type= "image" INPUT element. If your server has strict semantic requirements, and the form contains an INPUT element with a type= "image", you should set the semantic to true. This passage cannot be understood, the translation may not express language, but please make corrections. ）
Default value: False

Resetform

A Boolean flag that indicates whether the form submission succeeds if it is reset.
Default Value:null

ClearForm

A Boolean flag that indicates whether the form data is purged if the form submission succeeds.
Default value: null

Instance:

The code is as follows	Copy Code
Prepare the Options object. var options = { Target: ' #divToUpdate ', URL: ' comment.php ', Success:function () { Alert (' for your comment! '); } }; Pass the options to Ajaxform $ (' #myForm '). Ajaxform (options);

Note: The options object can also be used to pass values to the $.ajax method of jquery. If you are familiar with the options supported by $.ajax, you can use them to pass the options object to Ajaxform and Ajaxsubmit.