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 ...
