Javascript data verification set, jsemail verification, jsurl verification, js length verification, js digital verification, and other simple encapsulation-form special effects

The js data verification set is encapsulated and recommended for use. The sample code is provided. Some time ago I wrote a pop-up dialog box for js data verification, js email verification, js url verification, js length verification, and js digital verification. However, the unfriendly method is not very popular, so I wrote a new one, which is encapsulated better and shared with you in a more friendly form. If you have any bugs, please leave me a complete message. Thank you.

Js Code

The Code is as follows:

/**
* Data Verification Framework. When an error occurs in the id field check, add a <span> element next to it to display the error message.
*
* @ Author wangzi6hao
* @ Version 2.1
* @ Description 2009-05-16
*/
Var checkData = new function (){
Var idExt = "_ wangzi6hao_Span"; // generates the id Suffix of the span layer.
/**
* The length of Chinese and English characters is 2 characters)
*
* @ Param {}
* Str
* @ Return long character
*/
This. length = function (str ){
Var p1 = new RegExp ('% u ..', 'G ')
Var p2 = new RegExp ('%.', 'G ')
Return escape (str). replace (p1, ''). replace (p2,''). length
}
/**
* Delete the corresponding id element.
*/
This. remove = function (id ){
Var idObject = document. getElementById (id );
If (idObject! = Null)
IdObject. parentNode. removeChild (idObject );
}
/**
* Error message following the corresponding id
*
* @ Param id: id element of the error message to be displayed
* Str: displays the error message.
*/
This. appendError = function (id, str ){
This. remove (id + idExt); // If the span element exists, delete it first.
Var spanNew = document. createElement ("span"); // create a span
SpanNew. id = id + idExt; // generate the spanid
SpanNew. style. color = "red ";
SpanNew. appendChild (document. createTextNode (str); // add content to span
Var inputId = document. getElementById (id );
InputId. parentNode. insertBefore (spanNew, inputId. nextSibling); // Add span after the element to be added
}
/**
* @ Description: filter all space characters.
* @ Param str: the original space string to be removed
* @ Return returns the string with spaces removed.
*/
This. trimSpace = function (str ){
Str + = "";
While (str. charAt (0) = '') | (str. charAt (0) = '??? ')
| (Escape (str. charAt (0) = '% u3000 '))
Str = str. substring (1, str. length );
While (str. charAt (str. length-1) = '')
| (Str. charAt (str. length-1) = '??? ')
| (Escape (str. charAt (str. length-1) = '% u3000 '))
Str = str. substring (0, str. length-1 );
Return str;
}
/**
* Filter the spaces at the beginning of the string, the spaces at the end of the string, and convert multiple connected spaces in the text into one space.
*
* @ Param {Object}
* InputString
*/
This. trim = function (inputString ){
If (typeof inputString! = "String "){
Return inputString;
}
Var retValue = inputString;
Var ch = retValue. substring (0, 1 );
While (ch = ""){
// Check the space at the beginning of the string
RetValue = retValue. substring (1, retValue. length );
Ch = retValue. substring (0, 1 );
}
Ch = retValue. substring (retValue. length-1, retValue. length );
While (ch = ""){
// Check the space at the end of the string
RetValue = retValue. substring (0, retValue. length-1 );
Ch = retValue. substring (retValue. length-1, retValue. length );
}
While (retValue. indexOf ("")! =-1 ){
// Convert multiple spaces in the middle of the text into one space
RetValue = retValue. substring (0, retValue. indexOf (""))
+ RetValue. substring (retValue. indexOf ("") + 1,
RetValue. length );
}
Return retValue;
}
/**
* Filter the string to specify the content to be filtered. if the content is empty, the default value is '~! @ # $ % ^ & * ()-+ ."
*
* @ Param {Object}
* Str
* @ Param {Object}
* FilterStr
*
* @ Return: contains the filtered content. True is returned; otherwise, false is returned;
*/
This. filterStr = function (str, filterString ){
FilterString = ""? "'~! @ # $ % ^ & * ()-+. \ "": FilterString
Var ch;
Var I;
Var temp;
Var error = false; // returns True if it contains invalid characters.
For (I = 0; I <= (filterString. length-1); I ++ ){
Ch = filterString. charAt (I );
Temp = str. indexOf (ch );
If (temp! =-1 ){
Error = true;
Break;
}
}
Return error;
}
This. filterStrSpan = function (id, filterString ){
FilterString = ""? "'~! @ # $ % ^ & * ()-+. \ "": FilterString
Var val = document. getElementById (id );
If (this. filterStr (val. value, filterString )){
Val. select ();
Var str = "cannot contain invalid characters" + filterString;
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether the URL is used
*
* @ Param {}
* Str_url
* @ Return {Boolean} true: URL, false:NoURL;
*/
This. isURL = function (str_url) {// verify the url
Var strRegex = "^ (https | http | ftp | rtsp | mms )? ://)"
+ "? ([0-9a-z _!~ * '(). & =+ $ %-] + :)? [0-9a-z _!~ * '(). & =+ $ %-] + @)? "// Ftp user @
+ "([0-9] {1, 3} \.) {3} [0-9] {1, 3}" // URL in IP Format-199.194.52.184
+ "|" // Allow IP addresses and DOMAIN names)
+ "([0-9a-z _!~ * '()-] + \.) * "// Domain name-www.
+ "([0-9a-z] [0-9a-z-] {0, 61 })? [0-9a-z] \. "// second-level domain name
+ "[A-z] {2, 6})" // first level domain-. com or. museum
+ "(: [0-9] {1, 4 })? "// Port-: 80
+ "((/?) | "// A slash isn' t required if there is no file name
+ "(/[0-9a-z _!~ *'().;? : @ & =+ $, % #-] +) + /?) $ ";
Var re = new RegExp (strRegex );
Return re. test (str_url );
}
This. isURLSpan = function (id ){
Var val = document. getElementById (id );
If (! This. isURL (val. value )){
Val. select ();
Var str = "the link does not conform to the format ;";
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether the email is used
*
* @ Param {}
* Str
* @ Return {Boolean} true: email, false:NoEmail;
*/
This. isEmail = function (str ){
Var re =/^ ([a-zA-Z0-9] + [_ | \-| \.]?) * [A-zA-Z0-9] + @ ([a-zA-Z0-9] + [_ | \-| \.]?) * [A-zA-Z0-9] + \. [a-zA-Z] {2, 3} $ /;
Return re. test (str );
}
This. isEmailSpan = function (id ){
Var val = document. getElementById (id );
If (! This. isEmail (val. value )){
Val. select ();
Var str = "the email does not conform to the format ;";
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether it is a number.
*
* @ Param {}
* Str
* @ Return {Boolean} true: Number, false:NoNumber;
*/
This. isNum = function (str ){
Var re =/^ [\ d] + $/
Return re. test (str );
}
This. isNumSpan = function (id ){
Var val = document. getElementById (id );
If (! This. isNum (val. value )){
Val. select ();
Var str = "must be a number ;";
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether the value is within the specified range. If it is null, no check is performed.

*
* @ Param {}
* Str_num
* @ Param {}
* Small should be greater than or equal to the value (if this value is null, only check that it cannot be greater than the maximum value)
* @ Param {}
* Big should be less than or equal to the value (if this value is null, only check that it cannot be less than the minimum value)
*
* @ Return {Boolean}Less than or greater than the maximum valueReturns false otherwise, returns true;
*/
This. isRangeNum = function (str_num, small, big ){
If (! This. isNum (str_num) // check whether it is a number
Return false
If (small = "" & big = "")
Throw str_num + "the maximum and minimum values are not defined! ";
If (small! = ""){
If (str_num <small)
Return false;
}
If (big! = ""){
If (str_num> big)
Return false;
}
Return true;
}
This. isRangeNumSpan = function (id, small, big ){
Var val = document. getElementById (id );
If (! This. isRangeNum (val. value, small, big )){
Val. select ();
Var str = "";
If (small! = ""){
Str = "should be greater than or equal to" + small;
}
If (big! = ""){
Str + = "should be less than or equal to" + big;
}
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether it is a qualified string (Case Insensitive)

* Is a string consisting of a-z0-9 _
*
* @ Param {}
* Str check string
* @ Param {}
* ID of the idStr cursor position FieldOnly IDS can be received
* @ Return {Boolean}No"A-z0-9 _" composition returns false, Otherwise returns true;
*/
This. isLicit = function (str ){
Var re =/^ [_ 0-9a-zA-Z] * $/
Return re. test (str );
}
This. isLicitSpan = function (id ){
Var val = document. getElementById (id );
If (! This. isLicit (val. value )){
Val. select ();
Var str = "is a string consisting of a-z0-9 _ (case-insensitive );";
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether the two strings are equal
*
* @ Param {}
* Str1 first string
* @ Param {}
* Str2 second string
* @ Return {Boolean} returns false if the string is not equal; otherwise, returns true;
*/
This. isEquals = function (str1, str2 ){
Return str1 = str2;
}
This. isEqualsSpan = function (id, id1 ){
Var val = document. getElementById (id );
Var val1 = document. getElementById (id1 );
If (! This. isEquals (val. value, val1.value )){
Val. select ();
Var str = "the content of the second input must be the same ;";
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether the string is within the specified length range (Chinese characters are counted in 2 bytes). If the character is null, no check is performed.

*
* @ Param {}
* Str check characters
* @ Param {}
* The lessLen length must be greater than or equal
* @ Param {}
* The moreLen length must be less than or equal
*
* @ Return {Boolean}Smaller than or greater than the maximum lengthReturns false;
*/
This. isRange = function (str, lessLen, moreLen ){
Var strLen = this. length (str );
If (lessLen! = ""){
If (strLen <lessLen)
Return false;
}
If (moreLen! = ""){
If (strLen> moreLen)
Return false;
}
If (lessLen = "" & moreLen = "")
Throw "the maximum and minimum length is not defined! ";
Return true;
}
This. isRangeSpan = function (id, lessLen, moreLen ){
Var val = document. getElementById (id );
If (! This. isRange (val. value, lessLen, moreLen )){
Var str = "length ";
If (lessLen! = "")
Str + = "greater than or equal to" + lessLen + ";";
If (moreLen! = "")
Str + = "should be less than or equal to" + moreLen;
Val. select ();
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether the string is within the specified length range (Chinese characters are counted in 2 bytes)

*
* @ Param {}
* Str string
* @ Param {}
* LessLen is less than or equal to the length
*
* @ Return {Boolean}Less than the given lengthReturns false;
*/
This. isLess = function (str, lessLen ){
Return this. isRange (str, lessLen ,"");
}
This. isLessSpan = function (id, lessLen ){
Var val = document. getElementById (id );
If (! This. isLess (val. value, lessLen )){
Var str = "length greater than or equal to" + lessLen;
Val. select ();
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check whether the string is greater than the specified length range (Chinese characters are counted in 2 bytes)

*
* @ Param {}
* Str string
* @ Param {}
* The moreLen is less than or equal to the length.
*
* @ Return {Boolean}Longer than the given lengthReturns false;
*/
This. isMore = function (str, moreLen ){
Return this. isRange (str, "", moreLen );
}
This. isMoreSpan = function (id, moreLen ){
Var val = document. getElementById (id );
If (! This. isMore (val. value, moreLen )){
Var str = "the length should be less than or equal to" + moreLen;
Val. select ();
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
/**
* Check characters are not empty
*
* @ Param {}
* Str
* @ Return {Boolean}The character is null.Returns true; otherwise, false;
*/
This. isEmpty = function (str ){
Return str = "";
}
This. isEmptySpan = function (id ){
Var val = document. getElementById (id );
If (this. isEmpty (val. value )){
Var str = "cannot be blank ;";
Val. select ();
This. appendError (id, str );
Return false;
} Else {
This. remove (id + idExt );
Return true;
}
}
}

Test page

The Code is as follows:

Webpage title