Some time ago, I wrote a js data verification, js email verification, js url verification, js length verification, js digital verification and other pop-up dialog boxes. However, that kind of unfriendly method is not very popular now, so I rewrote one, It is better encapsulated and more friendly layer form is shared with everyone. If you have any bugs in using it, please leave me a message to improve it. Thank you.
js code
/**
* Data validation framework. When an error occurs in the id field check, a < span> element is added directly after the corresponding response to display the error message.
*
* @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
/**
* Get the Chinese and English character length (Chinese is 2 characters)
*
* @param {}
* str
* @return The character length
*/
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: The id element that needs to display the error message
* str: Display the error message
*/
this.appendError = function(id, str) {
this.remove(id idExt);// If the span element exists, delete this element first
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
}
/**
* @description Filter all space characters.
* @param str: The original string that needs to remove spaces
* @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 and the spaces at the end of the string. Change multiple connected spaces in the middle of 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) {
// Change multiple connected 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 string, specify the filter content. If the content is empty, the default filter is '~!@#$%^&*()- ."
*
* @param {Object}
* str
* @param {Object}
* filterStr
*
* @return contains filter content, returns True, otherwise returns false;
*/
this.filterStr = function(str, filterString) {
filterString = filterString == "" ? "'~!@#$%^&*()- ."" : filterString
var ch;
var i;
var temp;
var error = false;// When illegal characters are included, return True
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 if it is a URL
*
* @param {}
* str_url
* @return {Boolean} true: It is a URL, false: is not */
this.isURL = function(str_url) {// Verification 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 form - 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 = "Link does not conform to the format;" ;
this.appendError(id, str);
return false;
} else {
this.remove(id idExt);
return true;
}
}
/**
* Check if it is an email
*
* @param {}
* str
* @return {Boolean} true: email, false: is notEmail;
*/
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 = "Email does not meet the format;";
this.appendError(id, str);
return false;
} else {
this.remove(id idExt);
return true;
}
}
/**
* Check if it is a number
*
* @param {}
* str
* @return {Boolean} true: number, false: is not 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 given range, if it is empty, no check is performed
*
* @param {}
* str_num
* @param {}
* small The value that should be greater than or equal to (when this value is empty, only check that it cannot be greater than the maximum value)
* @param {}
* big The value that should be less than or equal to (when this value is empty, only The check cannot be less than the minimum value)
*
* @return {Boolean} Less than the minimum value or greater than the maximum valueNumber returns false, otherwise returns true;
*/
this.isRangeNum = function(str_num, small, big) {
if (!this.isNum(str_num )) // Check if it is a number
return false
if (small == "" && big == "")
throw str_num "No maximum or minimum number is 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)
* is a string composed of a-z0-9_
*
* @param {}
* str Checked string
* @param {}
* idStr Cursor positioned field ID can only receive ID
* @return {Boolean} No "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 = "It is a string consisting of a-z0-9_ (not case sensitive);";
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 character String
* @return {Boolean} If the strings are not equal, return false, otherwise return 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 input contents must be the same;";
this.appendError(id, str);
return false;
} else {
this.remove(id idExt);
return true;
}
}
/**
* Check whether the string is within the given length range (Chinese characters are calculated as 2 bytes). If the character is empty, no check is performed
*
* @param {}
* str Checked characters
* @param {}
* lessLen The length that should be greater than or equal to
* @param {}
* moreLen The length that should be less than or equal to
*
* @return {Boolean} Less than the minimum length or greater than the maximum lengthNumber 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 "No maximum and minimum lengths 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 smaller than the given length range (Chinese characters are calculated as 2 bytes)
*
* @param {}
* str string
* @param {}
* lessLen less than or equal to the length
*
* @return {Boolean} less than the given length 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 is 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 larger than the given length range (Chinese characters are calculated as 2 bytes)
*
* @param {}
* str string
* @param {}
* moreLen less than or equal to the length
*
* @return {Boolean} greater than the given length 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 that the character is not empty
*
* @param {}
* str
* @return {Boolean}Character is emptyReturn 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 Empty;";
val.select();
this.appendError(id, str);
return false;
} else {
this.remove(id idExt);
return true;
}
}
}
Test page
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
