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
Copy codeThe 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: the URL; false: <B> not </B> the URL;
*/
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: <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 returned;
*/
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>

: