password meter의 form (?) 오류 ??? 정보
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>
댓글 전체
<style type="text/css">
<!--
#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>
이렇게 주시면 안될까요?
값부분은 봐가면서 적당히 조절 하시구요 ^^;;
<!--
#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>
이렇게 주시면 안될까요?
값부분은 봐가면서 적당히 조절 하시구요 ^^;;
position:absolute; top:값; left: 값; ... absolute... ㅠ..ㅠ
음.. 어찌 간단히 생각하면.. 간단한데.. 그냥 테이블로 묶어버리니.. 출력되던데요.. -0-;;
css 를 이용해서 배치할려고하는 의도는 알겠사오나..
너무 힘들어하셔서.. -0-;;
css 는.. 이 사이즈값으로 인해.. 밑으로 떨어지거나 옆으로 붙어버리거나 하더라구요.
값 조절을 잘 하시면 우쌰! 하고 올라갈 듯..
css 를 이용해서 배치할려고하는 의도는 알겠사오나..
너무 힘들어하셔서.. -0-;;
css 는.. 이 사이즈값으로 인해.. 밑으로 떨어지거나 옆으로 붙어버리거나 하더라구요.
값 조절을 잘 하시면 우쌰! 하고 올라갈 듯..
원래 코드가 css로 되어 있어서... 걍 copy & paste 한 것 입니다.
css width 값을 잘 조절해 봤는데... 이게 위로 안가네요. ㅠ..ㅠ
css width 값을 잘 조절해 봤는데... 이게 위로 안가네요. ㅠ..ㅠ
#passwordStrength {position: relative; width: 100px; height: 10px; font-size: 1px;}
#passwordStrength 에 relative를 주고 높이와 넓이 값을 주므로써
하위에 있는 클래스
.strength0~5의 위치를 마음데로 조절 할 수 있습니다.
#passwordStrength의 넓이와 위치를 기준으로 잡고
하위 클래스에 position: absolute를 이용해서 top: 값 left: 값 으로 안에서 왔다리 갔다리 하게 하니까요.
잘되길 바랍니당 ^^..
#passwordStrength 에 relative를 주고 높이와 넓이 값을 주므로써
하위에 있는 클래스
.strength0~5의 위치를 마음데로 조절 할 수 있습니다.
#passwordStrength의 넓이와 위치를 기준으로 잡고
하위 클래스에 position: absolute를 이용해서 top: 값 left: 값 으로 안에서 왔다리 갔다리 하게 하니까요.
잘되길 바랍니당 ^^..
position: relative; 를 했는데도 소용이 없어요. ㅠ..ㅠ...
css를 지우면 한줄로 나오는거 보면 css 문제가 맞는데... 우...워... ㅠ..ㅠ
css를 지우면 한줄로 나오는거 보면 css 문제가 맞는데... 우...워... ㅠ..ㅠ
#passwordStrength { position: relative; width: 100px; font-size: 1px;height:10px; display:block;}
.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; }
.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; }
패스워드와 패스워드 확인 사이의 높이가 달라요 ㅠ..ㅠ...
그래프는 포기해야 할까봐요 ㅠ..ㅠ
그래프는 포기해야 할까봐요 ㅠ..ㅠ
DAKK 님. 감사하구요... 그냥 그래프는 포기할래요. 사실 별거 아니쟎아요. ㅎㅎ...
무척 이쁜데요 꼭 하고 말래요 킁 ㅡㅡ;;
http://www.sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=14924
그래프 삭제한 것만 우선 올렸어요 ㅠ..ㅠ...
그래프 삭제한 것만 우선 올렸어요 ㅠ..ㅠ...
그래프 있는 것이 좋은 것 같은데요. 아래에 지금처럼만 보여도... 아주 좋은데요
그러게요..너무 이븝니다. 나중에 소스 올려주세요
이쁘네요~