포커스를 잃을 때 입력 필드 유효성 검사

3020 단어 webdevhtmlbeginnersjavascript
입력 필드가 비활성으로 설정된 경우 함수를 호출해야 하는 몇 가지 시나리오가 있습니다. API를 호출하거나 입력 필드가 초점을 벗어나자마자 양식 필드의 유효성을 검사하고 싶을 수 있습니다.

온블러



onblur 기능은 입력 필드의 초점이 맞지 않는 순간을 발생시킵니다. 이 이벤트는 취소할 수 없으며 취소할 수도 없습니다bubble.

onblur의 반대는 onfocus 입니다.

코드가 이것을 더 잘 이해하도록 하십시오.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validation of field on focs out</title>
</head>
<body>
    <form method="post"  >
        <input type="text" placeholder="Email" id='email'>
        <span id='email-error'></span>
        <input type="password" placeholder="Password" id='password' >
        <span id='password-error'></span>
    </form>
</body>
<script>
    const email =document.getElementById("email")
    const pasword =document.getElementById("password")

    pasword.addEventListener('blur',()=>{
        const error= document.getElementById('password-error')
        if(pasword.value?.length < 8){
            error.innerHTML = "password must be 8 or more characters"
            returnb
        }
        error.innerHTML = ""

    })
    email.addEventListener('blur',()=>{
        const emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        const error= document.getElementById('email-error')
        if(email.value.match(emailRegex)) {
            error.innerHTML = ""
            return
        }
        error.innerHTML = "invalid email"
    })
</script>
</html>


코드 설명



비활성으로 설정된 경우 비밀번호 필드와 이메일 필드 모두에 대한 유효성 검사입니다.

스크립트 태그에서 우리는 두 필드 모두에 흐림 이벤트를 첨부했습니다. 즉, 필드가 초점을 벗어나자마자 함수인 addEventListner의 두 번째 매개변수가 트리거됩니다.

이메일 확인



이메일 필드의 유효성을 검사하기 위해 정규식을 사용하고 있습니다. 이메일 필드의 값이 정규식을 충족하는지 확인한 다음 오류 범위에서 오류를 제거하고 정규식이 충족되지 않으면 잘못된 이메일이라는 오류를 채웁니다.

비밀번호 확인



암호 유효성 검사를 위해 암호 길이가 8보다 크거나 같은지 확인한 다음 암호의 오류 범위를 비우고 그렇지 않은 경우 암호가 8자 이상이어야 한다는 오류를 표시합니다.

결론



개발 경력에서 필드가 비활성으로 설정된 경우 필드의 유효성을 검사하거나 함수를 호출해야 하는 많은 시나리오에 직면하게 됩니다. 나는 당신이 그것을 달성할 수 있는 방법에 대한 몇 가지 기본적인 이해를 제공하려고 노력했습니다.

질문이나 제안 사항이 있으면 댓글로 남겨주세요.

감사
apalis를 사용하여 Rust에서 cron 작업을 예약하고 실행하는 방법
Git의 기본 명령

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage