클라이언트 측에서 양식 검증

클라이언트 양식 검증은 중요합니다. 시간과 대역폭을 절약하고 양식을 작성할 때 사용자가 실수를하는 위치를 지적 할 수있는 더 많은 옵션을 제공합니다. 즉, 이것이 서버 측 확인이 필요하지 않다는 것을 의미하지는 않습니다. 웹 사이트를 방문하는 사용자는 이전 브라우저 또는 비활성화 된 JavaScript를 사용하여 클라이언트 전용 확인을 중단 할 수 있습니다. 클라이언트 및 서버 측 확인은 서로를 보완하므로 실제로 독립적으로 사용해서는 안됩니다.

클라이언트 확인이 중요한 이유는 무엇입니까?

클라이언트 인증을 사용해야 할 두 가지 이유가 있습니다.

는 확인하는 빠른 방법입니다. 무언가 잘못되면 양식이 제출되면 경고가 트리거됩니다.

한 번에 하나의 오류 만 안전하게 표시하고 잘못된 필드에 집중하여 사용자가 필요한 모든 세부 사항을 올바르게 작성할 수 있도록 할 수 있습니다.

1. 두 가지 주요 검증 방법

   클라이언트 양식 검증의 두 가지 주요 방법은 다음과 같습니다.
한 번에 오류를 표시하고 문제가있는 필드에 중점을 둡니다. 모든 오류가 동시에 서버 측 확인 스타일
2. 를 표시합니다.

   서버 측 확인에는 모든 오류를 동시에 표시하는 동안 클라이언트를 확인하는 더 좋은 방법은 한 번에 하나의 오류를 표시하는 것입니다. 이를 통해 잘못 채워진 필드 만 강조 표시 할 수있어 방문자가 양식을 성공적으로 수정하고 제출할 수 있습니다. 모든 오류를 동시에 사용자에게 제시하면, 대부분의 사람들은 각 수정 후 다시 제출하려고하지 않고 한 번에 기억하고 수정하려고합니다.

   이러한 장점을 감안할 때, 한 번에 하나의 오류를 보여주는 검증 방법에만 초점을 맞출 것입니다.
양식을 확인하는 방법 예를 들어 다음 코드 스 니펫 :

전화 : 문제는 무엇입니까? 글쎄,이 전에 다른 양식을 추가하면 코드가 잘못된 형식을 검증하려고합니다.

더 좋은 방법은 양식 이름을 포함시키는 것입니다.

onsubmit = "return validAmyform ();"& gt; 이것은 여전히 ​​휴대용이 좋지 않지만 다른 양식 에서이 유효성 검사의 일부를 재사용하려면 먼저 많은 텍스트 교체를해야합니다.

그래서 양식 이름을 삭제 해 봅시다 :

이 마지막 방법은 객체를 사용하여 항상 현재 객체를 가리 킵니다. 이로 인해 코드가 더 휴대가 가능하고 타이핑 시간을 절약 할 수 있습니다.
• 지금 방문객의 삶을 더 쉽게 만드는 방법? 오류를 유발하는 필드에 중점을 두지 말고 스스로 찾아 보자.
• 이러한 변경 사항을 사용하면 브라우저는 잘못된 필드를 채우는 데 중점을두고 방문자의 텍스트를 선택합니다. 스크롤이 필요한 경우 자동으로 발생합니다.
좋아, 이것은 훌륭하지만, 각 필드에 너무 많은 코드가 있다고 생각하십니까? 페이지에서 많은 타이핑 및 다운로드 시간을 절약 할 수있는 간단한 기능 라이브러리를 만들면 어떻게됩니까? 다음으로 우리는이 작업을 수행 할 것입니다. 우리는 검증 코드를 더 짧게 만들기 위해 기본 기능을 정의 할 것입니다.

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

이 함수는 간단한 숫자 검증을 수행합니다. 필드에 숫자 만 포함되어 있는지, 선택적으로 주어진 범위 내에 있는지 확인합니다. 이 코드는 매개 변수로 오류 메시지를 전달합니다. 이와 같은 기능을 사용하려면 다음과 같이 기본적으로 OnSubmit 핸들러에 추가 할 수 있습니다.

onsubmit = "return validAteNumber (this.phone, '전화 번호를 입력하십시오', 5, 10); "& gt; 이렇게 부르십시오. 전화 번호가 숫자이고 5 자리보다 길고 10 자리 미만인지 확인합니다. 매개 변수로 전화 객체를 전달하는 방법에 주목하십시오.이를 통해 필드의 값을 전달하는 대신 헬퍼 기능을 통해 집중할 수 있습니다. 숫자를 확인하는 또 다른 방법은 숫자를 주어진 범위 내에 있도록 요구하는 것입니다. 기능이 그러한 유효성 검사를 수행하려면 확인 라인을 다음과 같이 변경하십시오.

여러 수표를 양식에 적용하려면 OnSubmit 핸들러에 여러 규칙을 포함시킬 수 있습니다. 예를 들어, 전화 번호 외에도 첫 번째 및 성을 입력해야한다고 상상해보십시오.

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onsubmit = "return ( validateNumber (this.phone, '전화

를 입력하십시오 숫자, 번호 만 ', 5, 10) && validatestring (this.firstname, '를 입력하십시오 당신의 이름 ', 3, 15) &&
validatestring (this.lastname, '를 입력하십시오 당신의 성 ', 3, 15) ); "& gt; 코드는 모든 유효성 검사 규칙을 true (논리 및 - && 사용)로 평가해야합니다. 자세한 외관은 서버 스크립팅 언어에서 그러한 코드를 생성하는 것이 매우 쉽다는 것을 보여줍니다 ... 그러나 이것은 또 다른 기사입니다.

.

보시다시피, 문자열 검증 함수는 다른 기능을 작성하고 이러한 기능과 함께 사용할 수 있습니다.

공통 필드는 웹의 여러 형태, 즉 사용자의 이메일 주소로 필요합니다. 나는 이것을하는 많은 기능을 보았지만 일반적으로 이메일 주소를 확인하는 가장 쉽고 쉬운 방법은 정규 표현식을 사용하는 것입니다.

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

이제 필드를 선택 사항으로 정의 할 수 있도록 기능을 확장합니다.

필요한 이메일을 확인하려면 다음과 같이 호출해야합니다.

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

옵션으로 설정하려면 :

JavaScript는 검증만으로 사용할 수 없지만, 있으면 큰 도움이 될 수 있습니다. HTML에 포함 된 코드가 더 컴팩트할수록 다운로드 시간을 절약하고 검색 엔진이 마음에들 것입니다!
양식 검증 (FAQ) 에 대해 자주 묻는 질문 클라이언트 검증과 서버 측 확인의 차이점은 무엇입니까?
클라이언트 확인은 양식 데이터가 서버로 전송되기 전에 JavaScript를 사용하여 사용자의 브라우저에서 수행됩니다. 즉각적인 피드백을 제공하고 사용자 경험을 향상시킵니다. 그러나 JavaScript를 비활성화하거나 코드를 조작하여 우회 할 수 있으므로 완전히 안전하지는 않습니다.
반면에 양식 데이터를 제출 한 후 서버에서 서버 측 확인은 서버에서 수행됩니다. 사용자가 우회 할 수 없기 때문에 더 안전합니다. 그러나 서버로의 왕복이 필요하므로 성능 및 사용자 경험에 영향을 줄 수 있습니다. 따라서 최상의 보안 및 사용자 경험을 위해 클라이언트 및 서버 측 확인을 모두 사용하는 것이 좋습니다.

PHP에서 양식 검증을 구현하는 방법은 무엇입니까?

PHP는 다양한 양식 검증 기능을 제공합니다. 예를 들어, 다른 필터와 함께 Filter_var () 함수를 사용하여 입력 데이터를 검증하고 정리할 수 있습니다. 다음은 이메일 주소를 확인하는 간단한 예입니다. $ email = $ _post [ "이메일"]; if (! filter_var ($ email, filter_validate_email)) { Echo "유효하지 않은 이메일 형식"; } 이 코드는 제출 된 이메일 주소가 올바르게 형식화되어 있는지 확인합니다. 그렇지 않은 경우 오류 메시지가 표시됩니다.

일반적인 검증 기술은 무엇입니까?

일부 일반적인 검증 기술에는 필수 필드, 길이 제한, 패턴 매칭 및 데이터 유형 검사가 포함됩니다. 필요한 필드는 사용자가 필요한 모든 정보를 채우도록합니다. 길이 제한을 입력 할 수있는 문자 수를 제한합니다. 패턴 일치는 입력이 이메일 주소 또는 전화 번호와 같은 특정 패턴과 일치하는지 확인합니다. 데이터 유형 검사는 입력이 숫자 또는 날짜와 같은 올바른 유형인지 확인합니다.

확인 오류 메시지를 표시하는 방법은 무엇입니까?

클라이언트 확인에 javaScript 또는 PHP를 사용하여 서버 측 확인에 사용하여 확인 오류 메시지를 표시 할 수 있습니다. JavaScript에서는 setCustomValidity () 메소드를 사용하여 사용자 정의 유효성 검사 메시지를 설정할 수 있습니다. PHP에서는 오류 메시지를 변수에 저장하여 양식으로 표시 할 수 있습니다.

확인란을 확인하는 방법은 무엇입니까?

확인란이 선택되었는지 확인하여 확인란을 확인할 수 있습니다. JavaScript에서는 확인 된 속성을 사용할 수 있습니다. PHP에서 확인란 값이 $ _post 또는 $ _get에 표시되는지 확인할 수 있습니다.

드롭 다운 목록을 확인하는 방법은 무엇입니까?

유효한 옵션이 선택되었는지 확인하여 드롭 다운 목록을 확인할 수 있습니다. JavaScript에서는 선택한 인덱스 속성을 사용할 수 있습니다. PHP에서 선택한 값이 유효한 값 배열인지 확인할 수 있습니다.

라디오 버튼을 확인하는 방법은 무엇입니까?

옵션 중 하나가 선택되었는지 확인하여 라디오 버튼을 확인할 수 있습니다. JavaScript에서는 라디오 버튼을 통과하고 확인 된 속성을 사용할 수 있습니다. PHP에서 라디오 버튼 값이 $ _post 또는 $ _get에 표시되는지 확인할 수 있습니다.

날짜를 확인하는 방법은 무엇입니까?

날짜가 올바르게 형식화되어 있는지 확인하여 날짜를 확인하여 날짜를 확인할 수 있으며 실제 날짜인지 확인할 수 있습니다. JavaScript에서는 날짜 개체를 사용할 수 있습니다. PHP에서는 CheckDate () 함수를 사용할 수 있습니다.

파일 업로드를 확인하는 방법은 무엇입니까?

파일 크기, 파일 유형 및 파일 확장을 확인하여 파일 업로드를 확인할 수 있습니다. JavaScript에서는 파일 속성을 사용할 수 있습니다. PHP에서는 $ _files 어레이를 사용할 수 있습니다.

SQL 주입을 방지하는 방법은 무엇입니까?

데이터에서 SQL 코드를 분리하는 사전 처리 된 문 또는 매개 변수화 된 쿼리를 사용하여 SQL 주입을 방지 할 수 있습니다. 이것은 데이터가 코드로 해석되는 것을 방지합니다. PHP에서는 PDO 또는 MySQLI 확장을 사용하여 전처리 문을 실행할 수 있습니다.

위 내용은 클라이언트 측에서 양식 검증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!