js의 양식에서 간단한 비밀번호 확인을 수행하는 방법은 무엇입니까? (코드 예)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

js의 양식에서 간단한 비밀번호 확인을 수행하는 방법은 무엇입니까? (코드 예)

青灯夜游

Nov 06, 2018 pm 12:57 PM

js비밀번호 확인양식 유효성 검사

이 글의 내용은 폼 비밀번호의 간단한 검증을 수행하는 js를 소개하는 것인가요? (코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 이해해야 합니다. 비밀번호를 안전하게 입력하는 방법은 무엇인가요?

현재 많은 웹사이트에서 등록이 필요합니다. 이는 사용자에게 사용자 이름과 비밀번호를 할당해야 함을 의미합니다. 다음은 프로세스를 더욱 안전하게 만드는 몇 가지 간단한 단계입니다.

"password" 입력 유형을 사용하세요

대신 를 사용하세요. 이렇게 하면 브라우저(및 사용자)가 비밀번호를 알 수 있습니다. 이 필드의 내용은 보호되어야 합니다.

비밀번호는 입력할 때 화면에 나타나지 않으며 대부분의 브라우저는 다른 양식 요소처럼 비밀번호 필드에 입력한 값을 "기억"하지 않습니다.

모바일 장치와 같은 경우에는 비밀번호를 표시하면 보안을 손상시키지 않고 사용성을 향상시킬 수 있습니다. 결국 브라우저 표시만 난독화되고 데이터는 전송되지 않습니다.

비밀번호 입력 확인

비밀번호 입력 유형은 입력한 텍스트를 모호하게 하므로 사용자가 실수하지 않았는지 확인하도록 해야 합니다. 가장 쉬운 방법은 비밀번호를 두 번 입력하고 동일한지 확인하는 것입니다.

또 다른 방법은 "확인 페이지"의 일부로 입력한 내용을 표시하는 것입니다. 여기서 문제는 귀하의 비밀번호가 브라우저, 브라우저 캐시, 프록시 등에 표시된다는 것입니다. 보안상의 이유로 비밀번호를 HTML 형식으로 표시하거나 이메일을 통해 전송해서는 안 됩니다.

"강력한" 비밀번호 시행(복잡한 비밀번호)

보안이 염려된다면 유효한 비밀번호를 구성하는 것에 대한 몇 가지 정책이 있어야 합니다. 몇 가지 일반적인 제한 사항은 다음과 같습니다.

2. 대문자와 소문자의 조합

4. 사용자 이름, ...);

이제 서버 측 스크립트가 필요하므로 마지막 요구 사항을 남겨두고 클라이언트 측 HTML 및 JavaScript를 사용하여 가능성을 살펴보겠습니다.

서버 보안

복잡한 비밀번호를 사용하는 것이 좋은 첫 번째 단계이지만 무차별 대입 공격을 방지하려면 서버에서 백업을 위한 추가 단계를 수행해야 합니다. 널리 사용되는 방법 중 하나는 Fail2Ban을 설치하여 로그 파일을 모니터링하고 반복되는 오류를 차단하는 것입니다. 물론 이는 로그인 시스템이 실패한 로그인 시도를 시스템 로그 파일에 보고하는 경우에만 작동합니다. 그렇지 않으면 애플리케이션에서 이 기능을 제공해야 합니다.
비밀번호는 데이터베이스나 다른 곳에 암호화되어 저장되어야 하며 모든 백업도 암호화되어야 합니다.

js를 사용하여 간단한 양식 확인
작업

을 구현해 보겠습니다. 아래 양식에는 사용자 이름, pwd1 및 pwd2의 세 가지 입력 필드가 있습니다. 양식이 제출되면 checkForm 스크립트는 입력 값을 구문 분석하고 true 또는 false를 반환합니다. 잘못된 값이 반환되면 양식 제출이 취소됩니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			function checkForm(form) {
				if(form.username.value == "") {
					alert("错误：用户名不能为空！");
					form.username.focus();
					return false;
				}
				re = /^\w+$/;
				if(!re.test(form.username.value)) {
					alert("错误：用户名必须只包含字母、数字和下划线！");
					form.username.focus();
					return false;
				}

				if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
					if(form.pwd1.value.length < 6) {
						alert("错误：密码必须至少包含六个字符！");
						form.pwd1.focus();
						return false;
					}
					if(form.pwd1.value == form.username.value) {
						alert("错误：密码必须与用户名不同！");
						form.pwd1.focus();
						return false;
					}
					re = /[0-9]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误：密码必须包含至少一个数字（0至9）！");
						form.pwd1.focus();
						return false;
					}
					re = /[a-z]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误：密码必须包含至少一个小写字母(a-z)!");
						form.pwd1.focus();
						return false;
					}
					re = /[A-Z]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误：密码必须包含至少一个大写字母(A-Z)!");
						form.pwd1.focus();
						return false;
					}
				} else {
					alert("错误：请检查并确认您输入的密码是否一致！");
					form.pwd1.focus();
					return false;
				}

				alert("You entered a valid password: " + form.pwd1.value);
				return true;
			}
		</script>
	</head>

	<body>
		<form onsubmit="return checkForm(this);">
			<p>用户名: <input type="text" name="username"></p>
			<p>密 码: <input type="password" name="pwd1"></p>
			<p>确认密码: <input type="password" name="pwd2"></p>
			<p><input type="submit"></p>
		</form>
	</body>

</html>

렌더링:

입력한 두 비밀번호가 일치하지 않으면 오류가 보고됩니다.

js의 양식에서 간단한 비밀번호 확인을 수행하는 방법은 무엇입니까? (코드 예)

JavaScript를 모든 브라우저에서 사용할 수는 없으므로 데이터는 서버측에서 기록된다는 점을 기억하세요. 데이터베이스나 다른 곳으로 이동하기 전에 모든 데이터의 유효성을 검사하는 데에도 스크립트를 사용해야 합니다.

js의 양식에서 간단한 비밀번호 확인을 수행하는 방법은 무엇입니까? (코드 예) 요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 js의 양식에서 간단한 비밀번호 확인을 수행하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

See all articles