JavaScript DOM 학습 8장 폼 오류 프롬프트_기본 지식

내 생각에는 경고 상자는 브라우저가 오류 메시지를 표시하는 다른 방법을 지원하지 않는 경우에만 사용됩니다. W3C에서는 양식 항목 근처에 오류 메시지를 표시할 것을 권장합니다. 이는 좋은 접근 방식이므로 브라우저가 이 고급 접근 방식을 지원하지 않는 경우에만 경고 대화 상자를 사용합니다.
예제
아래 예를 시도해 보세요. 각 항목은 필수 항목입니다. 또한 이메일 항목에 @ 기호가 있는지 확인하겠습니다. 그렇지 않은 경우 오류 메시지가 표시됩니다.

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

var W3CDOM = (document.getElementsByTagName && document .createElement) ;

window.onload = function () {
document.forms[0].onsubmit = function () {
return verify()
}
}

function verify() {
validForm = true;
firstError = null;
errorstring = ''
var x = document.forms[0].elements; for (var i=0;i  if (!x[i].value)
     writeError(x[i],'이 필드는 필수입니다.')
}
if (x['email'].value.indexOf('@') == -1)
writeError(x['email'],'올바른 이메일 주소가 아닙니다.')
if (!W3CDOM)
경고(errorstring);
if (firstError)
firstError.focus();
if (validForm)
경고('모든 데이터가 유효합니다!' ); 🎜> return false;
}

function writeError(obj,message) {
validForm = false
if (obj.hasError) return; {
        obj.className = ' error';
       obj.onchange = RemoveError;
      var sp = document.createElement('span');
              obj .parentNode.appendChild(sp); ' 메시지 'n';
obj.hasError = true;
}
if (!firstError)
firstError =
}

function RemoveError()
{
this.className = this.className.substring(0,this.className.lastIndexOf(' '))
this.parentNode.removeChild(this.hasError);
this.hasError = null ;
this.onchange = null;
}


설명
먼저 W3C DOM 지원 여부를 고집합니다. 이 예제는 Mac의 IE에서는 작동하지만 다른 페이지에서는 작동하지 않는 것이 정상입니다. 해당 브라우저는 W3C DOM을 충분히 지원하지 않으며 모든 상황을 처리할 수 없기 때문입니다.

그런 다음 확인 함수인 유효성 검사()를 호출하는 onsubmit 이벤트 핸들러를 만듭니다.

코드 복사


코드는 다음과 같습니다.

var W3CDOM = (document. getElementsByTagName && document .createElement); window.onload = function () { document.forms[0].onsubmit = function () { return verify() } }

validate()
양식이 확인되었다고 가정하고(validForm=true) firstError=null을 설정합니다. 마지막으로 첫 번째 오류 요소에 초점을 맞춥니다. 그런 다음 모든 오류 정보가 포함된 errorstring이라는 문자열을 만듭니다. 이는 W3C DOM 브라우저에만 해당됩니다.





코드 복사

코드는 다음과 같습니다.

var x = document.forms[0].elements;
for (var i=0;i if (!x[i].value)
           writeError(x[i],'이 필드는 필수입니다.')
}
if (x['email'].value.indexOf('@') == -1)
writeError(x['email'],'올바른 이메일 주소가 아닙니다');

이 vlidate() 함수의 핵심은 평소와 동일합니다. 원하는 순서대로 오류를 확인하세요. 오류를 발견하면 writeError()를 호출하고 오류 필드와 오류 메시지를 전달합니다.

브라우저가 W3C DOM을 지원하지 않는 경우 errorString을 사용하여 경고 상자를 생성하세요. 경고 상자의 내용을 수정하고 싶을 수도 있습니다.

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

if (!W3CDOM)
alert (errorstring) ;

사용자 편의를 위해 첫 번째 오류 요소에 초점을 설정합니다.

마지막으로 validaForm을 반환합니다. 그래도 사실이라면 양식을 제출하세요.

writeError()
오류 정보를 양식 항목에 출력하는 함수입니다. 실패하면 브라우저가 W3C DOM을 지원하지 않는다는 의미이며 오류 메시지가 errorstring으로 전송됩니다.
이 함수는 양식 항목과 오류 메시지를 전달합니다.

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

function writeError(obj,message)
{

먼저 validForm을 false로 설정합니다. 이 양식은 올바르게 작성되지 않았으므로 제출해서는 안 됩니다.

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

validForm = false
}

그런 다음 양식 항목에 이미 오류 메시지가 있는지 확인하세요. 그렇다면 동일한 항목 뒤에 두 개의 오류 메시지가 표시되는 것을 원하지 않습니다.

if (obj.hasError) return; 브라우저가 W3C DOM을 지원하는지 확인하세요.

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

obj.className = ' error'

그런 다음 오류 양식 항목에 대한 onchange 이벤트 핸들러를 설정합니다.

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

obj.onchange = RemoveError

포함할 오류 메시지를 표시하고 해당 클래스를 "error"로 설정합니다. CSS에서 렌더링할 스타일을 설정합니다.

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

var sp = document.createElement('span ');
sp.className = 'error';

에 오류 메시지 텍스트 노드를 추가합니다.

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

sp.appendChild(document.createTextNode(message ));

그런 다음 이 을 해당 양식 항목에 추가합니다(이 예에서는 각 양식 항목에

태그가 있습니다).

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

obj.parentNode.appendChild(sp);

마지막으로 hasError 속성을 이 형식으로 설정합니다. 이 속성은 잘못된 양식 항목을 표시하고 나중에 오류 메시지를 쉽게 제거하는 데 사용될 수 있습니다.

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

obj.hasError = sp; 🎜>지원하지 않는 브라우저의 경우 오류 문자열에 양식 항목 이름과 오류 메시지를 저장합니다. 이 문자열은 마지막에 나타납니다. 또한 그에 대한 hasError 속성을 설정하십시오.

[코드] else {
errorstring = obj.name ': ' 메시지 'n'
obj.hasError =
}


이때에도 validForm 값이 true인 경우 firstError를 현재 요소로 설정합니다. 미래에 초점을 쉽게 설정할 수 있습니다.

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

if (validForm)
firstError = obj;
removeError()

각 오류 양식 항목의 onchange 이벤트 핸들러가 이 함수를 가리킵니다. 사용자가 해당 양식 필드를 수정하면 오류가 수정되었다고 정중하게 가정합니다. 그러면 오류 메시지가 사라져야 합니다.

먼저 양식 항목 클래스에서 오류 항목을 제거하세요. 특정 오류 스타일을 제거하는 데 사용됩니다.

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

function RemoveError() {
this .className = this.className.substring(0,this.className.lastIndexOf(' '));

그런 다음 오류 메시지를 제거하세요. hasError 속성은 정보가 포함된 을 가리키므로 양식 항목의 상위 요소에서 이를 제거합니다.

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

this.parentNode.removeChild(this.hasError );
마침내 청소를 합니다. hasError 속성을 null로 설정한 다음 onchange 이벤트 핸들러를 제거합니다.

[코드]this.hasError = null;
this.onchange = null
}

번역 주소: http://www.quirksmode .org/dom/error.html

재인쇄를 위해 다음 정보를 보관해 주세요
저자: Beiyu (tw:@rehawk)