자바 폼 유효성 검사

Question

각 양식 입력을 확인하는 두 가지 기능을 사용하려고합니다. 하나는 onchange()이고 다른 하나는 onkeypress()입니다. 내 이유는 onchange() 또는 onblur()를 사용하여 입력 필드를 떠나면 입력이 유효한지 표시하는 것입니다. 입력 필드가 비어 있는지 여부를 확인하고 잘못된 것을 나타내는 메시지를 제거하려고했습니다. onkeypress()를 사용하여 필드를 벗어나지 않고 업데이트 할 수 있도록 입력되었습니다 (사용자가 경고 메시지에 대한 응답으로 삭제 한 내용을 삭제하려는 경우).

의도 한대로 작동하지 않습니다. 그래서 분명히 잘못된 것이 있는지 궁금합니다. 나는 onkeypress (onkeypress은 키를 추적하는 대신 onkeyup 이벤트를 사용하여 제안, 의견에 해명 당

<script type="text/javascript"> 
function checkname() { 
    var name = document.getElementById("un").value; 
    var pattern = /^[A-Z][A-Za-z0-9]{3,19}$/; 

    if (name.search(pattern) == -1) { 
     document.getElementById("name").innerHTML = "wrong"; 
    } 
    else { 
     document.getElementById("name").innerHTML = "right!"; 
    } 
} 

function checkempty(id) { 
    var temp = document.getElementById(id).value; 

    if (!temp) { 
     document.getElementById("name").innerHTML = ''; 
    } 
} 
</script> 

Answer 1

:

내 코드는 다음과 같습니다

<form action="database.php" method = post> 

    Username 
    <input type='text' id='un' onchange="checkname()" onkeypress="checkempty(id)" /> 
    <div id="name"></div><br> 
    ..... 
</form> 

그리고 자바 스크립트 - backspace 문자를 생성하지 않습니다. 이벤트를 전환하면 사용자가 백 스페이스를 눌렀을 때 유효성을 검사 할 수 있습니다.

여기에 a working fiddle입니다.

편집 : 더 명확한 설명이 SO 질문을 참조 : Why doesn't keypress handle the delete key and the backspace key

Answer 2

이 기능은 아래의 빈 필드를 확인해야한다; 당신이 정교한 -

function checkempty(id) { 
    var temp = document.getElementById(id).value; 
    if(temp === '' || temp.length ===0){ 
    alert('The field is empty'); 
    return; 


    } 


} 

//이 이름 확인 기능

function checkname() { 
    var name = document.getElementById("un").value; 
    var pattern = /^[A-Z][A-Za-z0-9]{3,19}$/; 

    if (!name.test(pattern)) { 
    document.getElementById("name").innerHTML = "wrong"; 
    } 
    else { 
    document.getElementById("name").innerHTML = "right!"; 
    } 
}