JavaScript DOM 학습 5장 Forms 소개_기본 지식

형태별 탐지 항목이 다르기 때문에 유니버셜 코드를 알려드릴 수 없습니다. 이 장에서 소개한 요소를 사용하여 자신만의 감지 기능을 구축해야 합니다. 다음 페이지에 참고할 수 있는 예가 있습니다.

이 장에서는 먼저 JavaScript를 사용하여 양식을 감지하는 데 따른 제한 사항을 논의한 다음 제출 시간 핸들러, 양식 자체의 몇 가지 메소드 및 속성을 설명합니다. 마지막으로 양식 요소에 액세스하는 방법입니다.

여기에는 양식 사용 오류와 해결 방법을 소개하는 Jeff Howden의 기사도 있습니다. 양식과 JavaScript의 조화
제한 사항
먼저 사용자가 양식을 제출할 때 JavaScript 감지 코드가 수행하는 작업을 이해해야 합니다.
1 , JavaScript가 양식을 감지하면 다음과 같이 보일 수 있습니다. 코드에서 오류가 발견되면 제출이 일시 중지되고 사용자에게 올바른 데이터를 입력하라는 경고가 표시됩니다.
2. 오류가 없거나 JavaScript가 꺼져 있으면 양식 내용이 서버로 전송됩니다.
3. 서버 측 스크립트가 오류를 발견하면 일부 오류 정보를 반환합니다. 이 경우 사용자는 다시 제출하기 전에 양식으로 돌아가 데이터를 다시 채워야 합니다.
4. 오류가 발생하지 않으면 서버는 필요한 작업을 완료하고 감사 메시지를 표시합니다.
보시다시피 제출 프로세스 중에 데이터는 두 번 확인됩니다. 한 번은 JavaScript로, 한 번은 서버에서 확인됩니다. 서버 측 감지는 항상 가능하고 안정적입니다. JavaScript 감지는 사용자가 JavaScript 기능을 켤 때만 유용합니다. 그러면 서버는 항상 안정적이고 효과적이며 사용자가 사용하는 브라우저와 아무 관련이 없으므로 JavaScript 감지가 필요한 이유는 무엇입니까?
JavaScript 감지는 데이터가 서버로 전송되기 전에 감지할 수 있으므로 서버측 감지를 효과적으로 보완합니다. 이런 방식으로 사용자는 뒤로가기 버튼을 사용하여 양식 내용을 수정할 필요가 없으며 이는 매우 번거롭고 잘못된 내용을 찾는 것도 상당히 번거롭습니다. 따라서 JavaScript 감지는 서버 측 감지보다 사용자 경험에 더 도움이 됩니다.
따라서 JavaScript는 완전한 탐지 메커니즘은 아니지만 서버측 보완 및 사용자 친화성 측면에서는 여전히 좋은 선택입니다. 따라서 사용자 경험 요구 사항을 충족할 뿐만 아니라 프로그램의 보안도 보장하는 이 두 가지 탐지 메커니즘을 사용하는 것이 좋습니다.
onsubmit
JavaScript를 사용하여 양식을 감지할 때 가장 먼저 해야 할 일은 onsubmit에 대한 이벤트 핸들러를 만드는 것입니다. 이 프로그램은 사용자가 양식을 제출할 때 실행됩니다. 이 프로그램은 특정 필드에 값이 채워져 있는지, 해당 확인란 중 하나 이상이 선택되었는지 또는 확인해야 할 사항이 있는지 확인합니다.
코드는 다음과 같습니다.

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

checkscript()는 이 프로그램의 이름입니다. 이 코드는 true 또는 false를 반환해야 합니다. false가 반환되면 양식이 제출되지 않으며 true 또는 false 반환 여부에 관계없이 코드 실행이 중지됩니다.
그래서 생성된 코드는 다음과 같습니다.

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

}
else if (다른 값이 뭔가임/아님) {
                                                                스크립트가 여기에 도달하면 모든 것이 정상입니다.
// 양식을 제출할 수 있습니다
true를 반환합니다. 🎜>}


물론, 많은 양식 항목이나 많은 라디오 버튼 상자를 감지해야 하는 경우 이 코드는 매우 복잡하게 작성될 수 있습니다. 기본 아이디어는 다음과 같습니다. 확인해야 하는 양식의 모든 요소를 ​​반복하고 오류가 발견되면 false를 반환한 다음 코드 실행이 중지되고 양식이 제출되지 않습니다.
오류를 발견하면 사용자에게 알려야 합니다. 경고 상자를 사용할 수 있지만 오늘날 대부분의 방법은 오류 메시지를 생성하여 오류 항목에 추가하는 것입니다.
마지막에 모든 요소를 ​​확인하고 오류가 없으면 true를 반환하고 양식이 제출됩니다.
양식의 메서드 및 속성
JavaScript에는 양식 처리를 위한 몇 가지 내장 메서드와 속성도 있습니다. 그 중 세 가지가 더 중요합니다.
submit() 메소드를 사용하여 양식을 제출할 수 있습니다. 페이지의 첫 번째 양식을 제출하려면 다음을 작성하세요.

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

document.forms[ 0].submit()
사용자가 JavaScript를 사용하여 양식을 제출하면 양식의 이벤트 핸들러가 작동하지 않습니다.
양식을 재설정하려면 다음을 수행하세요.
[code] document.forms[0].reset()
테스트 없이 이 메서드를 사용하면 양식의 이벤트 핸들러가 재설정된다고 가정합니다. 실행되지 않습니다.
마지막으로 양식의 ACTION 항목을 수정할 수 있습니다.
[code] document.forms[0].action = 'the_other_script.pl'
이는 양식을 다른 사람에게 제출해야 하는 경우에 사용됩니다. 특정 상황에서는 이 방법이 매우 편리합니다.
양식 요소에 액세스
양식 유효성 검사를 수행하려면 사용자가 입력한 내용을 알기 위해 양식 요소에 액세스해야 합니다. 따라서 먼저 레벨 0 DOM을 기반으로 하는 양식에 액세스해야 합니다. 일반적으로 다음과 같이 작성됩니다.
[code] document.forms[number].elements[number]
페이지가 로드되면 JavaScript는 페이지의 모든 양식을 저장하기 위해 양식 배열을 생성합니다. 따라서 첫 번째 형식은 Forms[0]이고 두 번째 형식은 Forms[1] 등입니다.
JavaScript는 또한 양식의 각 요소를 배열에 저장합니다. 첫 번째 요소는 요소[0]이고, 두 번째 요소는 요소[1]입니다. 모든 입력, 선택 및 텍스트 영역은 하나의 요소입니다.
때로는 형태와 요소의 이름을 사용하는 것이 더 나을 때도 있습니다. HTML에서는 다음과 같이 각 요소의 이름을 지정해야 합니다.
[code] text size=20 name=name> 3 5 다음 방법을 사용하세요.
[code] document.personal.name 2 document.personal.address 3 document.personal.city
이름을 사용하면 페이지에 있는 모든 요소의 순서를 혼란스럽게 할 수 있다는 장점이 있습니다. 코드는 계속 실행될 수 있지만 배열을 사용하는 경우에는 실행할 수 없습니다. 예를 들어 위 예시의 도시 입력란은 document.forms[0].elements[2]인데, 먼저 넣으면 document.forms[0].element[0]이 됩니다. 코드를 변경하려면.
값 감지
물론 가장 중요한 것은 사용자가 입력한 값이나 선택한 체크박스의 값을 알아내는 것입니다. 때로는 양식에 다른 정보를 입력하고 싶을 때도 있습니다.
다음의 작은 코드 조각은 양식의 요소에 액세스하는 데 도움이 될 수 있습니다. 이 작업은 사용자 입력을 user_input 변수에 저장하는 것뿐입니다. 그 후에 유효성을 확인할 수 있습니다.
텍스트, 텍스트 영역 및 숨겨진 필드
는 매우 간단합니다.
[code] user_input = document.forms[0].text.value

여기서 text는 텍스트 상자 또는 텍스트 영역이거나 숨겨져 있습니다. 필드 이름. value 속성은 이러한 요소의 텍스트를 제공하며 이는 user_input에 저장됩니다.
직접 작성할 수도 있습니다:

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

문서. form[0].text.value = '새 값';

선택 상자
이것도 매우 간단합니다.

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

user_input = document.forms[0].select.value;

선택한 항목을 변경하려면 selectedIndex를 수정해야 합니다. , 예:

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

document.forms[0].select .selectedIndex = 2

이제 세 번째 옵션이 선택되었습니다.
이전 브라우저
이전 브라우저에서는 선택 상자에 값 속성이 없는 경우:

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

var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value

먼저 찾기 사용자가 선택한 항목이 표시됩니다. document.forms[0].select.selectedIndex는 선택한 항목의 번호를 제공합니다. JavaScript는 모든 선택 상자를 포함하는 옵션 배열을 만들었습니다. 따라서 이 배열을 통해 사용자가 무엇을 선택했는지 알 수 있으며 이를 user_input에 저장합니다.
체크박스
체크박스는 약간 다릅니다. 우리는 이미 그 값을 알고 있지만 사용자가 그것을 선택했는지 여부를 알아야 합니다. 확인된 속성을 통해 알 수 있습니다. true와 false라는 두 가지 값이 있습니다.
그런 다음:

코드를 복사하세요 코드는 다음과 같습니다.

if(문서 .forms[0 ].checkbox.checked) {
user_input = document.forms[0].checkbox.name
}

checkbox는 체크박스의 이름입니다. 확인란을 선택하면 이름(또는 선택적으로 값)을 가져와 user_input에 전달합니다.
체크박스를 선택하면

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

document.forms[ 0 ].checkbox.checked = true

라디오 상자
안타깝게도 어떤 라디오 상자가 선택되었는지 한 번에 알 수는 없습니다. 순회 후에는 확인된 속성이 true인 항목만 찾을 수 있습니다.

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

for (i=0;iif (document.forms[0].radios[i].checked) {
user_input = document.forms[0].radios[i]. value;
}
}

radios는 이 라디오 버튼 그룹의 이름입니다.
document.forms[0].radios는 모든 라디오 버튼 상자를 포함하는 배열이며 루프는 selected 속성이 true인지 확인합니다. 그렇다면 user_input을 전달하십시오.
document.forms[0].radios.length는 모든 라디오 버튼 상자의 수를 반환합니다.
라디오 버튼을 선택하면 체크된 값을 true로 설정할 수 있습니다.

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

document.forms[0].radios[i].checked = true

번역 주소: http://www.quirksmode.org/js/forms.html
재인쇄 다음 정보를 보관해주세요
저자: Beiyu (tw:@rehawk)