password meter의 form (?) 오류 ???
/skin/member/basic/register_form.skin.php의 57라인 부근의 패스워드 입력부분을 아래의
코드로 바꾸면 적용이 됩니다. 이거 무지하게 강력하게 check를 해서 패스워드 입력하는
사람들의 마음을 아프게 하더라구요. ㅎㅎ
제가 궁금한거는 패스워드를 입력했을 때 어느정도 수준인지 보여주는 색깔 그래프가
패스워드 입력창 옆에 나왔으면 하는데, 밑으로 내려가더라구요. ㅠ..ㅠ
다른거는 다 해결했는데, 이거는 진짜 모르겠어요. css... 넘 시러요 ㅠ..ㅠ
<TR bgcolor="#FFFFFF">
<!-- 패스워드 미터 http://www.codeassembly.com/How-to-make-a-password-strength-meter-for-your-register-form/ -->
<style type="text/css">
<!--
#passwordStrength { height:10px; display:block; float:left; }
.strength0 { width:250px; background:#cccccc; }
.strength1 { width:50px; background:#ff0000; }
.strength2 { width:100px; background:#ff5f5f; }
.strength3 { width:150px; background:#56e500; }
.strength4 { background:#4dcd00; width:200px; }
.strength5 { background:#399800; width:250px; }
-->
</style>
<script language="javascript">
function passwordStrength(password) {
var desc = new Array();
desc[0] = "매우부족"; // very weak
desc[1] = "부족"; // weak
desc[2] = "보통"; // better
desc[3] = "양호"; // medium
desc[4] = "좋음"; // strong
desc[5] = "아주좋음"; // very strong
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
<TD class=m_title>패스워드</TD>
<TD class=m_padding><INPUT class=m_text type=password name="mb_password" size=20 maxlength=20 <?=($w=="")?"required":"";?> itemname="패스워드" onkeyup="passwordStrength(this.value)" >
<span id="passwordDescription"></span>
<span id="passwordStrength"></span>
</TD>
</TR>
코드로 바꾸면 적용이 됩니다. 이거 무지하게 강력하게 check를 해서 패스워드 입력하는
사람들의 마음을 아프게 하더라구요. ㅎㅎ
제가 궁금한거는 패스워드를 입력했을 때 어느정도 수준인지 보여주는 색깔 그래프가
패스워드 입력창 옆에 나왔으면 하는데, 밑으로 내려가더라구요. ㅠ..ㅠ
다른거는 다 해결했는데, 이거는 진짜 모르겠어요. css... 넘 시러요 ㅠ..ㅠ
<TR bgcolor="#FFFFFF">
<!-- 패스워드 미터 http://www.codeassembly.com/How-to-make-a-password-strength-meter-for-your-register-form/ -->
<style type="text/css">
<!--
#passwordStrength { height:10px; display:block; float:left; }
.strength0 { width:250px; background:#cccccc; }
.strength1 { width:50px; background:#ff0000; }
.strength2 { width:100px; background:#ff5f5f; }
.strength3 { width:150px; background:#56e500; }
.strength4 { background:#4dcd00; width:200px; }
.strength5 { background:#399800; width:250px; }
-->
</style>
<script language="javascript">
function passwordStrength(password) {
var desc = new Array();
desc[0] = "매우부족"; // very weak
desc[1] = "부족"; // weak
desc[2] = "보통"; // better
desc[3] = "양호"; // medium
desc[4] = "좋음"; // strong
desc[5] = "아주좋음"; // very strong
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
<TD class=m_title>패스워드</TD>
<TD class=m_padding><INPUT class=m_text type=password name="mb_password" size=20 maxlength=20 <?=($w=="")?"required":"";?> itemname="패스워드" onkeyup="passwordStrength(this.value)" >
<span id="passwordDescription"></span>
<span id="passwordStrength"></span>
</TD>
</TR>
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 15개
<!--
#passwordStrength { position:relative; width:값; height:10px; }
.strength0 { position:absolute; top:값; left: 값; width:250px; background:#cccccc; }
.strength1 { position:absolute; top:값; left: 값;width:50px; background:#ff0000; }
.strength2 { position:absolute; top:값; left: 값;width:100px; background:#ff5f5f; }
.strength3 { position:absolute; top:값; left: 값;width:150px; background:#56e500; }
.strength4 { position:absolute; top:값; left: 값;background:#4dcd00; width:200px; }
.strength5 { position:absolute; top:값; left: 값;background:#399800; width:250px; }
-->
</style>
이렇게 주시면 안될까요?
값부분은 봐가면서 적당히 조절 하시구요 ^^;;
css 를 이용해서 배치할려고하는 의도는 알겠사오나..
너무 힘들어하셔서.. -0-;;
css 는.. 이 사이즈값으로 인해.. 밑으로 떨어지거나 옆으로 붙어버리거나 하더라구요.
값 조절을 잘 하시면 우쌰! 하고 올라갈 듯..
css width 값을 잘 조절해 봤는데... 이게 위로 안가네요. ㅠ..ㅠ
#passwordStrength 에 relative를 주고 높이와 넓이 값을 주므로써
하위에 있는 클래스
.strength0~5의 위치를 마음데로 조절 할 수 있습니다.
#passwordStrength의 넓이와 위치를 기준으로 잡고
하위 클래스에 position: absolute를 이용해서 top: 값 left: 값 으로 안에서 왔다리 갔다리 하게 하니까요.
잘되길 바랍니당 ^^..
css를 지우면 한줄로 나오는거 보면 css 문제가 맞는데... 우...워... ㅠ..ㅠ
.strength0 {position: absolute; top: -14px; left: 200px;width:250px; background:#cccccc; }
.strength1 {position: absolute; top: -14px; left: 200px;width:50px; background:#ff0000; }
.strength2 {position: absolute; top: -14px; left: 200px;width:100px; background:#ff5f5f; }
.strength3 {position: absolute; top: -14px; left: 200px;width:150px; background:#56e500; }
.strength4 {position: absolute; top: -14px; left: 200px;background:#4dcd00; width:200px; }
.strength5 {position: absolute; top: -14px; left: 200px;background:#399800; width:250px; }
저 스타일데로,
한 번 해봤는데 이렇게 나오네요.
그래프는 포기해야 할까봐요 ㅠ..ㅠ
그래프 삭제한 것만 우선 올렸어요 ㅠ..ㅠ...