현재 널리 사용되는 Node.js 양식 유효성 검사 기능 error message_javascript 기술

얼마 전 js 데이터 확인, js 이메일 확인, js url 확인, js 길이 확인, js 디지털 확인 등 팝업 대화 상자를 작성했지만 지금은 그런 불친절한 방법이 별로 인기가 없어 다시 작성했습니다. 하나, 더 잘 캡슐화되고 더 친숙한 레이어 양식
을 모두와 공유합니다. 사용 중 버그가 있으면 메시지를 남겨주세요.
test.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); //span 요소가 있으면 삭제하세요. 요소 우선
varspanNew = document.createElement("span");// 범위 생성
spanNew.id = id idExt;//spanid 생성
spanNew.style.color = "red"; >spanNew .appendChild(document.createTextNode(str));//span에 콘텐츠 추가
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); 🎜>while (ch == " ") {
// 문자열 시작 부분의 공백을 확인하세요.
retValue = retValue.substring(1, retValue.length)
ch = retValue.substring( 0, 1);
}
ch = retValue.substring(retValue.length - 1, retValue.length);
while (ch == " ") {
// 끝을 확인하세요. 문자열 Space
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
var val = document.getElementById(id);
if (this.filterStr(val.value, filterString)) {
val .select();
var str = "잘못된 문자를 포함할 수 없습니다." filterString;
this.appendError(id, str)
return false {
this; .remove( id idExt);
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} )?" // 포트 - :80
"((/?)|" // 파일 이름이 없으면 슬래시가 필요하지 않습니다
"(/[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 = "링크가 형식을 따르지 않습니다.";
this.appendError(id, str)
return false
>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}$/
re.test(str) 반환
}

this.isEmailSpan = 함수(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) ;
true를 반환합니다.
}
}

/**
* 숫자인지 확인하세요
*
* @param {}
* str
* @return {Boolean} true: 숫자, false: /b>*/
this.isNum = function(str) {
var re = /^[ d] $/
return 테스트(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) ) ;
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)) // 숫자인지 확인
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);
return false;
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]*$/
return 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);
false를 반환;
} else {
this.remove(id idExt);
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();
var str = "두 가지 요소 모두 入内容必须一样;";
this.appendError(id, str);
거짓을 반환합니다.
} else {
this.remove(id idExt);
참을 반환합니다.
}
}

/**
* 문자열이 지정된 길이 범위 내에 있는지 확인합니다. (한자는 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)
false를 반환합니다.
}

if (moreLen != "") {
if (strLen > moreLen)
false를 반환합니다.
}

if (lessLen == "" && moreLen == "")
throw "没有定义最大最小长島!";
참을 반환합니다.
}

this.isRangeSpan = function(id, lessLen, moreLen) {
var val = document.getElementById(id);
if (!this.isRange(val.value, lessLen, moreLen)) {
var str = "도수";

if (lessLen != "")
str = "大于或者等于 " lessLen ";";

if (moreLen != "")
str = " 应该小于或者等于 " moreLen;

val.select();
this.appendError(id, str);
거짓을 반환합니다.
} else {
this.remove(id idExt);
참을 반환합니다.
}
}

/**
* 문자열이 지정된 길이 범위보다 작은지 확인(한자는 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();
this.appendError(id, str);
거짓을 반환합니다.
} else {
this.remove(id idExt);
참을 반환합니다.
}
}

/**
* 문자열이 지정된 길이 범위보다 큰지 확인(한자는 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);
거짓을 반환합니다.
} else {
this.remove(id idExt);
참을 반환합니다.
}
}

/**
* 检查字符不为空
*
* @param {}
* str
* @return {Boolean} 문자가 비어 있음 true를 반환하고 그렇지 않으면 false를 반환합니다.
*/
this.isEmpty = function(str) {
return str == "";
}

this.isEmptySpan = function(id) {
var val = document.getElementById(id)
if (this.isEmpty (val .value)) {
var str = "Null은 허용되지 않습니다.";
val.select();
this.appendError(id, str)
return false; else {
this.remove(id idExt);
return true;
}
}
}

다음은 구체적인 테스트 페이지입니다. :

코드 복사 코드는 다음과 같습니다.

;head>

; script type="text/javascript">
function checkForm(){
var isPass = true
//Filter string
if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) {
isPass = false
}

//URL 확인
if(!(checkData.isEmptySpan( "isURL") && checkData.isURLSpan('isURL')))
isPass = false

//email
if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan ('isEmail')))
isPass = false;

//숫자
if(!(checkData.isNumSpan('isNum')))
isPass = false;
//숫자 크기
if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))
isPass = false ;

//비밀번호(숫자, 문자, 밑줄)
if(!(checkData.isLicitSpan('isLicit'))))
isPass = false; two 필드가 동일한지 여부
if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1')))
isPass = false

/ /문자 길이 제어
if(!(checkData.isRangeSpan('isRange',5,10)))
isPass = false;

//최단 문자 제어
if(!( checkData.isLessSpan('isLess',10)))
isPass = false

//가장 긴 문자 제어
if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan (' isMore',30)))
isPass = false;

//비어 있는 제어
if(!(checkData.isEmptySpan("isEmpty")))
isPass = false;
isPass 반환
}

평등 판단: < input type="text" id="isEquals" name="isEquals">


;



;td>< ;input type="submit" name="submit" value="데이터 제출"

/table>





렌더링:

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：슈퍼 사용자 경험 테이블 정렬 javascript 구현 code_javascript 기술 달성다음 기사：슈퍼 사용자 경험 테이블 정렬 javascript 구현 code_javascript 기술 달성

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved

문자 필터링:	링크:
이메일:	번호:
번호 범위:	a-zA-Z0-9_< input type="text" id="isLicit" name="isLicit">
< ;/td>
길이 제어: < ;/td>	길이가 컨트롤보다 큽니다:
길이가 컨트롤보다 작습니다: ;td> 비어 있는지 여부: