사용자에게 비밀번호를 설정하도록 요청하는 온라인 양식을 작성할 때 비밀번호 확인 필드를 포함해야 합니다. 암호 필드는 기본적으로 사용자의 입력을 숨기므로 사용자가 오타 없이 올바른 암호를 작성했는지 확인할 수 있는 일종의 메커니즘이 필요합니다. 암호 확인 필드는 사용자가 문자를 잘못 입력하고 암호와 암호 확인 필드가 일치하지 않는 경우 암호를 다시 확인하라는 메시지를 표시합니다.
이 게시물에서 우리의 목표는 사용자의 입력과 일치하는 HTML 양식을 만드는 것입니다. 비밀번호 그리고 비밀번호 확인 필드에 사용자가 올바른 암호를 입력했는지 또는 오타가 있는지 확인합니다.
1단계: HTML 양식
첫 번째 단계는 사용자의 입력을 받는 HTML 양식을 만드는 것입니다.
< 센터 >
< h2 > 리눅스 힌트 h2 >
< 형태 >
< 피 > 암호를 입력 피 >
< 입력 유형 = '비밀번호' ID = '통과하다' > < 브 >< 브 >
< 피 > 비밀번호 확인 피 >
< 입력 유형 = '비밀번호' ID = '확인하다' > < 브 >< 브 >
< 단추 유형 = '제출하다' 클릭 = '비밀번호 확인()' > 통나무 안에 단추 >
형태 >
센터 >
비밀번호 유형의 두 입력 필드와 다음을 호출하는 로그인 버튼이 있는 간단한 HTML 양식을 만들었습니다. 비밀번호 확인() 클릭했을 때의 기능입니다.
2단계: JavaScript 양식 유효성 검사
이제 내부에 JavaScript 코드를 작성합니다. 비밀번호 확인() 암호를 확인하는 함수:
기능 비밀번호 확인 ( ) {
var 암호 = document.getElementById ( '통과하다' ) .값;
var 확인비밀번호 = document.getElementById ( '확인하다' ) .값;
만약에 ( 비밀번호 == '' ) {
알리다 ( '오류: 암호 필드가 비어 있습니다.' ) ;
} 또 다른 만약에 ( 비밀번호 == 확인비밀번호 ) {
알리다 ( '로그인' ) ;
} 또 다른 {
알리다 ( '비밀번호가 일치하는지 확인하십시오.' )
}
}
내부 비밀번호 확인() 함수를 사용하려면 먼저 암호 값을 가져오고 암호 필드를 확인하고 변수 안에 저장합니다. 그런 다음 조건문을 사용하여 다양한 경우를 확인합니다.
사례 1: 비밀번호 필드가 비어 있음
첫 번째 조건은 암호 필드가 비어 있는지 확인합니다. 필드가 비어 있으면 사용자에게 암호를 입력하라는 메시지가 표시됩니다.
사례 2: 비밀번호 일치
비밀번호가 일치하는 경우 사용자가 성공적으로 로그인합니다.
사례 3: 비밀번호가 일치하지 않음
비밀번호가 일치하지 않으면 사용자에게 비밀번호를 다시 입력하고 일치하는지 확인하도록 요청합니다.
JavaScript와 HTML 코드를 함께 보면 다음과 같습니다.
< HTML >
< 신체 >
< 센터 >
< h2 > 리눅스 힌트 h2 >
< 형태 >
< 피 > 암호를 입력 피 >
< 입력 유형 = '비밀번호' ID = '통과하다' > < 브 >< 브 >
< 피 > 비밀번호 확인 피 >
< 입력 유형 = '비밀번호' ID = '확인하다' > < 브 >< 브 >
< 단추 유형 = '제출하다' 클릭 = '비밀번호 확인()' > 통나무 안에 단추 >
형태 >
센터 >
신체 >
< 스크립트 >
기능 비밀번호 확인 ( ) {
var 암호 = document.getElementById ( '통과하다' ) .값;
var 확인 암호 = 문서.getElementById ( '확인하다' ) .값;
만약에 ( 비밀번호 == '' ) {
알리다 ( '오류: 암호 필드가 비어 있습니다.' ) ;
} 또 다른 만약에 ( 비밀번호 == 확인비밀번호 ) {
알리다 ( '로그인' ) ;
} 또 다른 {
알리다 ( '비밀번호가 일치하는지 확인하십시오.' )
}
}
스크립트 >
HTML >
결론
인간은 종종 실수를 할 수 있지만 그렇다고 해서 계정에 로그인하는 것을 금지해서는 안 됩니다. 비밀번호를 입력하는 데 있어 사소한 실수라도 사용자의 계정 액세스를 제한할 수 있습니다. 따라서 항상 사용자의 비밀번호를 다시 확인하여 올바른 비밀번호를 입력했는지 확인하는 것이 좋습니다.