JS form verification function currently popular error messages

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 overwrote a layer that is better encapsulated and more friendly.
Share it with you. If you have any bugs, please leave me a complete message. Thank you.
Save as test. js CopyCode 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 after the corresponding id
* @ Param ID: id element for displaying error information
* STR: displaying error information
*/
This. appenderror = function (ID, STR) {
This. remove (ID + idext); // If the span element exists, delete the element
var spannew = document. createelement ("span"); // create span
spannew. id = ID + idext; // generate 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 to the end of 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 adjacent spaces in the text into one space.
*
* @ Param {object}
* inputstring
*/
This. trim = function (inputstring) {
If (typeof inputstring! = "String") {
return inputstring;
}< br> 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);
}< br> 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);
}< br> while (retvalue. indexof ("")! =-1) {
// convert multiple adjacent spaces in the text into one space
retvalue = retvalue. substring (0, retvalue. indexof ("")
+ retvalue. substring (retvalue. indexof ("") + 1,
retvalue. length);
}< br> return retvalue;
}

/**
* filter string, specifying the content to be filtered. if the content is empty '~! @ # $ % ^ & * ()-+. "
* @ 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; // when an invalid character is contained, returns true
for (I = 0; I <= (filterstring. length-1); I ++) {
CH = filterstring. charat (I);
temp = Str. indexof (CH);
If (temp! =-1) {
error = true;
break;
}< BR >}< br> 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;
}< BR >}

/**
* check whether the URL is used
* @ Param {}< br> * str_url
* @ return {Boolean} true: yes, false: not ;
*/
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 and domain (domain name)
+ "([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: <B> not </B> email;
*/
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: <B> not </B> number;
*/
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. <br>
*
* @ 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} <B> the value is less than the minimum value or greater than the maximum value </B>. False is returned. Otherwise, true is returned;
*/
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) <br>
* Is a string consisting of a-z0-9 _
*
* @ Param {}
* STR check string
* @ Param {}
* Idstr the ID of the field positioned by the cursor <B> only the ID can be received </B>
* @ Return {Boolean} <B> not </B> "a-z0-9 _" returns false; otherwise, true is returned;
*/
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. <br>
*
* @ 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} <B> A number smaller than or greater than the minimum length </B> returns 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) <br>
*
* @ Param {}
* STR string
* @ Param {}
* Lesslen is less than or equal to the length
*
* @ Return {Boolean} <B> A number smaller than the given length </B> returns 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 length of the string is greater than the specified length range (Chinese characters are counted in 2 bytes) <br>
*
* @ Param {}
* STR string
* @ Param {}
* The morelen is less than or equal to the length.
*
* @ Return {Boolean} <B> A number greater than the given length </B> returns 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} <B> the character is null </B>. True is returned; otherwise, false is 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;
}
}
}

The following is a specific test page:Copy codeThe Code is as follows: <HTML>
<Head>
<Title> webpage title </title>
<SCRIPT type = "text/JavaScript" src = "test. js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">
Function checkform (){
VaR ispass = true;
// Filter strings
If (! (Checkdata. isemptyspan ("filterstr") & checkdata. filterstrspan ('filterstr ',' #% % $ '))){
Ispass = false;
}

// Check the URL
If (! (Checkdata. isemptyspan ("isurl") & checkdata. isurlspan ('isurl ')))
Ispass = false;

// Email
If (! (Checkdata. isemptyspan ("isemail") & checkdata. isemailspan ('ismail ')))
Ispass = false;

// Number
If (! (Checkdata. isnumspan ('isnum ')))
Ispass = false;

// Numeric size
If (! (Checkdata. isemptyspan ("israngenum") & checkdata. isnumspan ('israngenum') & checkdata. israngenumspan ('israngenum', 10,100 )))
Ispass = false;

// Password (numbers, letters, and underscores)
If (! (Checkdata. islicitspan ('islicit ')))
Ispass = false;

// Whether the two fields are equal
If (! (Checkdata. isemptyspan ("isequals") & checkdata. isequsspan ('iseques', 'isequs ')))
Ispass = false;

// Character Length Control
If (! (Checkdata. israngespan ('isrange', 5, 10 )))
Ispass = false;

// Character shortest Control
If (! (Checkdata. islessspan ('isless', 10 )))
Ispass = false;

// Maximum Character Control
If (! (Checkdata. isemptyspan ("ismore") & checkdata. ismorespan ('ismore', 30 )))
Ispass = false;

// Empty control
If (! (Checkdata. isemptyspan ("isempty ")))
Ispass = false;
Return ispass;
}
</SCRIPT>
</Head>
<Body>
<Form action = "index. jsp" method = "Post" onsubmit = "Return checkform ();">
<Table>
<Tbody>
<Tr>
<TD> character filtering: <input type = "text" id = "filterstr" name = "filterstr"> </TD>
<TD> link: <input type = "text" id = "isurl" name = "isurl"> </TD>
</Tr>
<Tr>
<TD> Email: <input type = "text" id = "isemail" name = "isemail"> </TD>
<TD> Number: <input type = "text" id = "isnum" name = "isnum"> </TD>
</Tr>
<Tr>
<TD> number range: <input type = "text" id = "israngenum" name = "israngenum"> </TD>
<TD> a-zA-Z0-9 _ <input type = "text" id = "islicit" name = "islicit"> </TD>
</Tr>
<Tr>
<TD> equal judgment: <input type = "text" id = "isequals" name = "isequals"> </TD>
<TD> <input type = "text" id = "isequals1" name = "isequals1"> </TD>
</Tr>
<Tr>
<TD> Length Control: <input type = "text" id = "isrange" name = "isrange"> </TD>
<TD> length exceeds control: <input type = "text" id = "isless" name = "isless"> </TD>
</Tr>
<Tr>
<TD> length less than control: <input type = "text" id = "ismore" name = "ismore"> </TD>
<TD> empty: <input type = "text" id = "isempty" name = "isempty"> </TD>
</Tr>
<Tr>
<TD> <input type = "Submit" name = "Submit" value = "submit data"> </TD>
</Tr>
</Tbody>
</Table>

</Form>
</Body>
</Html>

: