JavaScript의 비밀번호 유효성 검사 [단계별 설정 설명]

인증 및 권한 부여를 지원하는 모든 웹 사이트는 항상 로그인을 통해 사용자 이름과 비밀번호를 묻습니다. 그렇지 않은 경우 사용자는 다음 세션에 로그인하기 위해 비밀번호를 등록하고 생성해야 하므로 웹사이트는 특정 프로토콜이나 매개변수를 제공하는 경향이 있습니다. 다음 매개변수는 모든 형식의 암호 유효성 검사에 일반적으로 사용됩니다.

• 비밀번호 필드에는 영숫자 입력만 허용됩니다.
• 대문자로 시작해야 합니다.
• 적어도 하나의 대문자 알파벳 암호.
• 암호는 특정 길이여야 합니다.
• 암호에는 하나의 숫자 값을 사용해야 합니다.
• 암호에는 최소 및 최대 길이가 있어야 합니다.

JavaScript의 암호 유효성 검사는 사용자가 암호를 생성할 때 이러한 매개변수를 따르도록 합니다. 합리적으로 강력한 암호를 형성하려면 주어진 조건이 충족되어야 합니다. 암호의 구조는 JavaScript 코드를 사용하는 정규식으로 확인할 수 있습니다.

비밀번호 필드에서 JavaScript를 사용하여 비밀번호 유효성 검사를 처리하려면 아래 단계를 따르십시오.

Javascript의 비밀번호 유효성 검사

1. HTML 양식 만들기

양식에는 이메일, 전화번호 및 비밀번호와 같은 기본 필드가 있어야 합니다. 양식의 구조를 정의하는 HTML 코드의 예를 살펴보겠습니다.

<! DOCTYPE HTML >

< html 언어 = "ko" >

< 머리 >

< 메타 문자 집합 = "UTF-8" >

< 메타 이름 = "viewport" 내용 = "width=device-width, initial-scale=1.0" >

< 제목 > 양식 </ 제목 >

</ 머리 >

< 본체 >

< div 클래스 = "컨테이너" >

< 폼 액션 = “/action_page.php” >

< 레이블 for = “usrname” > 이메일 주소 </ 레이블 >

< 입력 유형 = "텍스트" id = "usrname" 이름 = "usrname" 필수 >

< 레이블 for = "psw" > 비밀번호 </ 레이블 >

< 입력 유형 = "비밀번호" id = "psw" 이름 = "psw" 패턴 = "(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }" title = "최소한 하나의 숫자와 하나의 대문자와 소문자를 포함해야 하며, 최소 8자 이상이어야 합니다." 필수 >

< 입력 유형 = "제출" 값 = "제출" >

</ 형식 >

</ div >

< div id = "메시지" >

< h3 > 비밀번호는 다음을 포함해야 합니다. </ h3 >

< p id = "문자" 클래스 = "잘못된" > A < b > 소문자 </ b > 문자 </ p >

< p id = "capital" class = "invalid" > A < b > 대문자(대문자) </ b > 문자 </ p >

< p id = "숫자" 클래스 = "잘못된" > A < b > 숫자 </ b ></ p >

< p id = "length" class = "invalid" > 최소 < b > 16자 </ b ></ p >

</ div >

</ 본문 >

</ html >

2. CSS 추가

입력 {

너비 : 100% ;

패딩 : 12px ;

테두리 : 1px 솔리드 #ccc ;

테두리 반경 : 4px ;

상자 크기 : 테두리 상자 ;

여백 상단 : 6px ;

여백 하단 : 16px ;

}

/* 제출 버튼 스타일 지정 */

입력 [ 유형 = 제출 ] {

배경색 : #4CAF50 ;

색상 : 흰색 ;

}

/* 입력을 위한 컨테이너 스타일 */

.컨테이너 {

배경색 : #f1f1f1 ;

패딩 : 20px ;

}

#메시지 {

디스플레이 : 없음 ;

배경 : #f1f1f1 ;

색상 : #000 ;

위치 : 상대 ;

패딩 : 20px ;

여백 상단 : 10px ;

}

#메시지 피 {

패딩 : 10px 35px ;

글꼴 크기 : 18px ;

}

.유효한 {

색상 : rgb ( 3 , 184 , 190 );

}

.valid: { 이전

위치 : 상대 ;

왼쪽 : -35px ;

내용 : "&#10004;" ;

}

.잘못된 {

색상 : 빨간색 ;

}

.invalid:앞에 {

위치 : 상대 ;

왼쪽 : -35px ;

내용 : "&#10006;" ;

}

확인: 2021년 최고의 자바스크립트 프레임워크

3. 자바스크립트 추가

var myInput = 문서 . getElementById ( "psw" );

var 문자 = 문서 . getElementById ( "문자" );

var 자본 = 문서 . getElementById ( "자본" );

변수 번호 = 문서 . getElementById ( "숫자" );

var 길이 = 문서 . getElementById ( "길이" )

내 입력 . onfocus = 함수 () {

문서 . getElementById ( "메시지" ). 스타일 . 표시 = "차단" ;

}

내 입력 . onblur = 함수 () {

문서 . getElementById ( "메시지" ). 스타일 . 표시 = "없음" ;

}

내 입력 . onkeyup = 함수 () {

var lowerCaseLetters = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

편지 . 클래스 목록 . 제거 ( "유효하지 않은" );

편지 . 클래스 목록 . 추가 ( "유효한" );

} 다른 {

편지 . 클래스 목록 . 제거 ( "유효한" );

편지 . 클래스 목록 . 추가 ( "유효하지 않은" );

}

var upperCaseLetters = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters )) {

자본 . 클래스 목록 . 제거 ( "잘못된" );

자본 . 클래스 목록 . 추가 ( "유효한" );

} 다른 {

자본 . 클래스 목록 . 제거 ( "유효한" );

자본 . 클래스 목록 . 추가 ( "유효하지 않은" );

}

var 숫자 = / [ 0-9 ] / g ;

if ( myInput . 값 . 일치 ( 숫자 )) {

번호 . 클래스 목록 . 제거 ( "잘못된" );

번호 . 클래스 목록 . 추가 ( "유효한" );

} 다른 {

번호 . 클래스 목록 . 제거 ( "유효한" );

번호 . 클래스 목록 . 추가 ( "유효하지 않은" );

}

if ( myInput . 값 . 길이 >= 8 ) {

길이 . 클래스 목록 . 제거 ( "잘못된" );

길이 . 클래스 목록 . 추가 ( "유효한" );

} 다른 {

길이 . 클래스 목록 . 제거 ( "유효한" );

길이 . 클래스 목록 . 추가 ( "유효하지 않은" );

}

}

JavaScript 코드는 처음에 id로 요소를 가져옵니다. 그 후에는 화면에 표시할 수 있습니다. 또한 주어진 형식으로 암호를 얻기 위한 조건을 실행합니다. 대문자, 소문자, 숫자는 코드에서 생성된 정규식을 통해 검증됩니다.

4. 정규식/REGEX

정규식은 필드에 전달된 리터럴의 원래 조합과 일치하는 패턴입니다. 비밀번호 유효성 검사에서 JavaScript의 정규 표현식을 사용하는 것은 문자열을 식별하고 문자열이 지정된 형식인지 여부를 식별하는 데 필수적인 역할을 합니다. 정규식은 JavaScript 객체입니다. 이러한 정규식은 암호 유효성 검사를 위해 JavaScript 코드에서 슬래시 사이에 작성됩니다.

예: re=/ac-b/

정규 표현식을 사용하여 JavaScript에서 암호 유효성 검사를 작성하는 방법은 무엇입니까?

정규식은 특수 문자와 결합된 단순 문자로 구성됩니다. 정규식은 강력한 암호의 매개변수 또는 제약 조건에 따라 형성됩니다. 특수 문자는 문자열이나 문자의 어려운 일치가 있을 때 사용됩니다.

위에서 설명한 JavaScript 코드는 정규식을 사용하여 대문자 알파벳, 소문자 알파벳 및 숫자를 찾습니다. 표현은 다른 시퀀스와 하위 시퀀스로 만들어집니다. 정규식에 사용되는 각 문자에 대한 특정 규칙이 있습니다.

예: 숫자=/[0-9]/g라고 하자. 0-9 범위의 숫자를 허용합니다.

확인: Github의 Javascript 프로젝트

세계 최고의 대학에서 온라인으로 소프트웨어 과정을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

결론

비밀번호 유효성 검사는 사용자가 강력한 비밀번호를 생성하고 잠재적인 비밀번호 균열을 방지할 수 있도록 하므로 매우 중요합니다. JavaScript를 사용하면 상호 작용을 추가할 수 있으므로 암호가 순서에 관계없이 필요한 모든 문자를 가질 때까지 사용자에게 알릴 수 있습니다. JavaScript로 코딩된 정규식은 시퀀스를 정의하는 데 중요한 역할을 합니다. 작성된 매개변수를 JavaScript 코드로 가져옵니다.

전체 스택 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 이그 제 큐 티브 PG 프로그램을 확인하십시오. 이 프로그램은 일하는 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제를 제공합니다. , IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.