먼저 사용할 방식은 jQuery를 이용한 val() 방식을 사용합니다.

조금 코드를 수정하셔서 매개변수로 password 값을 받으셔도 됩니다.

공통 HTML

<input type="text" id="id">
<input type="password" id="password">
<button onclick="chkPW()">signUp</button>

1. 조건

필수 항목

영문(대소문자) 포함

숫자 포함

특수 문자 포함

공백 X

비밀번호 자리 8~20자

function chkPW(){

 var pw = $("#password").val();
 var num = pw.search(/[0-9]/g);
 var eng = pw.search(/[a-z]/ig);
 var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

 if(pw.length < 8 || pw.length > 20){

  alert("8자리 ~ 20자리 이내로 입력해주세요.");
  return false;
 }else if(pw.search(/\s/) != -1){
  alert("비밀번호는 공백 없이 입력해주세요.");
  return false;
 }else if(num < 0 || eng < 0 || spe < 0 ){
  alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
  return false;
 }else {
	console.log("통과"); 
    return true;
 }

}

$("#password").val()을 사용하기 때문에 jQuery 라이브러리 필요

2.조건

필수 항목

영문,숫자,특수문자 중 2가지 혼합 (영문,숫자 = 통과) (특문,숫자 = 통과)

비밀번호 10~20자리

function chkPW(){

 var pw = $("#password").val();
 var num = pw.search(/[0-9]/g);
 var eng = pw.search(/[a-z]/ig);
 var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

 if(pw.length < 10 || pw.length > 20){
  alert("10자리 ~ 20자리 이내로 입력해주세요.");
  return false;
 }else if(pw.search(/\s/) != -1){
  alert("비밀번호는 공백 없이 입력해주세요.");
  return false;
 }else if( (num < 0 && eng < 0) || (eng < 0 && spe < 0) || (spe < 0 && num < 0) ){
  alert("영문,숫자, 특수문자 중 2가지 이상을 혼합하여 입력해주세요.");
  return false;
 }else {
	console.log("통과");	 
 }

}

3.조건

필수 항목

비밀번호 8자리 이상

숫자 포함

영대 문자 포함

영소 문자 포함

특수문자 포함

function chkPW(){

var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;

var pw = $("#password").val();

if(false === reg.test(pw)) {
alert('비밀번호는 8자 이상이어야 하며, 숫자/대문자/소문자/특수문자를 모두 포함해야 합니다.');
}else {
console.log("통과");
}

}

4.조건

특수문자+영문+숫자 혼합

같은 문자 4번 반복 X

아이디 포함 X

function chkPW(){

		var pw = $("#password").val();
		var id = $("#id").val();
	    var checkNumber = pw.search(/[0-9]/g);
	    var checkEnglish = pw.search(/[a-z]/ig);
	 
	    if(!/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/.test(pw)){            
	        alert('숫자+영문자+특수문자 조합으로 8자리 이상 사용해야 합니다.');
	        return false;
	    }else if(checkNumber <0 || checkEnglish <0){
	        alert("숫자와 영문자를 혼용하여야 합니다.");
	        return false;
	    }else if(/(\w)\1\1\1/.test(pw)){
	        alert('같은 문자를 4번 이상 사용하실 수 없습니다.');
	        return false;
	    }else if(pw.search(id) > -1){
	        alert("비밀번호에 아이디가 포함되었습니다.");
	        return false;
	    }else {

		console.log("통과");
		
		}

}

5.헬(끝판)

비밀번호 8자리 이상

숫자 포함

영대 문자 포함

영소 문자 포함

특수문자 포함

공백 X

같은 문자 4번 반복 X

아이디 포함 X

한글 X

function chkPW(){

	var pw = $("#password").val();
	var id = $("#id").val();
		
	var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
	var hangulcheck = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
	 
	if(false === reg.test(pw)) {
	alert('비밀번호는 8자 이상이어야 하며, 숫자/대문자/소문자/특수문자를 모두 포함해야 합니다.');
	}else if(/(\w)\1\1\1/.test(pw)){
	 alert('같은 문자를 4번 이상 사용하실 수 없습니다.');
	 return false;
	 }else if(pw.search(id) > -1){
	 alert("비밀번호에 아이디가 포함되었습니다.");
	  return false;
	 }else if(pw.search(/\s/) != -1){
	 alert("비밀번호는 공백 없이 입력해주세요.");
	 return false;
	 }else if(hangulcheck.test(pw)){
	 alert("비밀번호에 한글을 사용 할 수 없습니다."); 
	 }else {
	 console.log("통과");
	 }

}

끝 마치며..

실컷 설명해놓고 찬 물 끼얹는 소리일 수 있지만 시간이 촉박한 SI가 아닌 이상 프런트인 JavaScript단에서

유효성 검사를 하기보단 백 엔드단에서 하는 것이 바람직합니다.^^