여기서 소위 복합 양식은 드롭다운 목록 상자, 한 줄 텍스트, 여러 줄 텍스트, 숫자 값 등과 같은 여러 가지 입력 유형을 포함하는 양식을 나타냅니다. 이러한 양식을 자주 교체해야 하는 상황에서는 해당 양식에 대한 동적 생성 프로그램이 필요합니다. 이 기사에서는 데이터베이스를 사용하여 양식 정의 데이터를 저장하고 ASP 스크립트를 사용하여 양식 HTML 코드와 스크립트를 동적으로 생성하여 양식 입력을 확인하는 시스템을 소개합니다.
1. 데이터베이스 테이블 구조를 정의합니다.
웹에서 "Weekly Survey"와 같은 양식을 자주 볼 수 있는 양식입니다. 양식과 해당 유효성 검사 스크립트를 동적으로 생성하는 프로그램이 있는 경우 이러한 양식을 만드는 작업량을 크게 줄일 수 있습니다.
이 기사의 동적 양식 생성 및 유효성 검사 예에서는 Access 데이터베이스를 사용하여 양식에 대한 정의 정보를 저장하는 동시에 단순화를 위해 사용자가 양식에 입력한 데이터도 동일한 데이터베이스에 저장합니다. . 양식을 정의하려면 두 개의 테이블이 필요합니다. 첫 번째 테이블(Definitons)은 양식 입력 필드를 정의하는 데 사용되고 두 번째 테이블(Lists)은 선택 목록의 선택 항목과 같은 각 입력 필드에 대한 추가 정보를 저장합니다.
테이블 정의에는 다음 필드가 포함됩니다.
FieldName - 양식 입력 필드에 할당된 변수 이름
라벨 - 텍스트 라벨, 입력 필드 앞에 표시되는 정보 텍스트
유형 - 양식 입력 필드의 형태와 입력 값의 유형을 나타내는 단일 문자로 다음과 같습니다.
(t) 텍스트 입력 상자, 즉 < INPUT TYPE="TEXT" >.
(n) 텍스트 입력 상자이지만 숫자 값이 필요합니다.
(m) 메모 내용은 주석이나 기타 많은 양의 텍스트를 입력하는 데 사용되며 여러 줄의 텍스트 편집 상자입니다.
(b) "예" 또는 "아니오"를 입력해야 합니다. 이 구현에서는 이 입력을 얻기 위해 확인란을 사용하며 확인란의 텍스트 레이블은 "예"입니다. 사용자가 이를 선택하면 반환 값은 "on"입니다.
(r) 라디오 버튼.
(l) 드롭다운 목록 상자.
최소 - 숫자 입력 값에만 유효하며 여기에는 최소값이 제공됩니다. 이 예에는 최소값이 1로 설정된 "Age" 숫자 입력 상자가 있습니다.
Max – 이 필드의 값은 입력 필드 형식을 기준으로 합니다. 숫자 입력 상자의 경우 허용되는 최대 값을 나타냅니다. 예를 들어 "Age"의 최대값은 100입니다. 텍스트 입력 상자의 경우 Max는 허용되는 최대 문자 수를 나타냅니다. 여러 줄로 구성된 텍스트 편집 상자의 경우 Max는 표시 영역의 텍스트 줄 수를 나타냅니다.
필수 - 입력이 필요한지 여부를 나타냅니다. 이 유형의 값을 입력하지 않으면 입력 유효성 검사기가 오류를 보고합니다. 양식에는 반드시 입력해야 하는 값이 별표로 표시되어 있으며, 해당 값을 반드시 입력해야 한다는 각주 형태로 사용자에게 프롬프트가 표시됩니다.
이 문서의 예제 양식은 ASP 프로그래머 설문지입니다. 정의 테이블의 양식 정의는 다음과 같습니다.
FieldName 레이블 유형 최소 최대 필수
이름 이름 텍스트(t) - 50 나이 없음
나이 번호(n) 1 100
성별
없음성별 단일 선택 버튼(r) - - 예
이메일 이메일 주소 텍스트(t) - - 예
언어 프로그래밍 언어 드롭다운 목록 상자(l) - - 아니요
목록은 입력 필드에 정의된 일부 추가 정보를 저장하는 데 사용됩니다. 이 예시에서는 "Sex"와 "Languages"라는 두 가지 입력 값에 사용됩니다. Lists 테이블은 매우 간단하며 다음 세 개의 필드만 포함합니다.
FieldName - 현재 레코드가 속한 입력 필드를 형성합니다.
Value - 선택 값
Label - 사용자에게 표시되는 선택 항목의 프롬프트 텍스트
입력 필드 "Sex" "남성" 또는 "여성" 중에서 선택할 수 있는 두 가지 값에서만 입력할 수 있습니다. "언어"에는 VBScript, JavaScript, C, Perl 및 "기타"를 포함하여 ASP 환경에 적용할 수 있는 여러 프로그래밍 언어가 나열되어 있습니다.
세 번째 테이블 "기록"에는 사용자가 제출한 내용이 저장됩니다. 각 기록은 사용자가 제출한 내용에 해당합니다.
기록 - 비고 유형, 쿼리 문자열 형식으로 저장된 사용자 입력입니다.
생성됨 – 사용자가 양식을 제출한 날짜와 시간입니다. RemoteIP - 양식 제출자의 IP 주소입니다.
실제 애플리케이션에서는 사용자에 대한 추가 정보를 수집해야 할 수도 있습니다. 단순화를 위해 이 예에서는 제출 시간과 사용자 IP 주소라는 두 가지 추가 정보만 기록합니다.
2. 준비
위의 데이터 구조와 형식에 대한 정의가 완료되면 스크립트를 작성할 수 있습니다. 스크립트의 작업은 양식을 생성하고 사용자가 제출한 양식을 처리하는 것입니다.
폼을 생성하든 처리하든 다음 세 가지 프로세스(작업)가 필수적입니다. 첫 번째는 유효성 검사 유형을 결정하는 것입니다. 양식을 생성할 때 쿼리 문자열을 통해 유효성 검사 유형 값을 가져오고, 양식을 처리할 때 , 양식의 숨겨진 필드를 읽습니다. 프로그램에서 지원하는 양식 확인 방법에는 확인 없음, 클라이언트측 JavaScript 확인, 서버측 ASP 스크립트 확인, 클라이언트측 및 서버측 확인(코드명은 각각 0~3)의 네 가지 유형이 있습니다. 쿼리 문자열에 유효한 인증 방법이 지정되지 않은 경우 네 번째 인증 방법이 기본값으로 사용됩니다. 이 검증 처리 방법을 사용하면 클라이언트가 JavaScript 검증 사용을 금지하는 경우 이 양식 생성 및 처리 시스템을 유연하게 적용할 수 있으며 검증 프로세스는 서버 측에서만 수행될 수 있습니다. 유효성 검사 유형을 결정하는 코드는 다음과 같습니다.
유효성 검사 유형 확인
다음은 인용문입니다.
iValType = Request.QueryString("발행")
IsNumeric(iValType) = False인 경우 iValType = 3
iValType > 3 또는 iValType < 0인 경우 iValType =3
두 번째 작업은 데이터베이스 연결을 열고 두 개의 레코드 세트 개체를 만드는 것입니다. 이 프로그램의 기본 레코드 세트 개체인 RS 개체는 주로 Lists 테이블에서 데이터를 읽는 데 사용되는 정의 테이블을 작동하는 데 사용됩니다. 샘플 프로그램은 ODBC DSN을 사용하거나 ODBC DSN을 사용하지 않는 두 가지 데이터베이스 연결 방법을 제공합니다(DSN을 사용하는 경우 먼저 Dynamic이라는 DSN을 생성해야 하며 DSN을 사용하여 데이터베이스에 연결하는 코드는 주석 처리되어 있습니다).
세 번째 작업은 <HEAD>< /HEAD>와 같은 양식 스크립트를 생성(또는 처리)하고 스크립트 리소스가 끝날 때 차지한 RS, RSList 및 기타 개체를 해제하기 전(및 후)에 일부 정적 HTML 코드를 출력하는 것입니다. .
위 작업을 완료하는 코드 외에도 샘플 응용 프로그램의 나머지 ASP 스크립트에 의해 생성될 수 있는 두 가지 유형의 페이지가 있습니다. 질문 양식(위 그림 참조)과 양식 뒤에 나타나는 결과 페이지입니다. 제출됨(후자는 사용자가 제출한 결과를 기록할 책임도 있음) 실행할 스크립트 부분을 결정하는 가장 간단한 방법은 양식이 제출되었는지 확인하는 것입니다. 그렇다면 양식을 처리하고, 그렇지 않으면 양식을 생성합니다.
양식을 생성하는 중입니까, 아니면 양식을 처리하는 중입니까?
다음은 인용문입니다.
Len(Request.Form) = 0인 경우
'형태 생성... 약간...
또 다른
'양식을 처리합니다... 약간...
End If
3. 양식을 동적으로 생성합니다
. 양식을 생성할 때 프로그램은 정의 테이블의 각 입력 필드에 따라 레코드를 정의하고 해당 양식 HTML 코드와 JavaScript 코드를 차례로 생성합니다. HTML 코드에서 가장 먼저 생성되는 것은 텍스트 태그입니다.
다음은 인용문입니다.
sHTML = sHTML & vbTab & "< TR >" & vbCrLf & vbTab & vbTab
sHTML = sHTML & "< TD VALIGN=" & Chr(34) & "TOP" & Chr(34)
sHTML = sHTML & " >" & vbCrLf & vbTab & vbTab & vbTab
sHTML = sHTML & "< B >" & RS.Fields("레이블")
그런 다음 프로그램은 현재 입력 필드에 입력이 필요한지 확인합니다. 필요한 경우 라벨 텍스트 뒤에 별표(값을 입력해야 함을 나타냄)를 추가하고, 입력해야 하는 값에 대해서는 해당 JavaScript 코드를 생성하여 이를 확인해야 합니다. 라디오 버튼이나 선택 목록의 경우 사용자가 다른 모든 입력 유형에 대해 실제로 옵션을 선택했는지 확인하는 추가 검사가 있습니다. 입력 값이 비어 있지 않은지 확인하세요.
텍스트 레이블 다음에는 양식의 입력 요소가 있으며 이러한 요소에 대한 HTML 코드는 정의 테이블에 지정된 유형 및 속성을 기반으로 생성됩니다. 다음 단계는 입력 값 요구 사항에 따라 클라이언트 측 확인 작업을 수행하는 JavaScript 코드를 생성하는 것입니다. 이 예에서는 숫자 값만 사용자의 입력이 실제로 숫자인지, 숫자 값이 허용된 최대값과 최소값 사이에 있는지 확인하기 위해 추가 검사가 필요합니다. 위 코드를 생성한 후 테이블 행(즉, 입력 필드)을 종료하고 정의 테이블의 다음 레코드 처리를 계속할 수 있습니다. 모든 데이터베이스 레코드가 처리되면 다음 단계는 "제출" 버튼과 "지우기" 버튼에 대한 HTML 코드를 추가하는 것입니다. 다른 각도에서 보면 여기서 프로그램의 작업은 데이터베이스 레코드를 기반으로 각 입력 필드를 생성하는 것입니다. 각 입력 필드는 테이블 행을 차지하고 각 테이블 행에는 두 개의 셀이 있습니다. 첫 번째 셀은 표시하는 데 사용됩니다. 텍스트 레이블, 두 번째 장치는 입력 요소 자체를 표시합니다(코드는 dForm.asp 참조).
위 과정이 완료되면 양식의 HTML 코드와 유효성 검사 JavaScript 함수가 각각 sHTML 및 sJavaScript 변수에 저장됩니다. 페이지에 이러한 내용을 쓰기 전에 프로그램은 클라이언트에 JavaScript 유효성 검사가 필요한지 여부를 확인합니다. 이러한 유효성 검사가 필요하지 않은 경우 sJavaScript 변수가 지워집니다.
iValType = 0 또는 iValType = 2이면 sJavaScript = ""
BODY 태그를 출력한 후, 프로그램은 다음 JavaScript 함수를 출력합니다.
다음은 인용문 부분입니다.
< SCRIPT LANGUAGE="자바스크립트" >
< !--
함수 유효성 검사(TheForm){
//클라이언트 양식 유효성 검사
< %=s자바스크립트% >
사실을 반환;
}
함수 CheckRadio(objRadio){
//라디오 버튼의 값이 선택되었는지 여부
for(var n = 0; n < objRadio.length; n++){
if(objRadio[n].checked){
사실을 반환;
}
}
거짓을 반환;
}
함수 CheckList(objList){
//선택 목록에서 값이 선택되었는지 여부
for(var n = 1; n < objList.length; n++){
if(objList.options[n].selected){
사실을 반환;
}
}
거짓을 반환;
}
//-- >
</ /스크립트 >
클라이언트에 JavaScript 유효성 검사가 필요하지 않은 경우 유효성 검사 함수는 "return true" 문과 함께 남습니다. 위 코드의 마지막 두 정적 JavaScript 함수(CheckRadio 및 CheckList)는 라디오 버튼과 드롭다운 목록 상자의 유효성을 검사하는 데 사용됩니다. 유효성 검사 함수는 이 두 입력 필드의 유효성을 검사해야 할 때 이를 호출합니다.
이제 페이지에 양식 작성을 시작할 수 있습니다.
< FORM ACTION="./dform.asp" METHOD="POST" NAME="MyForm" onSubmit="return verify(this)" >
여기서는 유효성 검사 함수가 반환하는 경우에만 true 그런 다음에만 양식 제출 작업을 수행합니다. 따라서 클라이언트 측 JavaScript 확인 기능이 꺼지면 유효성 검사 기능이 자동으로 true를 반환합니다.
다음으로 추가할 것은 val이라는 숨겨진 필드입니다. 앞서 언급한 대로 이 값은 양식의 유효성 검사 모드를 나타냅니다.
< INPUT TYPE="HIDDEN" NAME="val" VALUE="< %=iValType% >" >
사용자가 양식을 제출하면 처리 스크립트는 이 값을 사용하여 서버측 유효성 검사를 수행할지 여부를 결정합니다.
그러면 출력은 테이블 표시와 테이블 제목입니다. 제목은 sTitleLabel 변수에 저장되며, 이 값은 스크립트 실행이 시작될 때 초기화됩니다.
인용문은 다음과 같습니다.
< 테이블 테두리="0" >
<TR>
< TD COLSPAN="2" ALIGN="중앙" >
< H2 >< %=sTitleLable% >< /H2 >
< /TD >
< /TR >
개선 조치로 FormID 필드를 정의, 목록 및 레코드 테이블에 추가할 수 있습니다. FormID는 양식을 고유하게 식별하므로 프로그램은 동시에 여러 양식을 정의하고 여러 양식의 사용자 응답 결과를 저장할 수 있습니다. 위의 sTitleLabel에 대해서는 다른 테이블(예: Forms)을 사용하여 저장할 수 있습니다.
테이블 표시와 테이블 제목 다음에 프로그램은 HTML 양식과 "제출" 및 "지우기" 버튼에 대한 코드를 출력합니다. 이후 프로그램은 sHTML 문자열에 "*"가 포함되어 있는지 확인하는데, 만약 그렇다면 양식에 반드시 입력해야 할 내용이 있다는 의미이며, 이때 별표의 의미를 설명하는 각주가 출력됩니다.
다음은 인용문입니다:
< %=sHTML% >
<TR>
< TD COLSPAN="2" ALIGN="중앙" >
< INPUT TYPE="SUBMIT" VALUE="양식 제출" > < INPUT TYPE="reset" VALUE="Clear" >
< /TD >
<%
'입력이 필요한 폼 필드가 있는지, 있다면 '*'의 의미를 설명하는 폼 각주를 출력합니다.
InStr(sHTML,"*") 그러면
%>
< /TR >
< TD COLSPAN="2" ALIGN="중앙" >
< FONT SIZE="2" >참고: 별표가 표시된 값은 필수입니다. < /폰트>
< /TD >
< /TR >
<%
종료 조건
%>
< /표 >
</ /양식 >
지금까지 양식 생성 작업이 완료되었습니다.
4. 제출 결과 처리
ASP 스크립트의 나머지 작업은 유효성 검사, 결과를 데이터베이스에 저장 및 "제출 성공/실패" 페이지 표시를 포함한 서버측 양식 처리입니다. 문자열 변수 sBadForm은 양식 유효성 검사 코드의 이 부분에서 사용되며 프로그램은 이를 사용하여 오류 정보를 저장합니다. 확인 프로세스가 끝날 때 sBadForm이 비어 있으면 사용자가 제출한 양식이 합법적이라는 의미입니다. 그렇지 않으면 양식 제출이 거부되고 sBadForm이 브라우저에 반환됩니다.
양식에서 사용하는 유효성 검사 모드에 관계없이 HTTP_REFERER를 확인하는 것이 좋습니다. 이 검사는 스크립트 도난을 방지합니다. 특정 POST가 이 웹사이트의 페이지나 스크립트에서 왔는지 확인하려면 두 개의 서버 변수를 비교하면 됩니다.
다음은 인용문입니다.
InStr(Request.ServerVariables("HTTP_REFERER"), _
Request.ServerVariables("HTTP_HOST")) = 0 그러면
sBadForm = "<LI>양식이 잘못된 위치에서 제출되었습니다. & vbCrlf."
종료 조건
양식의 숨겨진 필드가 서버측 확인을 수행해야 함을 나타내는 경우 프로그램은 양식 정의 데이터베이스 기록을 탐색하고 해당 검사를 수행합니다. 이 프로세스는 이번에 프로그램이 확인한다는 점을 제외하면 양식 생성과 매우 유사합니다. form에 잘못된 입력 값 정보를 추가해 주면 됩니다. sBadForm으로 가주시면 됩니다. 특정 코드는 dForm.asp를 참조하세요.
프로그램은 최종적으로 sBadForm이 비어 있는지 확인합니다. 비어 있지 않으면 양식 제출이 거부되고 sBadForm이 브라우저에 기록됩니다. sBadForm이 비어 있으면 Records 테이블에 레코드를 추가하여 양식 데이터를 저장합니다. 양식 내용을 저장하기 전에 숨겨진 필드 val을 삭제해야 합니다. 이 숨겨진 필드는 항상 양식의 첫 번째 입력 필드입니다.
다음은 인용문입니다.
Len(sBadForm) = 0이면
RS.Open "레코드", DB, 3, 2, &H0002
RS.새로 추가
RS.Fields("레코드") = Mid(Request.Form, InStr(Request.Form, "&") + 1)
RS.Fields("생성됨") = Now()
RS.Fields("RemoteIP") = Request.ServerVariables("REMOTE_ADDR")
RS.업데이트
Response.Write("< H1 >감사합니다.< /H1 >")
RS.닫기
또 다른
Response.Write("< H1 >양식 제출에 실패했습니다. < /H1 >")
응답.쓰기(vbCrLf & sBadForm)
종료 조건
종료 조건
이것이 서버 측 양식 처리를 위한 것입니다. 제출된 양식이 있는지 여부에 따라 이전 양식 생성 코드와 양식 처리 코드를 여기에 If 문으로 캡슐화하여 스크립트의 두 부분이 HTML 문서의 헤더와 같은 일부 공통 코드를 공유하도록 할 수 있습니다. 데이터베이스 개체 생성 및 리소스 해제가 기다립니다.
전반적으로 dForm.asp에는 동적 양식 생성 및 확인에 필요한 핵심 기능만 있고 많은 세부적인 문제 처리는 무시됩니다. 예를 들어, 앞서 언급한 다중 양식 문제: 다중 양식을 관리하기 위해 테이블을 추가하면 스크립트가 지정된 양식을 관리, 생성 및 처리하는 기능을 가질 수 있습니다. 또 다른 눈에 띄는 결점은 양식 정의 데이터를 추가, 삭제 및 업데이트하는 기능과 사용자가 제출한 결과 데이터에 대한 액세스 기능입니다. 이러한 기능은 독립 실행형 프로그램으로 구현될 수 있으며 대부분의 경우 (B/S 구조가 없는 애플리케이션) 마지막으로 dForm.asp에서 지원하는 입력 필드 유형도 제한되어 있으며 실제로는 전용 전자 메일 주소 입력 상자와 같은 다른 양식 입력 요구 사항이 있을 수 있습니다. 그러나 양식을 자주 업데이트하는 웹 사이트의 경우 이 기사에서 설명하는 동적 양식 생성 및 동적 유효성 검사 기능은 실제로 매우 유용합니다.