Home-theater-designers
JavaScript는 오늘날 시작할 수 있는 가장 인기 있고 다재다능한 프로그래밍 언어 중 하나입니다. 이 프로그래밍 언어는 당연히 웹의 언어라고 하며 웹사이트에 상호 작용을 추가하는 데 필수적입니다.
form 요소는 웹사이트에서 가장 많이 사용되는 HTML 요소 중 하나입니다. 이러한 양식은 사용자로부터 입력을 받아 브라우저나 서버에서 처리합니다. 그러나 보안 문제와 원치 않는 버그를 해결하려면 이러한 입력을 검증하는 것이 중요합니다.
DOM 조작 이해
JavaScript로 클라이언트 측 양식 유효성 검사를 구현하기 전에 일반적으로 'DOM'으로 알려진 문서 개체 모델을 이해하는 것이 중요합니다. DOM은 JavaScript가 HTML 웹 페이지의 요소와 상호 작용할 수 있도록 하는 표준화된 API입니다.
자세히 알아보기: 웹사이트의 숨겨진 영웅: DOM 이해
이벤트 리스너를 추가하고 사용자 입력을 검색하려면 DOM 조작의 기본 사항을 이해해야 합니다. 다음은 DOM API 및 JavaScript를 사용하여 웹페이지의 콘텐츠를 변경하는 방법을 설명하는 예입니다.
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
위의 코드에서,
DOM 조작의 기본을 이해했으므로 이제 양식 유효성 검사를 구현해 보겠습니다.
JavaScript를 사용한 양식 유효성 검사
사용자로부터 다양한 유형의 입력을 받을 수 있습니다. 텍스트 유형, 이메일 유형, 비밀번호 유형, 라디오 버튼 및 확인란은 가장 흔히 접할 수 있는 항목입니다. 이러한 대부분의 입력 유형으로 인해 각각의 유효성을 검사하려면 다른 논리를 사용해야 합니다.
유효성 검사에 대해 알아보기 전에 HTML 양식과 그 중요성에 대해 잠시 알아보겠습니다. HTML 양식은 데이터를 입력하고, 변경 사항을 적용하고, 팝업을 호출하고, 서버에 정보를 제출하는 등의 작업을 수행할 수 있도록 하는 웹 사이트와 상호 작용하는 주요 방법 중 하나입니다.
영화를 무료로 볼 수 있는 앱
HTML 요소는 이러한 사용자 대면 양식을 만드는 데 사용됩니다. HTML 양식의 입력을 확인하는 방법은 다음과 같습니다.
1. 이메일 인증
인증 시스템을 구축하거나 뉴스레터에 대한 사용자 이메일을 수집하는 경우 이메일을 데이터베이스에 저장하거나 처리하기 전에 이메일을 확인하는 것이 중요합니다. 이메일이 모든 필수 조건을 충족하는지 확인하려면 다음을 사용할 수 있습니다. 정규식 .
HTML:
자바스크립트:
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. 비밀번호 확인
암호는 보안을 보장하기 위해 특별한 유형의 유효성 검사가 필요한 중요한 데이터 조각입니다. 비밀번호 및 비밀번호 확인 필드의 두 필드가 있는 가입 양식을 고려하십시오. 이러한 입력 쌍의 유효성을 검사하려면 다음 사항을 고려해야 합니다.
- 비밀번호는 6자 이상이어야 합니다.
- 비밀번호와 비밀번호 확인 필드의 값은 동일해야 합니다.
HTML:
자바스크립트:
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}3. 무선 입력 검증
HTML 라디오 입력은 사용자가 미리 정의된 상호 배타적 옵션 세트 중 하나만 선택할 수 있는 특수한 유형의 그래픽 제어 요소입니다. 이러한 입력의 일반적인 사용 사례는 성별을 선택하는 것입니다. 이러한 입력을 확인하려면 그 중 하나 이상이 선택되었는지 확인해야 합니다.
이것은 다음을 사용하여 달성할 수 있습니다. 논리 연산자 AND( && ) 및 NOT( ! ) 연산자는 다음과 같습니다.
HTML:
Male
Female
Others
자바스크립트:
const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!'); 4. 입력 검증 선택
NS HTML 요소는 드롭다운 목록을 만드는 데 사용됩니다. NS 내부의 태그 요소는 드롭다운 목록에서 사용 가능한 옵션을 정의합니다. 이들 각각 태그에는 연관된 값 속성이 있습니다.
C++은 여전히 사용 중입니까?
기본 또는 초기 옵션의 경우 해당 값을 빈 문자열로 설정하여 유효하지 않은 옵션으로 간주할 수 있습니다. 다른 모든 옵션에 대해 적절한 값 속성을 설정하십시오. 다음은 유효성을 검사하는 방법의 예입니다. 입력 요소:
HTML:
Select One
Mr
Mrs
Ms
자바스크립트:
애니메이션 배경 화면을 얻는 방법 Windows 10
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. 체크박스 확인
유형 확인란의 입력 요소는 기본적으로 활성화될 때 선택되거나 선택되는 상자로 렌더링됩니다. 확인란을 사용하면 양식에서 제출할 단일 값을 선택할 수 있습니다. 확인란은 '이용 약관에 동의' 입력에 대해 널리 사용되는 선택입니다.
확인란이 선택되었는지 확인하려면 확인란 입력에서 checked 속성에 액세스할 수 있습니다. 다음은 예입니다.
HTML:
I agree to the terms and conditions자바스크립트:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
예방이 치료보다 낫다
안전하고 안전한 경험을 제공하기 위해 방문자로부터 받는 모든 입력의 유효성을 항상 확인하는 것이 좋습니다. 해커는 항상 입력 필드에 악성 데이터를 입력하여 사이트 간 스크립팅 공격과 SQL 주입을 수행하려고 합니다.
이제 HTML 입력의 유효성을 검사하는 방법을 이해했으므로 양식을 작성하고 위에서 본 전략을 구현하여 시도해 보시지 않겠습니까?
공유하다 공유하다 트위터 이메일 HTML에서 양식을 만드는 방법사용자가 HTML 양식을 사용하여 웹사이트에 데이터를 입력할 수 있습니다.
다음 읽기 관련 항목- 프로그램 작성
- HTML
- 자바스크립트
- 웹 개발
- 코딩 튜토리얼
Nitin은 열렬한 소프트웨어 개발자이자 JavaScript 기술을 사용하여 웹 애플리케이션을 개발하는 컴퓨터 공학 학생입니다. 그는 프리랜서 웹 개발자로 일하고 있으며 여가 시간에는 Linux 및 프로그래밍에 대한 글을 쓰는 것을 좋아합니다.
Nitin Ranganath가 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.