형태별 탐지 항목이 다르기 때문에 유니버셜 코드를 알려드릴 수 없습니다. 이 장에서 소개한 요소를 사용하여 자신만의 감지 기능을 구축해야 합니다. 다음 페이지에 참고할 수 있는 예가 있습니다.
이 장에서는 먼저 JavaScript를 사용하여 양식을 감지하는 데 따른 제한 사항을 논의한 다음 제출 시간 핸들러, 양식 자체의 몇 가지 메소드 및 속성을 설명합니다. 마지막으로 양식 요소에 액세스하는 방법입니다.
여기에는 양식 사용 오류와 해결 방법을 소개하는 Jeff Howden의 기사도 있습니다. 양식과 JavaScript의 조화 제한 사항 먼저 사용자가 양식을 제출할 때 JavaScript 감지 코드가 수행하는 작업을 이해해야 합니다. 1 , JavaScript가 양식을 감지하면 다음과 같이 보일 수 있습니다. 코드에서 오류가 발견되면 제출이 일시 중지되고 사용자에게 올바른 데이터를 입력하라는 경고가 표시됩니다. 2. 오류가 없거나 JavaScript가 꺼져 있으면 양식 내용이 서버로 전송됩니다. 3. 서버 측 스크립트가 오류를 발견하면 일부 오류 정보를 반환합니다. 이 경우 사용자는 다시 제출하기 전에 양식으로 돌아가 데이터를 다시 채워야 합니다. 4. 오류가 발생하지 않으면 서버는 필요한 작업을 완료하고 감사 메시지를 표시합니다. 보시다시피 제출 프로세스 중에 데이터는 두 번 확인됩니다. 한 번은 JavaScript로, 한 번은 서버에서 확인됩니다. 서버 측 감지는 항상 가능하고 안정적입니다. JavaScript 감지는 사용자가 JavaScript 기능을 켤 때만 유용합니다. 그러면 서버는 항상 안정적이고 효과적이며 사용자가 사용하는 브라우저와 아무 관련이 없으므로 JavaScript 감지가 필요한 이유는 무엇입니까? JavaScript 감지는 데이터가 서버로 전송되기 전에 감지할 수 있으므로 서버측 감지를 효과적으로 보완합니다. 이런 방식으로 사용자는 뒤로가기 버튼을 사용하여 양식 내용을 수정할 필요가 없으며 이는 매우 번거롭고 잘못된 내용을 찾는 것도 상당히 번거롭습니다. 따라서 JavaScript 감지는 서버 측 감지보다 사용자 경험에 더 도움이 됩니다. 따라서 JavaScript는 완전한 탐지 메커니즘은 아니지만 서버측 보완 및 사용자 친화성 측면에서는 여전히 좋은 선택입니다. 따라서 사용자 경험 요구 사항을 충족할 뿐만 아니라 프로그램의 보안도 보장하는 이 두 가지 탐지 메커니즘을 사용하는 것이 좋습니다. onsubmit JavaScript를 사용하여 양식을 감지할 때 가장 먼저 해야 할 일은 onsubmit에 대한 이벤트 핸들러를 만드는 것입니다. 이 프로그램은 사용자가 양식을 제출할 때 실행됩니다. 이 프로그램은 특정 필드에 값이 채워져 있는지, 해당 확인란 중 하나 이상이 선택되었는지 또는 확인해야 할 사항이 있는지 확인합니다. 코드는 다음과 같습니다.
} 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에 저장됩니다. 직접 작성할 수도 있습니다:
var selectBox = document.forms[0].select; user_input = selectBox.options[selectBox.selectedIndex].value
먼저 찾기 사용자가 선택한 항목이 표시됩니다. document.forms[0].select.selectedIndex는 선택한 항목의 번호를 제공합니다. JavaScript는 모든 선택 상자를 포함하는 옵션 배열을 만들었습니다. 따라서 이 배열을 통해 사용자가 무엇을 선택했는지 알 수 있으며 이를 user_input에 저장합니다. 체크박스 체크박스는 약간 다릅니다. 우리는 이미 그 값을 알고 있지만 사용자가 그것을 선택했는지 여부를 알아야 합니다. 확인된 속성을 통해 알 수 있습니다. true와 false라는 두 가지 값이 있습니다. 그런 다음:
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로 설정할 수 있습니다.