반응형
jquery.validate.js를 사용하여 비밀번호 변경하기
1. 개요
- jquery.validate.js 기능을 사용하여 아래와 같은 기능을 구현해본다.
2. CDN및 플러그인 다운로드
- 아래사이트에 접속하여 라이브러리 다운로드를 받는다.
- 본인은 아래와 같이 사용중에 있다.
- https://jqueryvalidation.org
3. html소스
- 아래와 같이 소스를 참고한다.
<form name="pwChangeForm" id="pwChangeForm" method="post" action="#a">
<div>
<div class="item">
<label class=itemTit>현재 비밀번호 입력 </label>
<input type="password" name="currentPw" id="currentPw" maxlength="30" tabindex="1" placeholder="현재 비밀번호를 입력하십시오." autocomplete="off"/>
</div>
<div class="item">
<label class=itemTit>새 비밀번호 입력 </label>
<input type="password" name="newPw" id="newPw" maxlength="30" tabindex="2" placeholder="새 비밀번호를 입력하십시오." autocomplete="off"/>
</div>
<div class="item">
<label class=itemTit>새 비밀번호 확인</label>
<input type="password" name="verifyPw" id="verifyPw" maxlength="20" tabindex="3" placeholder="새 비밀번호를 한번더 입력하십시오." autocomplete="off" />
</div>
<div class="loginBtnBox">
<button type="button" id="btnChange" name="btnChange" class="Btn01">비밀번호 변경</button>
</div>
</div>
</form>
4. javascript 주요코드
- 아래와 같이 소스를 참고한다.
var jvalidate;
$(document).ready(function () {
jvalidate = $("#pwChangeForm").validate({
ignore: [],
rules: {
currentPw: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
remote: {
url: "/login/pw_change",
type: "post",
async: false,
dataType: "json",
data: { 'userId':function(){return $('#userId').val()},
'currentPw':function(){return $('#currentPw').val()}
}
}
},
newPw: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
rangelength: [8,20],
pwRegexp: true
},
verifyPw: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
equalTo: "#newPw"
}
},
messages: {
currentPw: {
required: '현재 비밀번호를 입력하십시오.',
remote: '현재 비밀번호가 일치하지 않습니다.'
},
newPw: {
required: '새 비밀번호를 입력하십시오.'
},
verifyPw: {
required: '새 비밀번호를 한번더 입력하십시오.',
equalTo : '새 비밀번호를 동일하게 입력해주십시오.'
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.item').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
},
});
});
const js_reg_exp_password= /([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?])|([!,@,#,$,%,^,&,*,?].*[a-zA-Z0-9])/;
$.validator.addMethod('pwRegexp', function(response) {
return js_reg_exp_password.test($("#newPw").val())
}, '영문, 숫자, 특수문자 모두포함 8~20자리를 입력하십시오.');
5. currentPw항목 url에대한 백엔드 정보
- remote 기능을 통하여 backend서버로 파라메터를 전송한다.
- backend에서는 return 값으로 true 또는 false 의 boolean 형태로 리턴해줘야 한다.
@RequestMapping(value="/pw_change")
@ResponseBody
public boolean selectPwChange(@RequestParam Map<String, Object> map
, HttpServletRequest request, HttpServletResponse response) throws Exception {
boolean result = loginService.selectPwChange(map);
return result;
}
6. css코드
- invalid-feedback와 is-invalid 두가지만 추가해주면 된다.
- bootstrap css를 다운받으면 기본적으로 추가되어 있는 경우가 많다.
- 만약에 디자인이 틀어질경우 디자이너 요청바란다. 여타 다른 css와 겹치는 부분이 있을수 있으니..
.is-invalid{
padding: 20px 20px 20px 20px !important;
border-radius: 10px !important;
border: 1px solid #EF534F !important;
background: #ffffff !important;
}
.is-invalid:focus{
outline: #EF534F !important;
}
.item:valid:focus, .item.is-valid:focus {
border-color: #28a745;
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.25);
}
.invalid-feedback {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #dc3545;
}
7. 동작방법
//1.버튼클릭
<button type="button" id="btnChange" name="btnChange" class="Btn01">비밀번호 변경</button>
//2.스크립트
$(function(){
$("#btnChange").click(function(){
fn_Change();
});
});
function fn_Change(){
if($("#pwChangeForm").valid()) {
$("#pwChangeForm").attr("action","비밀번호 변경 URL").attr('method', 'post').submit();
}
}
8. 별도 메시지 커스텀이 필요한 경우
- addCustomErrorMessage 함수를 선언한다.
- 아래와 같은 형식으로 사용할수 있다.
- addCustomErrorMessage('loginForm', 'userPw', '아이디 또는 비밀번호가 일치하지 않습니다.');
function addCustomErrorMessage(formId, elementId, message) {
var validator = $("#" + formId).validate();
validator.showErrors({
[elementId]: message
});
}
9. 결과화면
반응형