[HTML + CSS] jquery validate input 태그 비밀번호 조합 설정

 

 

1. 목적

 

  회원가입이 최근에 다양한 방법의 문자조합을 가지고 있습니다.

비밀번호를 SHA-256으로 암호화 하여 복호화가 힘들게 하였으나 빅데이터로 인하여 간단한 조합으로 만들어진 비밀번호는 복호화가 가능합니다. 최근 많은 웹페이지 회원가입에 영문자 뿐만이 아닌 숫자나 특수문자를 추가하라는 문구를 많이 보셨을 겁니다. 간단하게 만든 비밀번호는 복호화로 원래 비밀번호가 무엇인지 파악 가능하며 매크로 프로그램을 통해 암호가 유출될 수 있습니다. 개인정보 유출을 막기위하여 회원가입에 필수적으로 input Tag에 숫자와 특수문자를 추가하도록 만들어 보겠습니다.

 

 

2. 설정방법

 

  이전에 jquery를 이용하여 유효성 검사에 추가하여 만들어 보았습니다. 이번에 설정하시면서 jquery validate 검사 방법까지 알아가시면 일석이조의 효과를 가져가실 수 있습니다.

 

<style type="text/css"> #registerForm label.error { margin-left: 10px; color: red; } </style> <script src="http://code.jquery.com/jquery-1.3.2.min.js"></script> <!-- jQuery.validate 플러그인 삽입 --> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //기본형태 //$('#registerForm').validate(); //유효성 검사를 적용 // validate signup form on keyup and submit //확장옵션 $('#registerForm').validate({ rules : { txtID : { required : true, minlength : 3, remote : "Validate" }, txtPassword : { required : true, passwordCk : true, minlength : 8, maxlength : 16 }, txtPasswordConfirm : { required : true, equalTo : '#txtPassword' }, txtName : { required : true }, txtEmail : { required : true, email : true }, txtAge : { required : true, range : [ 1, 100 ] } // 1~100범위 }, messages : { txtID : { required : "아이디를 입력하시오.", minlength : jQuery.format("아이디는 {0}자 이상 입력해주세요!"), remote : jQuery.format("입력하신 {0}는 이미존재하는 아이디입니다. ") }, txtPassword : { required : "암호를 입력하시오.", passwordCk : "비밀번호는 영문자, 숫자, 특수문자 조합을 입력해야 합니다.", minlength : jQuery.format("암호는 {0}자 이상 입력해주세요!"), maxlength : jQuery.format("암호는 {0}자 이하 입력해주세요!") }, txtPasswordConfirm : { required : "암호확인를 입력하시오.", equalTo : "암호를 다시 확인하세요" }, txtName : { required : "이름을 입력하시오." }, txtEmail : { required : "이메일을 입력하시오.", email : "올바른 이메일을 입력하시오." }, txtAge : { range : "나이는 1~100" } }, submitHandler : function(frm) { frm.submit(); //유효성 검사를 통과시 전송 }, success : function(e) { // } }); $.validator.addMethod("passwordCk", function( value, element ) { return this.optional(element) || /^.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/.test(value); }); }); //end ready() </script>

 

style 태그는 유효성에 어긋날 때의 스타일 입니다. 밑 cdn은 jquery validate 플러그인을 사용하기 위해 필요하며 C언어의 헤더파일이라 생각하시면 됩니다. ready메소드는 웹페이지가 시작하기전에 실행하도록 하는 함수이며 첫번째로 규칙을 설정해줍니다. 두번째는 규칙에 어긋날 때 메세지를 보여주는 형식을 작성해줍니다. passwordCK는 우선 제외하며 rules 내의 txtID, txtPassword등  input 태그 id 값을 의미하며 option들을 정의해줍니다. 상세한 정보들은 https://jqueryvalidation.org/validate/ 홈페이지에서 확인 가능합니다. message 는 옵션에 유효하지 않을 때 메시지를 보여주기위한 수단입니다.

 

 

<table class="board_view input-group" style="margin: 0 auto; text-align: right"> <tbody> <tr style="height: 60px"> <td class="td-size">이메일 :</td> <td style="text-align: left"><input class="form-control" type="text" id="txtEmail" name="txtEmail" placeholder="이메일를 입력하세요" /></td> </tr> <tr style="height: 60px"> <td class="td-size">이름 :</td> <td style="text-align: left"><input class="form-control" placeholder="이름을 입력하세요" type="text" id="txtName" name="txtName"></input></td> </tr> <tr style="height: 60px"> <td class="td-size">비밀번호 :</td> <td style="text-align: left"><input class="form-control" placeholder="패스워드를 입력하세요" type="password" id="txtPassword" name="txtPassword"></input></td> </tr> <tr style="height: 60px"> <td class="td-size">비밀번호 재입력 :</td> <td style="text-align: left"><input class="form-control" placeholder="패스워드 확인" type="password" id="txtPasswordConfirm" name="txtPasswordConfirm"></input></td> </tr> <tr style="height: 60px"> <td class="td-size">직업 :</td> <td style="text-align: left"><input class="form-control" placeholder="직업을 입력해주세요" type="text" id="JOB" name="job"></input></td> </tr> </tbody>

 

테이블에 input을 넣어 사용했습니다. 테스트 해보시면 될 것 같습니다.

 

 

3. 결과

 

 

 

$.validator.addMethod("passwordCk",  function( value, element ) {
   return this.optional(element) ||  /^.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/.test(value);
});

 

 

이 메소드는 비밀번호 입력할 때 영문자, 숫자, 특수문자를 꼭 넣어주어야 하는 jquery입니다.

 

 

 

참고 : http://trandent.com/board/javascript/detail/627