얼마 전 js 데이터 확인, js 이메일 확인, js url 확인, js 길이 확인, js 디지털 확인 등 팝업 대화 상자를 작성했지만 지금은 그런 불친절한 방법이 별로 인기가 없어 다시 작성했습니다. 하나, 더 잘 캡슐화되어 있고 더 친숙한 레이어 형식이 모두에게 공유됩니다. 사용 중 버그가 있으면 메시지를 남겨주세요.
js 코드
/**
* 데이터 유효성 검사 프레임워크. ID 필드 확인에서 오류가 발생하면 해당 응답 바로 뒤에 요소가 추가되어 오류 메시지가 표시됩니다. >* @버전 2.1
* @description 2009-05-16
*/
var checkData = new function() {
var idExt="_wangzi6hao_Span";//스팬 레이어의 ID 접미사 생성
/* *
* 중국어 및 영어 문자 길이를 가져옵니다(한자는 2자)
*
* @param {}
* str
* @return 문자 길이
*/
this.length = function(str) {
var p1 = new RegExp('%u..', 'g')
var p2 = new RegExp('%. ', 'g')
return escape(str).replace(p1, '').replace(p2, '').length
}
/**
* 해당 id 요소 삭제
*/
this.remove = function(id) {
var idObject = document.getElementById(id);
if (idObject != null)
idObject.parentNode.removeChild(idObject)
/ **
* 해당 id 뒤의 오류 메시지
*
* @param id: 오류 메시지를 표시해야 하는 id 요소
* str: 오류 메시지 표시
*/
this.appendError = function(id, str) {
this.remove(id idExt);// 범위 요소가 존재하는 경우 이 요소를 먼저 삭제하세요.
var spanNew = document.createElement("span"); //스팬 생성
spanNew.id = id idExt; //spanid 생성
spanNew.style.color = "red"
spanNew.appendChild(document .createTextNode (str));// 범위에 콘텐츠 추가
var inputId = document.getElementById(id);
inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 범위 추가
}
/**
* @description 모든 공백 문자를 필터링합니다.
* @param str: 공백을 제거해야 하는 원래 문자열
* @return 공백을 제거한 문자열을 반환합니다.
*/
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
}
/**
* 문자열 시작 부분의 공백과 문자열 끝 부분의 공백을 필터링합니다. 텍스트 중간에 연결된 여러 공백을 하나의 공백으로 변경합니다.
*
* @param {Object}
* inputString
*/
this.trim = function(inputString) {
if (typeof inputString != "string") {
return inputString;
}
var retValue = inputString
var ch = retValue.substring(0, 1); (ch == " ") {
// 문자열 시작 부분의 공백을 확인하세요.
retValue = retValue.substring(1, retValue.length)
ch = retValue.substring(0, 1 );
}
ch = retValue.substring(retValue.length - 1, retValue.length);
while (ch == " ") {
// 끝부분의 공백을 확인하세요. 문자열
retValue = retValue.substring(0, retValue.length - 1)
ch = retValue.substring(retValue.length - 1, retValue.length)
}
while(retValue .indexOf(" ") != -1) {
// 텍스트 중간에 연결된 여러 공백을 하나의 공백으로 변경
retValue = retValue.substring(0, retValue.indexOf(" "))
retValue.substring (retValue.indexOf(" ") 1,
retValue.length)
}
return retValue
}
/**
* 필터 문자열, 필터 내용을 지정합니다. 내용이 비어 있으면 기본 필터는 '~!@#$%^&*()- 입니다."
*
* @param {Object}
* str
* @param {Object}
* filterStr
*
* @return에는 필터 내용이 포함되어 있으며 True를 반환하고 그렇지 않으면 false를 반환합니다.*/
this.filterStr = function(str, filterString) {
filterString = filterString == "" ? "'~!@#$%^&*()- ."" : filterString
var ch;
var i;
var temp;
var error = false;// 잘못된 문자가 포함된 경우 True
for (i = 0; i <= (filterString.length - 1); i ) {
ch = filterString.charAt(i);
temp = str.indexOf(ch)
if (temp != -1) {
error = true
break;
}
}
반환 오류;
}
this.filterStrSpan = function(id, filterString) {
filterString = filterString == "" ? %^&*( )- ."" : filterString
var val = document.getElementById(id)
if (this.filterStr(val.value, filterString)) {
val.select() ;
var str = "잘못된 문자를 포함할 수 없습니다." filterString;
this.appendError(id, str);
return false;
return true ;
}
}
/**
* URL인지 확인
*
* @param {}
* str_url
* @return {Boolean} true: URL, false: URL이 아님
*/
this.isURL = function(str_url) {// 확인 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 }" // IP 형식의 URL - 199.194.52.184
"|" // IP 및 DOMAIN(도메인 이름) 허용
"([0-9a-z_!~*'()- ] .)*" // 도메인 이름 - www.
"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." // 두 번째 수준 도메인 이름
"[a-z]{2,6})" // 첫 번째 수준 도메인- .com 또는 .museum
"(:[0-9]{1,4})?" / Port- :80
"((/?)|" // 파일명이 없으면 슬래시는 필요하지 않습니다
"(/[0-9a-z_!~*'().; ?:@&= $,% #-] ) /?)$";
var re = new RegExp(strRegex);
return re.test(str_url);
}
이것입니다. isURLSpan = function(id) {
var val = document.getElementById(id);
if (!this.isURL(val.value)) {
val.select(); = "링크가 형식을 따르지 않습니다." ;
return false
} else {
this.remove(id idExt); return true;
}
}
/**
* 이메일인지 확인하세요
*
* @param {}
* str
* @return {Boolean} true: email, false: b>이메일
*/
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 = "이메일이 형식을 충족하지 않습니다."; >this.appendError(id, str);
return false;
} else {
this.remove(id idExt)
return true; /**
* 숫자인지 확인하세요
*
* @param {}
* str
* @return {Boolean} true: 숫자, false: /b>*/
this.isNum = function(str) {
var re = /^[d] $/
re.test(str);
this.isNumSpan = function(id) {
var val = document.getElementById(id)
if (!this.isNum(val.value)) {
val.select();
var str = "숫자여야 합니다.";
this.appendError(id, str);
return false;
else {
this.remove(id idExt); 🎜 >return true;
}
}
/**
* 값이 지정된 범위 내에 있는지 확인하고, 비어 있으면 확인을 수행하지 않습니다.
*
* @param {}
* str_num
* @param { }
* small 보다 크거나 같아야 하는 값(이 값이 비어 있는 경우 최대값보다 클 수 없는지만 확인)
* @param {}
* big 값 그보다 작거나 같아야 합니다(이 값이 비어 있는 경우에만 검사는 최소값보다 작을 수 없습니다)
*
* @return {Boolean} 최소값보다 작거나 커야 합니다. 최대값보다Number는 false를 반환하고, 그렇지 않으면 true를 반환합니다.
*/
this.isRangeNum = function(str_num, small, big) {
if (!this.isNum( str_num )) // 숫자인지 확인
return false
if (small == "" && big == "")
throw str_num "최대 또는 최소 숫자가 정의되지 않았습니다!";
if (small != "") {
if (str_num < small)
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 = "보다 크거나 같아야 합니다" small
}
if (big != "") {
str = "보다 작거나 같아야 합니다. " big;
}
this.appendError(id, str);
false를 반환;
} else {
this.remove(id idExt);
true를 반환;
}
}
/**
* 정규화된 문자열인지 확인하세요(대소문자 구분 안 함)
*는 a-z0-9_
*
* @param {}
*으로 구성된 문자열입니다. str 검사된 문자열
* @param {}
* idStr 커서 위치 필드 ID ID만 수신할 수 있습니다.
* @return {Boolean} No "a-z0-9_" 구성은 false를 반환하고, 그렇지 않으면 true를 반환합니다.
*/
this.isLicit = function(str) {
var re = /^[_0-9a-zA-Z]*$/
re.test (str);
}
this.isLicitSpan = function(id) {
var val = document.getElementById(id)
if (!this.isLicit(val) .value)) {
val.select();
var str = "a-z0-9_로 구성된 문자열입니다(대소문자 구분 안 함);"
this.appendError(id, str );
return false;
} else {
this.remove(id idExt)
return true
}
/**
* 두 문자열이 같은지 확인
*
* @param {}
* str1 첫 번째 문자열
* @param {}
* str2 두 번째 문자 문자열
* @ return {Boolean} 문자열이 같지 않으면 false를 반환하고, 그렇지 않으면 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(); str = "입력 내용은 동일해야 합니다.";
this.appendError(id, str);
return false
} else {
this.remove(id idExt); 🎜>true 반환;
}
}
/**
* 문자열이 지정된 길이 범위 내에 있는지 확인합니다. (한자는 2바이트로 계산됩니다.) 문자가 비어 있으면 확인하지 않습니다.
*
* @param {}
* str 검사된 문자
* @param {}
* lessLen 길이는
* @param {}
* moreLen보다 작거나 같아야 합니다.
*
* @return {Boolean} 최소 길이보다 작거나 최대 길이보다 큼숫자가 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 "최대 및 최소 길이가 정의되지 않았습니다!"; >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 = "" lessLen ";"보다 크거나 같음( moreLen != "")
str = "보다 작거나 같아야 합니다." moreLen
val.select()
this.appendError(id, str)
return false; 🎜>} else {
this.remove(id idExt);
return true;
}
}
/**
* 문자열이 지정된 길이 범위보다 작은지 확인(한자는 2바이트로 계산됨)
*
* @param {}
* str string
* @param {}
* 길이보다 작거나 같은
*
* @return {Boolean} 주어진 길이 숫자가 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 = "길이가 다음보다 크거나 같음" lessLen
val.select(); .appendError(id, str);
return false;
} else {
this.remove(id idExt)
return true; *
* 문자열이 지정된 길이 범위보다 큰지 확인(한자는 2바이트로 계산됨)
*
* @param {}
* str string
* @param {}
* 길이보다 작거나 같은 moreLen
*
* @return {Boolean} 주어진 길이보다 큼 숫자는 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 = "길이는 다음보다 작거나 같아야 합니다. " moreLen;
val.select();
this.appendError(id, str);
return false;
} else {
this.remove(id idExt);
return true
}
}
/**
* 문자가 비어 있지 않은지 확인
*
* @param {}
* str
* @ {부울}을 반환합니다.문자가 비어 있습니다 true를 반환하고 그렇지 않으면 false를 반환합니다.
*/
this.isEmpty = function(str) {
return str == "" this.isEmptySpan = function(id) {
var val = document.getElementById(id);
if (this.isEmpty(val.value)) {
var str = "허용되지 않음 비어 있음;" ;
val.select();
this.appendError(id, str);
return false
} else {
this.remove(id idExt) >return ;
}
}
}
테스트 페이지
웹페이지 제목 javascript" src="test.js">
