[정규식] 영문 + 숫자 + 특수문자 + 8자리 이상
function validateString(event){
//const pattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~@#$!%*?&])[a-zA-Z\d~@#$!%*?&]+$/
//영문 + 숫자 + 특수문자 정규식
const pattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~@#$!%*?&])[a-zA-Z\d~@#$!%*?&]{8,}$/
//영문 + 숫자 + 특수문자 + 8자리 이상 정규식
return !/[ㄱ-ㅎㅏ-ㅣ가-힣]/.test(event) && pattern.test(event);
//한글 입력 시 false 리턴
}
위의 패턴을 사용하여 유효성 검사를 수행하면 다음과 같은 조건을 충족해야 한다.
- 최소한 1개의 영문 소문자를 포함
- 최소한 1개의 숫자를 포함
- 최소한 1개의 특수문자 포함
- 위 사항 모두 충족 후 8자리 이상
- 한글 입력 불가 (한글 입력 시 false return)
HTML 사용 예시
See the Pen Untitled by 한민우 (@enecjjir-the-flexboxer) on CodePen.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 예시</title>
</head>
<body>
<h1>JavaScript 예시</h1>
<form>
<label for="inputString">문자열:</label>
<input type="text" id="inputString">
<button onclick="validateAndDisplay()">검사</button>
</form>
<p id="result"></p>
<script>
function validateString(input) {
var pattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~@#$!%*?&])[a-zA-Z\d~@#$!%*?&]{8,}$/;
return !/[ㄱ-ㅎㅏ-ㅣ가-힣]/.test(input) && pattern.test(input);
}
function validateAndDisplay() {
var input = document.getElementById("inputString").value;
var isValid = validateString(input);
var resultElement = document.getElementById("result");
if (isValid) {
resultElement.textContent = "유효한 문자열입니다.";
} else {
resultElement.textContent = "유효하지 않은 문자열입니다.";
}
}
</script>
</body>
</html>결과는 <p> 태그에서 출력
반응형
'Dev > JS' 카테고리의 다른 글
| [JS] 사업자등록번호 조회 API 사용하기 (2) | 2024.04.23 |
|---|---|
| [JS] jQuery CDN 방식으로 최신 버전 가져오기 (0) | 2024.04.22 |
| [JS] 클릭한 라디오버튼 계산하기 (0) | 2023.10.05 |
| [JS] 다음 API 사용해 주소 및 우편번호 찾기 (0) | 2023.06.30 |