read : js 의 setCustomValidity 사용한 비번 체크 : 기술 #js #form #validation::공대여자홈

js 의 setCustomValidity 사용한 비번 체크

new

작성자 공대여자

작성 : 2024-12-16 16:27 조회 : 7
지남 1일간

2024-12-16 - 2024-12-16

좌표
첨부된 파일이 없습니다.

#js #form #validation

<script>
    function oninput_form_password(f){
        f.newpassword.setCustomValidity('');
        if(f.newpassword.value.length < f.newpassword.minLength){
            f.newpassword.setCustomValidity(`새 비밀번호는 ${f.newpassword.minLength}자리 이상이어야 합니다.`);
        }else if(f.newpassword.value.length > f.newpassword.maxLength){
            f.newpassword.setCustomValidity(`새 비밀번호는 ${f.newpassword.maxLength}자리 이하이어야 합니다.`);
        }else{
            const v = f.newpassword.value;
            if(/[^0-9a-zA-Z\!@#$%\^&\*]/.test(v)){
                f.newpassword.setCustomValidity('새 비밀번호에 허용되지 않는 문자가 사용되었습니다.');
            }else if(!(/[0-9]/.test(v))){
                f.newpassword.setCustomValidity('새 비밀번호에 숫자가 사용되지 않았습니다.');
            }else if(!(/[a-zA-Z]/.test(v))){
                f.newpassword.setCustomValidity('새 비밀번호에 영문이 사용되지 않았습니다.');
            }else if(!(/[\!@#$%\^&\*]/.test(v))){
                f.newpassword.setCustomValidity('새 비밀번호에 특수문자가 사용되지 않았습니다.');
            }
        }

        f.newpassword_confirmation.setCustomValidity('');
        if(f.newpassword.value != f.newpassword_confirmation.value){
            f.newpassword_confirmation.setCustomValidity('새 비밀번호가 일치하지 않습니다.');
        }
    }
</script>

form의 oninput 에 적용하면 된다.

/ /
No Nickname

No Comment
권한이 없습니다.

{{m_row.m_nick}}

내용이 너무 많습니다!

-

목록형 📷 갤러리형

No	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	17099
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	27536
공지	[공지] 기술 게시판	mins01	06/24 15:10	27483

일	월	화	수	목	금	토
12.1	12.2	12.3	12.4	12.5	12.6 ui_booklet e-book 1	12.7
12.8	12.9	12.10	12.11 검색엔진 로봇의 크롤링 제어 - robots.txt 검색엔진 인덱스 제어하기 - noindex , nofollow	12.12	12.13	12.14
12.15	12.16 JS에서 시간 출력 new 1 js 의 setCustomValidity 사용한 비번 체크 new pixijs 2D WebGL renderer new 1 canvas의 width와 height 의 setter를 wrap 처리 하는 방법 new	12.17 HTML Element 상속 후 element 등록하는 방법 new showPicker(). input 이나 select의 선택시 픽커 보이게 하는 메소드 new 1	12.18	12.19	12.20 vscode 에서 코파일럿 테스트 new vscode 에서 코파일럿 테스트 일반 질문 new	12.21
12.22	12.23	12.24	12.25	12.26	12.27	12.28
12.29	12.30	12.31	1.1	1.2	1.3	1.4