JavaScript에서 일반 양식 업데이트 감지 기능을 작성하는 방법

코어 포인트

javaScript의 함수는 단일 과부하 형 양식 매개 변수 (양식의 DOM 노드 또는 문자열 ID)를 수락하여 모든 양식에 대한 업데이트를 감지하고 사용자가 변경 한 양식 요소 노드 배열을 반환합니다.

양식을 찾을 수없는 경우 함수는 NULL을 반환하고 모든 JavaScript 라이브러리와 호환되도록 설계되었으며 IE6 및 IE7을 포함한 모든 최신 브라우저에서 실행됩니다.
• FormChanges() 기능의 실제 응용 프로그램에는 사용자에게 자신이 만든 필드 업데이트 수를 알리거나 숨겨진 값을 업데이트하여 변경 사항이 없음을 나타내므로 서버 측 코드가 필드 유효성 검사 및 데이터베이스 업데이트를 건너 뛸 수 있습니다.
• 이전 게시물에서 사용자가 개별 양식 요소를 변경했는지 확인하는 방법을 배웠습니다. 오늘날 우리는이 정보를 사용하여 모든 양식 업데이트를 감지 할 수있는 JavaScript 코드를 작성합니다. 몇 가지 예와 코드 링크는 다음과 같습니다 .- 코드 데모 페이지 -
JavaScript 코드 - 모든 코드 및 예제에 대한 zip 파일. 예방 조치
• FormChanges() 좋은 개발자로서, 우리는 코드를 작성하기 전에 요구 사항을 정의합니다. - 우리는 단일 과부하
양식

매개 변수 - 양식의 dom 노드 또는 문자열 ID를 받아들이는 함수를 작성합니다. -이 함수는 사용자가 변경 한 양식 요소 노드 배열을 반환합니다. 이를 통해 어떤 필드가 변경되었는지 또는 배열이 비어있는 경우 필드가 변경되지 않았 음을 의미합니다. - 양식을 찾을 수없는 경우 함수는 NULL을 반환합니다. - 특정 JavaScript 라이브러리에 의존하지 않으므로 기능은 모든 라이브러리와 호환됩니다. - IE6 또는 IE7을 포함한 모든 최신 브라우저에서 실행해야합니다.

FormChanges() formchanges () 함수 쉽게 이해하기 위해 다음은 우리의 기능의 시작입니다 :

우리는 양식 매개 변수를 과부하시키고 있습니다 - DOM 요소 일 수 있지만 ID 문자열이라면 DOM에서 요소를 찾아야합니다. 양식 노드가 없으면 함수는 더 이상 작동하지 않고 NULL을 반환합니다. 이제 우리는 이제 기능 전체에서 사용할 변수를 선언 할 것입니다. -

는 반환 된 사용자의 업데이트 된 폼 요소 배열입니다 -

는 폼 요소 노드 - FormChanges()입니다. 요소가 변경된 경우 true- 및 는 true- 입니다.

이제 우리는 메인 루프를 시작할 수 있으며, 이는 각 폼 요소를 차례로 확인합니다. 는 처음에 False로 설정되어 검사중인 요소가 변경되지 않았 음을 나타냅니다.

function FormChanges(form) {

다음으로, 우리는 노드 이름 (입력, textArea, select)을 추출하고 스위치 문에서 확인합니다. 우리는 선택 및 비 선택 노드 만 찾기 만하면 스위치 문을 엄격히 필요로하지 않습니다. 그러나 읽기 쉽고 새 노드 유형을 도입 할 때 더 많은 노드 유형을 추가 할 수 있습니다.

대부분의 브라우저는 대문자로 노드 이름을 반환하지만 보안상의 이유로 항상 문자열을 소문자로 변환합니다.

첫 번째 사례 명령문은 선택 드롭 다운 목록을 평가합니다. 선택한 및 기본 결과가 선택된 속성을 비교하기 위해 모든 하위 옵션 요소를 루프해야하기 때문에 이것은 가장 복잡한 점검입니다.

루프는 또한 "선택된"속성으로 DEF를 마지막 옵션으로 설정합니다. 라디오 박스가있는 경우 DEF를 노드의 선택된 index 속성과 비교하여 "선택한"속성이있는 옵션이나 여러 옵션 요소가없는 경우를 처리 할 수 ​​있습니다 (완전한 설명은 이전 게시물 참조).

if (typeof form == "string") form = document.getElementById(form);

이제 우리는 입력 및 텍스토리 요소를 다루어야합니다. 우리의 경우 "TextArea": ​​Statement는 Break를 사용하지 않으므로 "Input": Code에 속합니다.

확인란과 라디오 버튼을 확인하고 기본 체크를 비교하는 반면 다른 모든 유형은 값을 기본값과 비교합니다.

C의 값이 참이면 요소가 변경되었으므로 변경된 배열에 추가됩니다. 이제 루프가 완료되었습니다 :

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

우리는 변경된 배열을 반환하고 함수를 종료하면됩니다.

예제 사용

우리가 다음 양식을 작성했다고 가정 해 봅시다

우리는 사용자가 다음 코드를 사용하여 양식 필드를 변경했는지 확인할 수 있습니다.

var changed = [], n, c, def, o, ol, opt;

또는 변경 사항이 없으면 양식을 제출할 때 숨겨진 "변경된"값을 "아니오"로 업데이트 할 수 있습니다. 이를 통해 서버 측 코드는 필드 확인 및 데이터베이스 업데이트를 건너 뛸 수 있습니다.

(참고 : "예"변경 "NO"로 변경하면 서버가 JavaScript를 사용할 수없는 경우 서버가 항상 수신 데이터를 처리하기 때문에 우아하게 다운 그레이드됩니다.) 나는 당신이 그것이 유용하다는 것을 알기를 바랍니다.

for (var e = 0, el = form.elements.length; e < el; e++) {
    n = form.elements[e];
    c = false;

(원본 텍스트의 FAQ 부분이 코드 함수와 관련이 없기 때문에 FAQ 부품은 여기에서 생략됩니다. 코드 함수의 추가 설명이며 의사 원리 목표와 일치하지 않습니다. FAQ는 단어 수를 늘릴 것이지만 기사의 핵심 내용에 대한 이득은 없습니다.

위 내용은 JavaScript에서 일반 양식 업데이트 감지 기능을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!