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

Source: Internet
Author: User
Tags first string
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:

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.