JS form validation function is currently more popular error tips _javascript tips

Some time ago wrote a JS data validation, JS email verification, JS URL validation, JS length verification, JS digital verification, such as pop-up dialog box form but, now not very popular kind of very unfriendly way, so rewrite a, encapsulated a better, more friendly layer form
Share to everyone, if you use a bug, please give me a complete message, thank you.
Save As Test.js

Copy Code code as follows:

/**
* Data validation Framework. Adds a < span> element to display the error message directly after the ID field check error.
*
* @author Wangzi6hao
* @version 2.1
* @description 2009-05-16
*/
var checkdata = new function () {
var idext= "_wangzi6hao_span";//generate the ID suffix of the Span layer
/**
* To get Chinese and English characters (2 character)
*
* @param {}
* STR
* @return Characters
*/
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);
}

/**
* After the corresponding ID error message
*
* @param ID: ID element that needs to display an error message
* STR: Display error message
*/
This.appenderror = function (ID, str) {
This.remove (id + idext);//If span element exists, delete this element first
var spannew = document.createelement ("span");//Create span
Spannew.id = ID + idext;//Build 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)//To add span after adding elements
}

/**
* @description filter all whitespace characters.
* @param str: An original string that needs to be stripped of space
* @return return a string that has been stripped of space
*/
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 first part of the string space \ String end of the space \ text in the middle of multiple contiguous spaces into a 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 for spaces in end of string
RetValue = retvalue.substring (0, retvalue.length-1);
ch = retvalue.substring (retvalue.length-1, retvalue.length);
}
while (Retvalue.indexof ("")!=-1) {
Make multiple contiguous spaces in the middle of text into a single space
RetValue = retvalue.substring (0, Retvalue.indexof (""))
+ retvalue.substring (Retvalue.indexof ("") + 1,
Retvalue.length);
}
return retvalue;
}

/**
* Filter the string, specify the filter content, and if the content is empty, the default filter ' ~!@#$%^&* ()-+.
*
* @param {Object}
* STR
* @param {Object}
* FILTERSTR
*
* @return contains filtered content, returns True, otherwise returns false;
*/
THIS.FILTERSTR = function (str, filterstring) {
filterstring = Filterstring = = ""? " ~!@#$%^&* ()-+.\ "": filterstring
var ch;
var i;
var temp;
var error = false;//Returns True when illegal characters are included
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 = = ""? " ~!@#$%^&* ()-+.\ "": filterstring
var val = document.getElementById (ID);
if (This.filterstr (Val.value, filterstring)) {
Val.select ();
var str = "cannot contain illegal characters" + filterstring;
This.appenderror (ID, str);
return false;
} else {
This.remove (id + idext);
return true;
}
}

/**
* Check whether the URL
*
* @param {}
* Str_url
* @return {Boolean} true: URL,false:<b> is not a </b> URL;
*/
This.isurl = function (Str_url) {//Validate URL
var Strregex = "^ (HTTPS|HTTP|FTP|RTSP|MMS)?:/ /)"
+ "? ([0-9a-z_!~* ' (). &=+$%-]+:)? [0-9a-z_!~* ' (). &=+$%-]+@)? " user@ of FTP
+ "([0-9]{1,3}\.) {3} [0-9] {1,3} "//IP form of URL-199.194.52.184
+ "|"//Allow IP and domain (domains)
+ "([0-9a-z_!~* ' ()-]+\.) * "//Domain name-www."
+ "([0-9a-z][0-9a-z-]{0,61})?" [0-9a-z]\.] Level two domain name
+ "[a-z]{2,6}]"///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 = "link does not conform to format;";
This.appenderror (ID, str);
return false;
} else {
This.remove (id + idext);
return true;
}
}

/**
* Check to see if email
*
* @param {}
* STR
* @return {Boolean} true: E-mail,false:<b> is not </b> e-mail;
*/
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 = "Mail does not conform to 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: Digital,false:<b> is not a </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 a given range, empty, do not check <br>
*
* @param {}
* Str_num
* @param {}
* Small should be greater than or equal to the number (when this value is empty, only check cannot be greater than the maximum value)
* @param {}
* Big should be less than or equal to the value (when this value is empty, only check can not be less than the minimum value)
*
* @return {Boolean} <b> is less than the minimum value or greater than the maximum value </b> number returns false or returns true;
*/
This.israngenum = function (str_num, small, big) {
if (!this.isnum (str_num))//Check for numbers
return False

if (small = "" && big = = "")
Throw Str_num + "does not define the maximum, minimum value number!" ";

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 for qualified strings (case-insensitive) <br>
* is a string composed of a-z0-9_
*
* @param {}
* STR Check the string
* @param {}
* IDSTR cursor positioned field id<b> can only receive id</b>
* @return {Boolean} <b> not </b> "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 composed of a-z0-9_ (case-insensitive);";
This.appenderror (ID, str);
return false;
} else {
This.remove (id + idext);
return true;
}
}

/**
* Check whether two strings are equal
*
* @param {}
* STR1 First string
* @param {}
* STR2 Second string
* @return {Boolean} string is not equal returns FALSE, 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 = "Two inputs must be the same;";
This.appenderror (ID, str);
return false;
} else {
This.remove (id + idext);
return true;
}
}

/**
* Check whether the string is within a given length (Chinese characters are calculated in 2 bytes), the characters are blank, do not check <br>
*
* @param {}
* STR Check the characters
* @param {}
* Lesslen should be greater than or equal to the length
* @param {}
* Morelen should be less than or equal to the length
*
* @return {Boolean} <b> less than minimum length or greater than maximum length </b> number 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 "does not define the maximum minimum length!";
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 less than the given length range (Chinese characters are calculated in 2 bytes) <br>
*
* @param {}
* STR string
* @param {}
* Lesslen is less than or equal to length
*
* @return {Boolean} <b> less than the given length </b> number 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 string is greater than the given length range (Chinese characters are calculated in 2 bytes) <br>
*
* @param {}
* STR string
* @param {}
* Morelen is less than or equal to length
*
* @return {Boolean} <b> greater than the given length </b> number 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 = "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 the character is not empty
*
* @param {}
* STR
* @return {Boolean} <b> character is null </b> 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 = "not allowed to null;";
Val.select ();
This.appenderror (ID, str);
return false;
} else {
This.remove (id + idext);
return true;
}
}
}

The following is a specific test page:

Copy Code code as follows:

<title> Page Title </title>
<script type= "Text/javascript" src= "Test.js" ></script>

<script type= "Text/javascript" >
function Checkform () {
var ispass = true;
Filter string
if (!) ( Checkdata.isemptyspan ("Filterstr") && checkdata.filterstrspan (' filterstr ', ' #$%$ ')) {
Ispass = false;
}

Check URL
if (!) ( Checkdata.isemptyspan ("Isurl") && checkdata.isurlspan (' Isurl '))
Ispass = false;

Email
if (!) ( Checkdata.isemptyspan ("Isemail") && checkdata.isemailspan (' Isemail '))
Ispass = false;

Digital
if (!) ( Checkdata.isnumspan (' Isnum '))
Ispass = false;

Number Size
if (!) ( Checkdata.isemptyspan ("Israngenum") && checkdata.isnumspan (' Israngenum ') && Checkdata.israngenumspan (' Israngenum ', 10,100))
Ispass = false;

Passwords (numbers, letters, underscores)
if (!) ( Checkdata.islicitspan (' islicit '))
Ispass = false;

Two fields are equal
if (!) ( Checkdata.isemptyspan ("Isequals") && checkdata.isequalsspan (' isequals ', ' isEquals1 '))
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;

Is null control
if (!) ( Checkdata.isemptyspan ("IsEmpty"))
Ispass = false;
return ispass;
}
</script>
<body>
<form action= "index.jsp" method= "POST" onsubmit= "return Checkform ();" >
<table>
<tbody>
<tr>
<td> character filter: <input type= "text" id= "Filterstr" name= "Filterstr" ></td>
<td> Links: <input type= "text" id= "Isurl" name= "Isurl" ></td>
</tr>
<tr>
<td> Mail: <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> judgment Equality: <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 greater than 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> is null: <input type= "text" id= "IsEmpty" name= "IsEmpty" ></td>
</tr>
<tr>
<td><input type= "Submit" name= "Submission" value= "Submitting data" ></td>
</tr>
</tbody>
</table>

</form>
</body>

Effect Chart: