Js form verification function currently popular error messages

Source: Internet
Author: User

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>

:

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.