Bootstrap의 Validation 플러그인?? 사용해서 폼 체크 + 표현식으로 기호입력 허가하기

Cakephp3 에서도 폼 값을 체크해주는 기능이 있지만...모델 레벨에서 체크하므로 여러가지 문제가 발생하더라.

(https://book.cakephp.org/3.0/en/core-libraries/validation.html)

내 경우에는 패스워드...길이를 지정했더니 암호화가 되어서 60자가 되어버리니 에러가 나면서 디비에 저장이 안 됨..

게다가 특정 문자만 입력 가능하게 하려고 표현식을 추가했더니만..이것도 암호화 되는 와중에 특수문자가 섞여 들어가면서 에러.

회사 선배님 말씀에 따르면 자, 디비에 들어가기 전에 클라이언트 쪽에서 체크해서 넘기면? 될까?? ㅋ

자바스크립트도 제이쿼리도 자신없던 나에게 그나마 쓸만한게 있었으니 바로 Bootstrap의 Validation 플러그인 되시겠다.

최신 버전은 유료화 되어버렸네...ㅎㅎ

무료 버전은 여기서 소스코드 다운받을 수 있다..

https://github.com/nghuuphuoc/bootstrapvalidator

src 폴더에서 js와 css 폴더에 있는 bootstrapvalidator.js / bootstrapvalidator.css 를 받아서 프로젝트 폴더에 위치시킨 후 필요한 페이지에서 불러온다.

다음에는 폼 체크를 위해서 다음 소스코드를 수정하여 페이지에 붙이거나 별도의 js 파일을 만들어서 내용을 수정한 후 폼 체크가 필요한 곳에 파일을 불러오면 된다. 내 경우에는 걍 디폴트 페이지에 박아버렸다...귀차니즘..홓홓

> default.ctp

<!-- 다른 소스코드는 생략 -->     <?= $this->Html->css('/bootstrap/css/bootstrap.css'); ?>     <?= $this->Html->css('/bootstrap/css/bootstrapvalidator.css'); ?>     <?= $this->Html->script(['jquery/jquery.js', '/bootstrap/js/bootstrap.js', '/bootstrap/js/bootstrapvalidator.js']); ?>     <?= $this->fetch('css') ?>     <?= $this->fetch('script') ?>

예를 들어 내 경우에는 

passwordChange.ctp 파일에서 패스워드 값을 입력받고 새로운 패스워드와 확인용 패스워드를 받아서 비교한 후 일치하면 디비의 패스워드를 갱신하려고 했다.

그러므로, ctp 파일에서 다음과 같이 자바 스크립트 파일을 불러온다.

> passwordChange.ctp

<?= $this->Html->script('/bootstrap/js/formCheck.js'); ?>

실제적으로 폼을 체크하는 소스코드는 다음과 같다.

> formCheck.js

$(function() {         $('form').bootstrapValidator({             live: 'enabled',             feedbackIcons: {                 valid: 'glyphicon glyphicon-ok',                 invalid: 'glyphicon glyphicon-remove',                 validating: 'glyphicon glyphicon-refresh'             },             fields: {               customer_no: {                 validators: {                     notEmpty: { message: '顧客番号は必須項目です' },                     stringLength: { message: '8文字以内で入力してください',min: 6, max: 8 }                 }               },               account: {                 validators: {                     notEmpty: { message: 'アカウントは必須項目です' },                     stringLength: { message: '6~20文字以内で入力してください', min: 6, max: 20 }                 }               },               password_now: {                 validators: {                     notEmpty: { message: 'パスワードは必須項目です' },                     stringLength: { message: '6~32文字以内で入力してください', min: 6, max: 32 },                     regexp: { message: '半角英数字と記号を入力してください', regexp: /^[a-zA-Z0-9!#$%&()*+,.:;=?@\[\]^_{}-]+$/ }                 }               },               password_new: {                 validators: {                     notEmpty: { message: 'パスワードは必須項目です' },                     stringLength: { message: '6~32文字以内で入力してください', min: 6, max: 32 },                     regexp: { message: '半角英数字と記号を入力してください', regexp: /^[a-zA-Z0-9!#$%&()*+,.:;=?@\[\]^_{}-]+$/ }                 }               },               password_check: {                 validators: {                     notEmpty: { message: 'パスワードは必須項目です' },                     stringLength: { message: '6~32文字以内で入力してください', min: 6, max: 32 },                     regexp: { message: '半角英数字と記号を入力してください', regexp: /^[a-zA-Z0-9!#$%&()*+,.:;=?@\[\]^_{}-]+$/ }                 }               }             }         });     });

fields 안에 있는 폼 이름(필드명)을 수정하고 옵션값 만지면 바로 이용이 가능하다.

윗 부분에 live : enabled 라고 되어있는데 이렇게 설정하면 값을 입력하면 실시간으로 체크를 해 주니 편리하다.

참고로, regexp 라고 되어 있는 부분이 표현식인데, 영문소/대문자, 숫자와 각종 특수문자를 입력할 수 있게 되어있다.

잘 몰라서 열심히 찾아서 붙여넣기 한 것이지만..;;; 필요한 부분만 수정해서 사용 가능하며 웹에서도 찾아보면 양식이 잘 나와있다.

하아...뭔가 압박이 몰려온다...