password meter의 form (?) 오류 ??? > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

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)" >
            &nbsp;&nbsp;
            <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>

이렇게 주시면 안될까요?
값부분은 봐가면서 적당히 조절 하시구요 ^^;;
음.. 어찌 간단히 생각하면.. 간단한데.. 그냥 테이블로 묶어버리니.. 출력되던데요.. -0-;;
css 를 이용해서 배치할려고하는 의도는 알겠사오나..
너무 힘들어하셔서.. -0-;;

css 는.. 이 사이즈값으로 인해.. 밑으로 떨어지거나 옆으로 붙어버리거나 하더라구요.
값 조절을 잘 하시면 우쌰! 하고 올라갈 듯..
#passwordStrength {position: relative; width: 100px; height: 10px; font-size: 1px;}
#passwordStrength 에 relative를 주고 높이와 넓이 값을 주므로써
하위에 있는 클래스
.strength0~5의 위치를 마음데로 조절 할 수 있습니다.
#passwordStrength의 넓이와 위치를 기준으로 잡고
하위 클래스에 position: absolute를 이용해서 top: 값 left: 값 으로 안에서 왔다리 갔다리 하게 하니까요.

잘되길 바랍니당 ^^..
#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; }
전체 66,554 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT