비밀번호 재검사

script

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

$('#pw1').blur(function(){

if($('#pw1').val() != $('#pw2').val()){

$('font[name=no]').text('');

$('font[name=yes]').html("암호가 틀립니다.");

$("#submit").attr("disabled", "disabled");

}else{

$('font[name=yes]').text('');

$('font[name=no]').html("암호가 일치합니다.");

$("#submit").removeAttr("disabled");

}

}); // #pw1.keyup

$('#pw2').blur(function(){

if($('#pw1').val() != $('#pw2').val()){

$('font[name=yes]').text('');

$('font[name=no]').html("암호가 틀립니다.");

$("#submit").attr("disabled", "disabled"); // 암호가 틀릴시 회원가입 버튼 비활성화

}else{

$('font[name=no]').text('');

$('font[name=yes]').html("암호가 일치합니다.");

$("#submit").removeAttr("disabled"); // 암호가 일치할시 회원가입 버튼 활성화

}

}); // #pw2.keyup

});

</script>

jsp

<tr>

<td>PASSWORD</td>

<td><input type="text" name="password" id="pw1" required /></td>

</tr>

<tr>

<td>REPASSWORD</td>

<td>

<input type="text" name="repassword" id="pw2" required />

<font name ="check" size="2" color="red"></font>

<font name ="yes" size="2" color="green"></font>

</td>

</tr>

tip

$("셀렉터").html() : 셀렉터 태그 내에 존재하는 자식 태그를 통쨰로 읽어올 때 사용하는 함수 (태그 동적추가할때 주로 사용되는 함수)

$("셀렉터").text() :  셀렉터 태그 내에 존재하는 자식 태그들 중에 html 태그는 모두 제외 한 채 문자열만 출력하고자 할 때 사용되는 함수

  (html태그까지 모두 문자로 인식시켜 주는 함수)

$("셀렉터").val() : INPUT 태그에 정의된 value속성의 값을 확인하고자 할 때 사용되는 함수

HTML 태그

<label>비밀번호</label>

<input type="text" name="password" id="pw1" class="form-control" required />

<br>

<label>재확인</label>

<input type="text" name="repassword" id="pw2" class="form-control" required />

<br>

id값을 각각 "pw1", "pw2"로 설정

경고글

<div class="alert alert-success" id="alert-success">비밀번호가 일치합니다.</div>

<div class="alert alert-fail" id="alert-fail">비밀번호가 일치하지 않습니다.</div>

JQeury를 이용한 값 비교

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

$(function(){

$("alert-success").hide();

$("alert-fail").hide();

$("input").keyup(function(){

var pw1=$("#pw1").val(); 

var pw2=$("#pw2").val();

if(pw1 != "" || pw2 != ""){

if(pw1 == pw2){

$("alert-success").show();

$("alert-fail").hide();

$("#submit").removeAttr("disabled");

}else{

$("alert-success").hide();

$("alert-fail").show();

$("#submit").attr("disabled", "disabled");

}

}

});

});

</script>

tip

.hide() : 화면에 보이지 않게 숨겨줌

.show() : 화면에 보이게 설정해줌

.attr("disabled" ,"disabled") : 버튼 비활성화

.removeAttr("disabled") : 버튼 비활성화 속성을 제거