Jquery formvalidator Form Verification plug-in summary and Examples

ArticleDirectory

• Overview
• Option
• Example
• Overview
• Option
• Example
• Overview
• Option
• Example
• Overview
• Option
• Example
• Overview
• Option
• Example
• Overview
• Option
• Example

Six verification methods:

 

Inputvalidator (controls the character length, value range, and number of selections of input, textarea, and select controls)

Inputvalidator Overview

Controls the character length, value range, and number of selections of input, textarea, and select controls

Supported control types
Text (text box), Radio (single choice), checkbox (check box), file (File selector), password (Password box), textarea (multi-line edit box), select (select box)

Option Type Object

(Default: "size") property name: comparison type. Values can be of the following types:
"Size": indicates the length of characters/(checkbox/Radio) selected number
"Number": numeric comparison
"String": string type comparison
"Date": short date type
"Datetime": long date type

Min Object

(Default: 0) attribute name: minimum length/value. The default numeric type indicates the number or length of the selected number.
Indicates the number of selected controls for checkbox/radio.
For text (text box), password (Password box), and textarea (multi-line edit box), it indicates the length or value of the input value.
For select-one, the min and Max parameters in inputvalidator indicate the range of selected index numbers.
For select-multiple, the min and Max parameters in inputvalidator indicate the number of selected values.

Max Object

(Default: 99999) attribute name: Maximum length/value. Same as Min Property

Onerror String

(Default: input error) property name: Error prompt. Prompt when an error occurs. If it is null, It is not displayed.

Onerrormin String

Property name: a prompt that is smaller than the min attribute. Error message when the value entered by the user is smaller than the min attribute

$ ("# Nl"). formvalidator ({
Automodify: True,
Onshow: "Enter the age (between 1 and 99 years old )",
Onfocus: "Only numbers between 1 and 99 can be entered ",
Oncorrect: "Congratulations, you have lost"
}).
Inputvalidator ({
Min: 1,
MAX: 99,
Type: "value ",
Onerrormin: "the value you entered must be greater than or equal to 1 ",
Onerror: "The age must be between 1 and 99. Please confirm"
});
 

Onerrormax String

Property name: a prompt that is larger than the max property. Error message when the value entered by the user is greater than the max attribute

Empty JSON

Attribute name: whether to allow null on both sides. The default value is null twice. The default value is {leftempty: True, rightempty: True, emptyerror: NULL}
Leftempty: whether to allow null on the left
Rightempty: whether to allow null on the right
Emptyerror: the prompt when this error occurs. If it is null, The onerror attribute is used to prompt the error.

Example description:

Verify the length of the [User name: Input-text control: username], which must be between 4-10

Jquery Code :

$ ("# Username"). formvalidator ({
Onshow: "Enter the user name ",
Onfocus: "The user name must contain at least 4 characters and a maximum of 10 characters ",
Oncorrect: "This user name can be registered"
})
. Inputvalidator ({
Min: 4, Max: 10,
Onerror: "The user name you entered is invalid. Please confirm"
});
 

Description:

Verify the value (value) of age: Input-text control: NL, which must be between 1 and 99

Jquery code:

$ ("# Nl"). formvalidator ({
Automodify: True,
Onshow: "Enter the age (between 1 and 99 years old )",
Onfocus: "Only numbers between 1 and 99 can be entered ",
Oncorrect: "Congratulations, you have lost"
}).
Inputvalidator ({
Min: 1,
MAX: 99,
Type: "value ",
Onerrormin: "the value you entered must be greater than or equal to 1 ",
Onerror: "The age must be between 1 and 99. Please confirm"
});
 

Description:

Check [Hobbies: checkbox control: xqah] select at least 2, up to 3

Jquery code:

 
$ (": Checkbox [name = 'xqah']"). formvalidator ({
Onshow: "Please select your hobbies (at least two, at most three )",
Onfocus: "You must select at least two and at most three ",
Oncorrect: "Congratulations, you have selected the correct one ",
Defaultvalue: ["7", "8"]})
. Inputvalidator ({
Min: 2,
MAX: 3,
Onerror: "The number you selected is incorrect (at least two, at most three )"
});
 

Description:

Verification [Education: Select Control: xueli] required

Jquery code:

 
$ ("# Xueli"). formvalidator ({
Onshow: "select your degree ",
Onfocus: "required education qualifications ",
Oncorrect: "Thank you for your cooperation ",
Defaultvalue: ""})
. Inputvalidator ({
Min: 1,
Onerror: "Have you forgotten your degree! "
}). Defaultpassed ();

 

 

 

Comparevalidator (two objects can be compared. Currently, strings and numbers can be compared)

 

Overview of comparevalidator

Comparison of two objects is provided. Currently, strings and numeric types can be compared.

Supported control types
Text (text box), file (File selector), password (Password box), textarea (multi-line edit box)

Option Desid String

Property name: ID of the control to be compared. Target ID to be compared with the source target

Operateor String

(Default: "=") property name: Comparison symbol. There are several types: = ,! =,>,> =, <, <=

Datatype String

(Default: "string") attribute name: data type. Currently, only four types are supported: "string", "Number", "datetime", and "date"

Onerror String

(Default: "input error") attribute name: Error prompt. Prompt when an error occurs. If it is null, It is not displayed.

Example description:

Password2 must be consistent with password2.

Jquery code:

$ ("# Password2"). formvalidator ({
Onshow: "entering the password again ",
Onfocus: "at least 1 length ",
Oncorrect: "consistent passwords "})
. Inputvalidator ({min: 1, onerror: "Duplicate password cannot be blank. Please confirm "})
. Comparevalidator ({
Desid: "password1 ",
Operateor: "= ",
Onerror: "Two different passwords, please confirm"
});
 

 

 

Ajaxvalidator (perform data verification on the server through Ajax)

 

Returned value: jqueryajaxvalidator Overview

Use ajax to verify data on the server

Supported control types
Text (text box), file (File selector), password (Password box), textarea (multi-line edit box), select (select box)

Troubleshooting steps
1. Check whether the current plug-in class library is in the latest version.
2. Check whether the jquery class library exceeds the supported Maximum Version (1.4.4)
3. Check whether the URL path is correct. Set a breakpoint on the server to check whether the path can be executed.
4. Ajax: True must be configured in the formvalidator function of the control to be submitted to the server together.

Notes
1. When submitting a request, the clientid parameter is automatically appended to the URL, indicating the ID of the control that triggers verification.
2. At the time of submission, the Rand parameter is automatically appended to the URL. This is a random number, so you do not have to pass the current timestamp.
3. Almost all attributes are the same as those of $. Ajax (). For more information, see the help of the $. Ajax () function.
4. The value of your control cannot be directly linked to the end of the URL parameter. In this case, it cannot be worthwhile. For example, URL: "Your URL. ashx? "+ $ (" # Control ID "). Val ()

Option Type String

(Default: "Get") attribute name: Request type. Request Method ("Post" or "get"). The default value is "get ". Note: Other HTTP request methods, such as put and delete, can also be used, but are only supported by some browsers.

URL String

(Default: Current page address) attribute name: the URL to be sent. The address where the request is sent. On the server side, you can obtain the ID of the control that triggers verification using clientid.

Datatype String

(Default: "html") attribute name: returned data type. XML, HTML, script, JSON, text

Timeout Number

(Default: 999) attribute name: timeout setting. Timeout settings

Data Object, string

Attribute name: data.

Async Boolean

(Default: True) property name: whether to send messages asynchronously. Whether to send messages Asynchronously

Success Function

Property name: the callback function when the call is successful. You can return the following types:
1. False. The onerror message is displayed on the prompt layer.
2. True. The oncorrect information of formvalidator is displayed on the prompt layer.
3. String. The return string is displayed on the prompt layer.

Processdata Object, string

(Default: True) property name: whether to convert to object. By default, if the data option is passed into an object rather than a string, it will be automatically processed and converted into a query string.

Complete Function

Attribute name: The call function when the task is completed. Callback Function for Ajax request termination

Beforesend Function

Attribute name: The function called before the request. The callback function before Ajax verification. You can return true, false, and string. If a string is returned, the verification fails. The returned information is displayed as an error message.

Buttons String

Property name: click the button (Group) to submit the jquery object. When you trigger Ajax verification, the buttons (groups) in the buttons will be grayed out before sending, and will be highlighted after the server returns the data.

Error Function

Attribute name: the callback function for failures. Callback function in case of failure

Onwait String

(Default: "waiting for the server to return data") attribute name: indicates that the server is being verified. Message sent when the server does not return data.

Onerror Object, string

(Default: "server Verification Failed") attribute name: indicates that the verification failed. There are two types of this parameter
1. String. The prompt message when an error occurs.
2. functions. There are two parameters, parameter 1: Current Value parameter 2: current control object (DOM)

Example description:

Perform Ajax verification on the user name

Jquery code:

$ ("# Us "). formvalidator ({onshow: "Enter the user name", onfocus: "The user name must be at least five characters and a maximum of 10 characters", oncorrect: "This user name can be registered "}). inputvalidator ({min: 5, Max: 10, onerror: "The user name you entered is invalid. Please confirm "})
. Ajaxvalidator ({
Datatype: "html ",
Async: True,
URL: "http://www.51gh.net/chkuser.aspx? Act = OK ",
Success: function (data ){
If (data. indexof ("this user name can be registered! ")> 0) return true;
Return data;
},
Buttons: $ ("# button "),
Error: function (jqxhr, textstatus, errorthrown) {alert ("the server has not returned data. The server may be busy. Please try again" + errorthrown );},
Onerror: "This user name is unavailable. Please change the user name ",
Onwait: "the validity of the user name is being verified. Please wait ..."
})

 

 

Regexvalidator (provides a scalable Regular Expression Library)

Regexvalidator Overview

Validate multiple input formats using regular expressions

Supported control types
Text (text box), file (File selector), password (Password box), textarea (multi-line edit box)

Option Regexp Object

Attribute name: regular expression or expression array. There are two types of parameters:
1. Memory type. Regular Expression or enumeration type
2. character array type. Indicates the regular expression or an array of Enumeration type.
The explicit constructor new Regexp ("pattern" [, "Flags"]) is used. Because '\' in Javascript is used as an escape character, therefore, when using the display constructor to construct an instance object, use '\' instead '\'

Param String

(Default: "I") property name: additional parameter. Values can be of the following types:
G: indicates that global matching can be performed.
I: It indicates case-insensitive matching.
M: indicates that multiple rows can be matched.
Can be any combination, of course, without Parameters

Comparetype String Ver4.0.1 added

(Default: "|") property name: comparison type. Values can be of the following types:
|: Or relationship
&: Parallel Relationship
When Regexp is an array, the current parameter indicates the relationship between the regular expressions in the array.

Datatype String

(Default: "string") attribute name: data type. Values can be of the following types:
String: Self-written expression
Enum: enumeration name.
Generally, the enumeration name is set in formvalidatorreg. js. This script already contains several common Regular Expressions by default. You can modify and add the enumerated project name and expression in formvalidatorregex. js by yourself.

Onerror String

(Default: "input error") attribute name: Error prompt. Prompt when an error occurs. Blank is not displayed.

Example description:

Verify the validity of the entered mobile phone number

Jquery code:

$ ("# Shouji"). formvalidator ({...})
. Inputvalidator ({
Min: 11,
MAX: 11,
Onerror: "the mobile phone number must be 11 characters long. Please confirm "})
. Regexvalidator ({
Regexp: "mobile ",
Datatype: "Enum", // if it is "string", Regexp must be a regular expression
Onerror: "the mobile phone number you entered is incorrectly formatted"
});
 

Description:

The input box can be a mobile phone number or phone number.

Jquery code:

$ ("# Sjdh"). formvalidator ({empty: True, onfocus: "Format: 0577-88888888 or 11-digit mobile phone number "...})
. Regexvalidator ({
Regexp: ["tel", "mobile"],
Datatype: "Enum ",
Onerror: "The phone or phone format you entered is incorrect"
});
 

 

Functionvalidator (external functions can be used for verification and process processing)

Functionvalidator Overview

Use external functions for verification

Notes
The plug-in will pass two parameters for external functions:
1. Current Value
2. Current Control object.
Your external function must have at least one parameter to receive the current value.

Supported control types
Text (text box), Radio (single choice), checkbox (check box), file (File selector), password (Password box), textarea (multi-line edit box), select (select box)

Option Fun Function

Attribute name: external function name. An external function is called for verification. Two parameters are provided:
Parameter 1: element value,
Parameter 2: Element Object.

Return value, which has the following types:
True: Verification Successful
False: Verification Failed.
String: Verification Failed. The returned value is displayed on the prompt layer as a custom error message.
None: Only one processing process.

Onerror String

(Default: "input error") attribute name: Error prompt. Prompt when an error occurs. If it is null, It is not displayed. This error message is displayed when the fun function returns false.

Example description:

Call an external function to verify the entered ID card.

Jquery code:

 
Iscardid is an external function.
$ ("# Sfzh "). formvalidator ({onshow: "enter a 15-or 18-digit ID card", onfocus: "enter a 15-or 18-digit ID card", oncorrect: "enter correct "})
. Functionvalidator ({fun: iscardid });
 

Description:

Directly write an anonymous function to determine whether the user name contains a keyword

Jquery code:

 
$ ("# Us"). formvalidator ({onshow: "The user name must contain at least five characters and a maximum of 10 characters "...})
. Inputvalidator ({min: 5, Max: 10, onerror: "The user name you entered is invalid. Please confirm "})
. Functionvalidator ({fun: function (VAL ){
If (val = "admin") {return "this user name contains reserved keywords "}
}});
 

 

Passwordvalidator (password Strength Verification)

 

Passwordvalidator Overview

Verify the password strength

Notes
1. You cannot call this function if the password Strength Verification is not set for your skin.
2. You can modify the password strength verification rules in the skin file.

Supported control types
Password (Password box)

Option Compareid String

(Default: "") property name: Compare Control ID. The Control ID you want to compare. For example, if the password cannot be the same as the user name, this parameter is the ID of the user name. An error message is displayed, indicating that the onerrorcomparesame parameter is used.

Onerrorcomparesame String

(Default: "The password is not allowed when the user name is the same") error message with the property name: the value is the same. This parameter indicates an error message if the password is the same as that of the compareid control. This parameter takes effect only when compareid is not null. If you want to remove this validation rule, set this parameter to null.

Onerrorcontinuechar String

(Default: "password characters are consecutive characters are not allowed") attribute name: continuous character error prompt. Continuous characters cannot be used as passwords by default. For example, "123456" is an invalid password. If you want to remove this validation rule, set this parameter to null.

Onerrorsamechar String

(Default: "password characters are the same and are not allowed") attribute name: error message with the same character. By default, the same character cannot be used as a password. For example, "111111" is an invalid password. If you want to remove this validation rule, set this parameter to null.

Example description:

Password strength verification. Do not allow continuous characters, do not allow the same characters, do not allow the same user name, the corresponding error prompt uses the default value

Jquery code:

$ ("# Password1"). formvalidator ({
Pwdtipid: "password1pwdtip", // The default value can be left blank
Onshow: "enter the password ",
Onfocus: "at least 1 length ",
Oncorrect: "valid Password "})
. Inputvalidator ({min: 6, Max: 16, onerror: "Incorrect password length. Please confirm "})
. Passwordvalidator ({
Continuechar: false,
Samechar: false,
Compareid: "us"
 

 

Four tip modes:

 

Fixed tip)

Autotip)

Singletip)

Prompt content (alerttip)