JQuery Form Validation Extension Code (i) _jquery

Source: Internet
Author: User
Tags extend jquery form validation
Again, the plug-in problem is more, the latter to solve, please do not be vicious. I hope you will put forward good suggestions and good words.
I. Analyzing the basics of form validation
In our web development process, we will encounter a variety of validation. Summed up the basic can be divided into several categories:
(1). required fields [This is very basic]
(2). Range validation in input parameters
(3). Comparison of input parameters with another control value
(4). parameter regular expression validation of input
two. Whether must fill in the verification
There are several situations:
(1) Input box to get focus prompt
(2) Input box loses focus validation error prompt
(3) Input box loses focus verify correct prompt
First, determine if the input box is required, and then the actual location of the prompt message.
Based on the above several conditions to determine the following parameters:
Required: is required, true and false, True is required (*)
onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the first letter cannot have @)
OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)
Onsucces: Validates a successful text hint (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
TIPID: Control ID (*) used to display the hint information
Combination example: {required:true,onfocus: "Required", OnBlur: "@error", Onsucces: "Success", Tipid: "Tipid"}
Note: Some of the rules defined above may not be implemented and are gradually perfected in later stages.
Copy Code code as follows:

/**
* Check whether the input box is required
* Input Parameters:
* Required: Is required, true and false, true is indicated as required (*)
* onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)
* Onsucces: Validation of successful text hints (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* Tipid: The control ID (*) used to display the hint information
* Combination Example: {required:true,onfocus: "Required", OnBlur: "@error", Onsucces: "Success", Tipid: "Tipid"}
*/
$.fn.extend ({
Checkrequired:function (Inputarg) {
if (inputarg.required) {
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
Bind gets Focus Event
$ (this). Bind (' Focus ', function () {
if (inputarg.onfocus!=undefined) {
$ ("#" + inputarg.tipid). HTML (inputarg.onfocus);
}
});
Bind loses Focus Event
$ (this). Bind ("Blur", function () {
if ($ (this). Val ()!=undefined && $ (this). Val ()!= "") {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}else{
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
});
}
}
}
});

Working with effects and test code:

When you get the focus, you'll notice the effect

When you lose focus, you do not enter a hint effect

Prompt for success after entering text information

The test code is as follows:

Copy Code code as follows:

<script language= "JavaScript" src= "Jquery-1.3.2.min.js" type= "Text/javascript" ></script>
<script language= "JavaScript" src= "Jquery-extend-1.0.0.js" type= "Text/javascript" ></script>
<script language= "JavaScript" type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#txtName"). Checkrequired ({
Required:true,
Onfocus: "This is required",
OnBlur: "Must fill in ah",
Onsucces: "Congratulations, you typed it,"
Tipid: "Txtnametip"
});
});
</script>

three. Range validation in input parameters

This is slightly more complicated than the above validation, because there is a range of input values. The checksum makes the following distinction: the input data type is a string, a number, a time

If it is a string, the length of the string is compared, and the size of the number and time is compared. (Time is not perfect at present)

Because it defines an interval range, it adds two more properties, lower and upper values.

Enter parameter list:

onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the first letter cannot have @)

Onempty: Enter an empty text hint (if the specified style is in front of the style name, so the text hints that the first letter cannot have @)

Onsucces: Validates a successful text hint (if the specified style is in front of the style name, so the text hints that the initials cannot have @)

OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)

DataType: Data type parameters (Text,number,date)

Min: The minimum value entered

Max: The maximum value entered

TIPID: Control ID (*) used to display the hint information
Copy Code code as follows:

/**
* Check the scope of the entry
* Input Parameters:
* onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* Onempty: Input is blank text hint (if the specified style is in front of the style name @, so the text prompts the first letter can not have @)
* Onsucces: Validation of successful text hints (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)
* DataType: Data type parameters (Text,number,date)
* min: The minimum value of the input
* Max: The maximum value entered
* Tipid: The control ID (*) used to display the hint information
*
*/
$.fn.extend ({
Checkrange:function (Inputarg) {
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
Get Focus Bindings
$ (this). Bind (' Focus ', function () {
if (inputarg.onfocus!=undefined) {
$ ("#" + inputarg.tipid). HTML (inputarg.onfocus);
}
});
Lose Focus Binding
$ (this). Bind ("Blur", function () {
if ($ (this). val () ==undefined | | $ (this). val () = "") {
$ ("#" + inputarg.tipid). HTML (inputarg.onempty);
}else{
Switch (inputarg.datatype) {
Case "Text":
if ($ (this). Val (). length>= parseint (inputarg.min) && $ (this). Val () .length< parseint (Inputarg.max)) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}else{
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
Case "Number":
if (!isnan (this). Val ()) {
if (parseint (). Val ()) >parseint (inputarg.min) && parseint ($ (this). Val ()) <parseint (Inputarg.max )){
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}else{
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
}
Break
Case "Date":
Break
}
}
});
}
}
});

Enter an item scope effect and test code

If the age agreement is a number

Input is not within the scope of the agreement

Validation successful

Copy Code code as follows:

$ ("#txtAge"). Checkrange ({
Onfocus: "Age is number",
Onempty: "Can not be empty ah",
Onsucces: "Verify successful",
OnBlur: "Validation failed, please enter carefully",
DataType: "Number",
Min: "10",
Max: "100",
Tipid: "Txtagetip"
});
<p>
<label> Age: </label><input type= "text" id= "txtage" value= ""/><span id= "Txtagetip" ></span >
</p>

Four. Comparison of input parameters with another control value

Compared to the validation above, the difference is to specify the ID of the comparison control

Here is the input parameter:

onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the first letter cannot have @)

Onempty: Enter an empty text hint (if the specified style is in front of the style name, so the text hints that the first letter cannot have @)

Onsucces: Validates a successful text hint (if the specified style is in front of the style name, so the text hints that the initials cannot have @)

OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)

DataType: Data type parameters (Text,number,date)

ComType: Type of comparison (=,>,>=,<,<=,!=)

TIPID: Control ID (*) used to display the hint information

Targetid: Target control ID for comparison

Copy Code code as follows:

/**
* Comparison of values between controls
* Input Parameters:
* onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* Onempty: Input is blank text hint (if the specified style is in front of the style name @, so the text prompts the first letter can not have @)
* Onsucces: Validation of successful text hints (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)
* DataType: Data type parameters (Text,number,date)
* ComType: Type of comparison (=,>,>=,<,<=,!=)
* Tipid: The control ID (*) used to display the hint information
* Targetid: Target control ID for comparison
*/
$.fn.extend ({
Checkcompare:function (Inputarg) {
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
Get Focus Bindings
$ (this). Bind (' Focus ', function () {
if (inputarg.onfocus!=undefined) {
$ ("#" + inputarg.tipid). HTML (inputarg.onfocus);
}
});
Lose Focus Binding
$ (this). Bind ("Blur", function () {
var targetvalue=$ ("#" +inputarg.targetid). Val ();
if (targetvalue!=undefined && targetvalue!=null) {
if ($ (this). Val ()!=undefined && $ (this). Val ()!= "") {
if (inputarg.datatype== "text") {
Switch (inputarg.comtype) {
Case "=":
if (targetvalue==$ (this). Val ()) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}else{
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
Case "!=":
if (targetvalue!=$ (this). Val ()) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}else{
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
}
}else if (inputarg.datatype== "number") {
if (isNaN (targetvalue) = = False && isNaN ($ (this). val ()) = = False) {
Switch (inputarg.comtype) {
Case "=":
if (Targetvalue = = $ (this). Val ()) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}
else {
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
Case "!=":
if (Targetvalue!= $ (this). Val ()) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}
else {
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
Case ">":
if ($ (this). val () > Targetvalue) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}
else {
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
Case ">=":
if ($ (this). Val () >= Targetvalue) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}
else {
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
Case "<":
if ($ (this). Val () < Targetvalue) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}
else {
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
Case "<=":
if ($ (this). Val () <= Targetvalue) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}
else {
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
Break
}
}else{
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
}else if (inputarg.datatype== "date") {
}
}else{
$ ("#" + inputarg.tipid). HTML (inputarg.onempty);
}
}
});
}
}
});

Comparison effects between control values and test code


Effect Figure 1


Effect Figure 2


Effect Figure 3

Copy Code code as follows:

$ ("#txtPass2"). Checkcompare ({
Onfocus: "And the previous comparison",
Onempty: "Input cannot be empty",
Onsucces: "Verify successful",
OnBlur: "Validation Failed",
DataType: "Number",
ComType: ">=",
Tipid: "Txtpass2tip",
Targetid: "TxtPass1"
});

<p>
<label> password 1:</label><textarea id= "TxtPass1" ></textarea><span id= "Txtpass1tip" ></ Span>
</p>
<p>
<label> password 2:</label><textarea id= "TxtPass2" ></textarea><span id= "Txtpass2tip" ></ Span>
</p>




Five. Input parameter regular expression validation

This validation is relatively straightforward, because using regular expressions doesn't require you to think about the input. You just need to introduce a regular expression.

Here is the input parameter:

onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the first letter cannot have @)

Onempty: Enter an empty text hint (if the specified style is in front of the style name, so the text hints that the first letter cannot have @)

Onsucces: Validates a successful text hint (if the specified style is in front of the style name, so the text hints that the initials cannot have @)

OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)

REGEXP: Regular Expressions

TIPID: Control ID (*) used to display the hint information

Validation of jquery Regular expressions
Copy Code code as follows:

/**
* Validation of regular expressions
* Input Parameters:
* onfocus: The text hint that gets the focus (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* Onempty: Input is blank text hint (if the specified style is in front of the style name @, so the text prompts the first letter can not have @)
* Onsucces: Validation of successful text hints (if the specified style is in front of the style name, so the text hints that the initials cannot have @)
* OnBlur: Text hint that loses focus (if the specified style is in front of the style name, so the text tip cannot have @) (validation failure prompt)
* REGEXP: Regular expressions
* Tipid: The control ID (*) used to display the hint information
*/

$.fn.extend ({
Checkregexp:function (Inputarg) {
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
Get Focus Bindings
$ (this). Bind (' Focus ', function () {
if (inputarg.onfocus!= undefined) {
$ ("#" + inputarg.tipid). HTML (inputarg.onfocus);
}
});

Get lost Focus Event
$ (this). Bind ("Blur", function () {
if ($ (this). Val ()!=undefined && $ (this). Val ()!= "") {
if ($ (this). Val (). Match (INPUTARG.REGEXP) = null) {
$ ("#" + inputarg.tipid). HTML (inputarg.onsucces);
}else{
$ ("#" + inputarg.tipid). HTML (Inputarg.onblur);
}
}else{
$ ("#" + inputarg.tipid). HTML (inputarg.onempty);
}
});
}
}
});

Regular expression effects and test code


Enter a non-numeric


Enter a number

Copy Code code as follows:

$ ("#txtAge"). Checkregexp ({
onfocus: "Age must be number",
Onempty: "Input cannot be empty",
Onsucces: "Verify successful",
OnBlur: "Validation Failed",
Regexp:/\d/,
Tipid: "Txtagetip"
});
<label> Age: </label><input type= "text" id= "txtage" value= ""/><span id= "Txtagetip" ></span >

This is the verification of a basic prototype of plug-ins, the late continuous with the new ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.